0

我正在开发我的 react 应用程序，几周以来我一直在使用 typeScript，但有时我仍然遇到一些问题来键入一些变量。

这是错误消息：

TypeScript error in /Users/SignUpFields.tsx(66,9):
Element implicitly has an 'any' type because expression of type 'string' can't be used to     
index type '{ first_name: string; last_name: string; email: string; phone_number: string;     
address: string; adeli: string; password: string; passwordConfirmation: string; }'.
No index signature with a parameter of type 'string' was found on type '{ first_name: 
string; last_name: string; email: string; phone_number: string; address: string; adeli: 
string; password: string; passwordConfirmation: string; }'.  TS7053

界面 ：

interface IUserData {
 first_name: string;
  last_name: string;
  email: string;
  phone_number: string;
  address: string;
  adeli: string;
  password: string;
  passwordConfirmation: string;
}

我的功能：

handleChanges = (key: string) => (
event: React.FormEvent<HTMLInputElement>
) => {
    let { userData } = this.state;
    let obj: ISignUpFieldsState = this.state;
    for (const k of Object.keys(userData)) {
      if (k ===key){
        console.log('k', k , key);
        userData[k] = event.currentTarget.value;
        this.setState({ userData }, () => this.props.handleChangeFields(obj));
      }
    }
  };

有件事！我想用键值修改我的状态以保持其通用性，并同时保持与每个道具（first_name，...）的接口具有非常精确的东西。我看到了这样的东西：[key: string]: string;但我真的不喜欢它，因为你从 obj 中“松开”了你的道具，它看起来像“任何”类型......

谢谢，祝你有美好的一天！

4

1 回答 1

0

试试这个：

handleChanges = <T extends extends keyof IUserData>(key: T) => (
event: React.FormEvent<HTMLInputElement>
) => {
    let { userData } = this.state;
    let obj: ISignUpFieldsState = this.state;
    for (const k of Object.keys(userData)) {
      if (k === key){
        console.log('k', k , key);
        userData[key] = event.currentTarget.value;
        this.setState({ userData }, () => this.props.handleChangeFields(obj));
      }
    }
  };

现在 typescript 知道密钥只能是 IUserData 中的有效密钥之一。

另外一个好的做法是永远不要改变状态，但总是返回一个新的引用（在上面的例子中，你直接改变了 userData 对象），所以这更好：

    handleChanges = <T extends keyof IUserData>(key: T) => (
    event: React.FormEvent<HTMLInputElement>
    ) => {
    let { userData } = this.state;
    let obj: ISignUpFieldsState = this.state;
    for (const k of Object.keys(userData)) {
      if (k === key){
        console.log('k', k , key);
        userData = {...userData , [key]: event.currentTarget.value};
        this.setState({ userData }, () => this.props.handleChangeFields(obj));
      }
    }
  };
于 2020-02-04T11:11:21.900 回答