typescript 的正确使用方法？

Question

我是 Typescript 的新手，对此有一个疑问。

在 React 中，我遇到过组件的 state 可以是 undefined 或者数字的情况。 我有一个 function，它必须使用特定的 state object 作为分派操作的参数（比如说调用 API），并且不能取消定义参数才能调用 API。代码如下。

 interface IState {
   someId?: number;
 }


 const mapDispatchToProps = (dispatch: Dispatch): IPropsFromDispatch => ({
   getSettings: someId => dispatch(getRequest(someId)),
 });

 class someComponent extends React.PureComponent<IProps, IState> {
  
   public constructor(props: IProps) {
     super(props);

     this.state = {
       someId: undefined
     };
   }

   public componentDidUpdate(prevProps: IProps, prevState: IState) {
     if (this.state.someId !== prevState.someId) {
       this.props.getSettings(this.state.someId);
     }
   }

   public render() {
     return (
       <Dropdown
        handleOnSelect={(e) => {this.setState({someId: e.target.value })} }
       />
     )
   }
 }

基本上 someId state 最初是未定义的，但是通过下拉选择后，它将为 someId 设置 state 并触发 dispatch getSettings 操作。 如果我指定调度的类型格式，

 interface IPropsFromDispatch {
   getSettings(someId: number): void;
 }
 

它会给我一个错误说

Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
Type 'undefined' is not assignable to type 'number'.

如果我这样做，错误当然会消失

interface IPropsFromDispatch {
   getSettings(someId?: number): void;
}

但我认为在使用 Typescript 时不推荐这样做，因为调度操作希望将 someId 作为数字，而不是未定义的，以便能够工作。 还是我错了？ 我应该怎么做？

Answer 1

您可以检查state.someId是否真实：

 if (this.state.someId && this.state.someId !== prevState.someId) {
   this.props.getSettings(this.state.someId);
 }

Answer 2

您正在寻找的是隐式类型转换。 参考一下getSettings的用法

public componentDidUpdate(prevProps: IProps, prevState: IState) {
  if (this.state.someId !== prevState.someId) {
    this.props.getSettings(this.state.someId);
  }
}

如果添加 null 检查 typescript 将隐式投number | undefined number | undefined为number

public componentDidUpdate(prevProps: IProps, prevState: IState) {
  if (this.state.someId && this.state.someId !== prevState.someId) {
    this.props.getSettings(this.state.someId); // someId is now of type number
  }
}

Answer 3

你不能直接将它设置为undefined除非类型是number | undefined number | undefined 。 使用null作为默认值或简单地设置this.state = {}这将导致state.someId undefined （因为它未设置）。

Answer 4

我无法回答 React 部分，但 typescript 的行为符合预期您在初始化时将someId定义为未定义。 使用您的第二个签名并检查值的真实性，它将被转换为通过if的数字

Answer 5

我对 Typescript 还很陌生，对此有一个疑问。

在 React 中，我遇到过组件的 state 可以是未定义的或数字的情况。 And I have a function that must use that particular state object as argument to dispatch action (let say calling API), and the argument cannot be undefined in order to call the API. 代码如下。

 interface IState {
   someId?: number;
 }


 const mapDispatchToProps = (dispatch: Dispatch): IPropsFromDispatch => ({
   getSettings: someId => dispatch(getRequest(someId)),
 });

 class someComponent extends React.PureComponent<IProps, IState> {
  
   public constructor(props: IProps) {
     super(props);

     this.state = {
       someId: undefined
     };
   }

   public componentDidUpdate(prevProps: IProps, prevState: IState) {
     if (this.state.someId !== prevState.someId) {
       this.props.getSettings(this.state.someId);
     }
   }

   public render() {
     return (
       <Dropdown
        handleOnSelect={(e) => {this.setState({someId: e.target.value })} }
       />
     )
   }
 }

基本上 someId state 最初是未定义的，但通过下拉选择后，它将为 someId 设置 state 并触发调度 getSettings 操作。 如果我指定调度的类型格式，

 interface IPropsFromDispatch {
   getSettings(someId: number): void;
 }
 

它会给我一个错误说

Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
Type 'undefined' is not assignable to type 'number'.

当然，如果我这样做，错误就会消失

interface IPropsFromDispatch {
   getSettings(someId?: number): void;
}

但我认为在使用 Typescript 时不建议这样做，因为调度操作希望将 someId 作为数字而不是未定义的数字才能工作。 还是我错了？ 我该怎么做？