有没有一种方法可以在打字稿中覆盖接口中的类型

Question

我正在尝试立即进入TS，并将其添加到我的React Antive应用程序中。

假设我有这样的组件：

interface Props {
  name: string;
  onChangeText: (args: { name: string; value: string }) => void;
  style: ReactNative.TextStyle;
}
export class Input extends React.Component<Props, {}> {
  static defaultProps = {
    onChangeText: null,
    style: {},
  };
  handleTextChange = (text: string) => {
    const { name, onChangeText } = this.props;
    if (onChangeText) {
      onChangeText({ name, value: text });
    }
  };
  render() {
    const { style: propsStyle, onChangeText, ...restProps } = this.props;
    return (
      <ReactNative.TextInput
        style={[style, propsStyle]}
        onChangeText={this.handleTextChange}
        {...restProps}
      />
    );
  }
}

但是，如果我尝试以这种方式使用此组件：

<Input
  name='title'
  value={this.state.title}
  onChangeText={this.handleFieldChange}
/>

我遇到了一个错误：

属性'值'在类型上不存在'intinsiCattributes＆amp;intinsicclassattributes ...

但是我无法从ReactNative.TextInputProps继承Props，因为在这种情况下，我覆盖了onChangeText的界面并开始遇到另一个错误。
那么，有没有办法这样做？

Answer 1

您可以做

之类的事情

type BaseProps = ReactNative.TextInputProps;
interface Props extends BaseProps {
  name: string;
  onChangeText: (args: { name: string; value: string }) => void;
  style: ReactNative.TextStyle;
}

如果您的自定义属性与基本属性相撞，则可以从扩展接口中删除它们：

type BaseProps = Pick<ReactNative.TextInputProps, Exclude<keyof ReactNative.TextInputProps, "name" | "onChangeText">>;
interface Props extends BaseProps {

有关 Pick<..., Exclude<...>>（又称 Omit<>）的更多信息在这里。

Answer 2

如果您在界面上定义了索引签名，只要它与签名类型匹配：

interface TextStyle { fontSize: number }
interface Args {
  name: string;
  value: string;
}
type onChangeText = (args: Args) => void;
interface Props {
  [key: string]: string | TextStyle | onChangeText;
  name: string;
  onChangeText(args: { name: string; value: string }): void;
  style?: TextStyle;
}

现在

const props: Props = {
  name: 'title', 
  onChangeText: ({name, string}) => false,
  value: 'value' // <- no error 
}

但是请注意，这样的事情会失败：

const props: Props = {
  name: 'title', 
  onChangeText: ({name, string}) => false,
  value: 10 // <- cannot be assigned
}

除非您更新索引签名以包括该类型