Question

我有以下打字稿代码：

interface Props extends WithStyles<typeof styles> { }

interface State {
  users: Array<User>;
}

class UsersTable extends React.Component<Props, State> {
  state = {users: []};

  componentWillMount() {
    fetch(`${apiUrl}/users`)
      .then(resp => resp.json())
      .then(users => {
        this.setState({users});
      });
  }

  render() {
    const {classes} = this.props;
    const {users} = this.state;

    if (!users.length) {
      return('...Loading');
    }

    return(
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Id</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {users.map(u => (
              <TableRow key={u.Id}>
                <TableCell numeric>{u.Id}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}
export default withRoot(withStyles(styles)(UsersTable));

它不会编译并显示错误： 类型'never'不存在属性'Id'。 据我了解this.state.users的类型为“从不”，但是，如果我添加构造函数：

  constructor(props: Props) {
    super(props);
    this.state = {users: []};
  }

它可以正常编译，并且状态为正确的类型。那么第一种方法和第二种方法有什么区别？

Answer 1

问题在于，当您在类中拥有分配state = {...}时，状态类型取决于分配给state的对象的类型，而不是基类定义。这意味着这里的状态类型为{users: never[]}（尽管我认为它是any[]，但是在较新的打字稿版本中一定有所不同）。

明确指定类型，例如。 state: State = { users: [] }或state = { users: [] } as State。

反应打字稿构造函数状态与属性

1 个答案: