reactjs - react typescript 构造函数状态与属性

Question

我有以下 typescript 代码:

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));

它不会编译错误:属性“Id”在类型“never”上不存在。据我了解 this.state.users 获取类型“从不”，但是，如果我添加构造函数:

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

它编译得很好并且状态得到了正确的类型。那么第一种方法和第二种方法有什么区别？

Answer 1

问题是，当你在类中赋值 state = {...} 时，状态的类型取决于你赋值的 state to，而不是基类定义。这意味着这里的状态类型是 {users: never[]}(虽然我认为它是 any[]，但这在较新的 typescript 版本中一定是不同的).

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