确定键入取决于接口（TypeScript）中其他键的值

Question

interface InputProps {
  type: 'input' | 'textarea'
  props: | React.InputHTMLAttributes<HTMLInputElement>
         | React.TextareaHTMLAttributes<HTMLTextAreaElement>
}

如果type: 'input'，我想限制props为React.InputHTMLAttributes<HTMLInputElement>类型。

Answer 1

您应该将其定义为2个单独的接口，然后将它们组合：

interface InputProps {
  type: 'input'
  props: React.InputHTMLAttributes<HTMLInputElement>
}

interface TextAreaProps {
  type: 'textarea'
  props: React.TextareaHTMLAttributes<HTMLTextAreaElement>
}

type TextFieldProps = InputProps | TextAreaProps;