Question

我正在尝试将类型添加到现有的React组件中，该组件可以基于可选的input属性渲染为textarea或textArea。我试图创建一个可区分的联合来正确说明不同的传递道具，但是TypeScript似乎无法像undefined一样处理缺失的区分。这是我看到的唯一的TypeScript distinguishes missing vs undefined。

是否有一种方法可以使歧视缺少财产起作用？

This answer提到判别必须是非可选的，但据我所知，似乎没有得到记录，因此我不确定这是否是TS错误。

最小再现：

interface NumProps {
  isString?: false
  onChange: (value: number) => void
}

interface StringProps {
  isString: true,
  onChange: (value: string) => void
}

type Props = NumProps | StringProps

const props: Props = {
  // Error: Parameter 'value' implicitly has an 'any' type.
  // Expected: 'value' is inferred as 'number'.
  onChange: value => {},
}

const propsUndefined: Props = {
  isString: undefined,
  // OK: 'value' is inferred as 'number'. 
  onChange: value => {},
}

目标摘要：

type InlineInputProps = { textArea?: false } & React.InputHTMLAttributes<HTMLInputElement>
type TextareaProps = { textArea: true } & React.TextareaHTMLAttributes<HTMLTextAreaElement>
type InputProps = InlineInputProps | TextareaProps

TypeScript判别词可以是可选的吗？

0 个答案: