没有 Props 的 TypeScript React 状态答案

【问题标题】：TypeScript React State without Props没有 Props 的 TypeScript React 状态
【发布时间】：2018-11-14 08:39:50
【问题描述】：

我想利用 TypeScript 中的静态和强类型，但仅限于状态，因为我不打算接受任何道具。

当我尝试这样传递接口时，我最终会遇到错误：

import * as React from 'react';
import {Link} from 'react-router-dom';
import Constants from '../Constants';

interface ILoginState {
   email: string;
   password: string;
   remember: boolean;
   error: string;
   isLoading: boolean;
}

class LoginView extends React.Component<{}, ILoginState> {

   constructor(props) {
      super(props);

      this.state = {
         email: '',
         password: '',
         remember: false,
         error: '',
         isLoading: false
      };
   }

 render() {
      return (<div>Login goes here</div>
      );
   }
}

export default LoginView;

我最终得到一个编译错误：

ERROR in [at-loader] ./src/scripts/pages/LoginView.tsx:41:21 
    TS2345: Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'ILoginState | ((prevState: Readonly<ILoginState>, props: {}) => ILoginState | Pick<ILoginState, "...'.
  Type '{ [x: number]: any; }' is not assignable to type 'Pick<ILoginState, "email" | "password" | "remember" | "error" | "isLoading">'.
    Property 'email' is missing in type '{ [x: number]: any; }'.

我也尝试使用“any”代替空括号，但这也不起作用。

这是跟踪所指的第 41 行 (this.SetState...)：

   handleChange = event => {
      const target = event.target;
      const value = target.type === 'checkbox' ? target.checked : target.value;
      this.setState({
         [target.name]: value
      });
   }

以下是所有使用的示例：

<input name="email" type="email" value={this.state.email} onChange={this.handleChange} />
<input name="password" type="password" value={this.state.password} onChange={this.handleChange} />
<input name="remember" type="checkbox" checked={this.state.remember} onChange={this.handleChange} />

【问题讨论】：

该错误表明问题出在 state 的类型上，而不是 props。你的 sn-p 的哪一行是第 41 行？（您可以在该行添加评论，以便我们知道错误在哪里）？此外，从错误来看，问题似乎出在setState 调用上。您在示例中遗漏的那个组件中是否有 setState 调用？如果是的话，你能把它包括进来吗？
@CRice 添加了请求的 sn-p
看起来event.target.name 被推断为number 类型（不知道为什么），target.value 类型为any。由于名称推断为number，我认为您不能将其转换为keyof ILoginState（这将是最好的选择）。这可能是最简单的事情就是将状态对象转换为任何情况的情况之一。 EG：this.setState({[target.name]: value} as any)，因为我不确定number 的推论来自哪里，或者你必须改变什么来纠正它。希望对react有更多了解的人能给出更好的答案。

标签： reactjs typescript

【解决方案1】：

选项 1

class LoginView extends React.Component<{}, ILoginState> {
   constructor({}) {
   }
}

选项 2

class LoginView extends React.Component<null, ILoginState> {
   constructor(null) {
   }
}

由于 props 默认值为空对象，我个人更喜欢选项 1。

编辑：似乎最新的打字稿版本不支持选项 1。我将建议以下方法之一（在 TS 3.7 上测试）：

class LoginView extends React.Component<{}, ILoginState> {
   constructor() {
       super({});
   }
}

// OR
class LoginView extends React.Component<{}, ILoginState> {
   constructor(props = {}) {
       super(props);
   }
}

感谢@Andy 让我注意到了这个更新。

【讨论】：

当我尝试在 jsx 中像 <LoginView /> 一样实例化组件时，我发现选项 1 给了我一个错误。我收到错误 TS2322：Type '{}' is not assignable to type 'never'