Proper way of using typescript?

Question

I am fairly new to Typescript and have one question about it.

In React, I encountered a situation whereby the state of a component can be undefined or a number. 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. Code is below.

 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 })} }
       />
     )
   }
 }

Basically the someId state initially is undefined, but after selecting through dropdown, it will set the state for someId and trigger the dispatch getSettings action. If I specify type format of the dispatch,

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

it will throw me an error saying

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

The error will be gone if I do this of course

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

But I dont think this is recommended in using Typescript, since the dispatch action expects to have the someId as a number, not undefined, to be able to work. Or am I wrong? How should I do this?

See "typescript type narrowing" in your favourite search engine. Here's a nice result: microsoft.github.io/TypeScript-New-Handbook/chapters/narrowing/… — spender
– spender, Commented Aug 3, 2020 at 11:29

thedude · Accepted Answer · 2020-08-03 11:24:15Z

2

You could check that state.someId is truthy:

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

answered Aug 3, 2020 at 11:24

thedude

9,8371 gold badge34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jiri Kralovec · Accepted Answer · 2020-08-03 11:27:31Z

1

You can't set it to undefined directly unless the type would be number | undefined. Either use null as a default value or simply set this.state = {} which will result in state.someId being undefined (since it is not set).

answered Aug 3, 2020 at 11:27

Jiri Kralovec

1,6271 gold badge14 silver badges22 bronze badges

Comments

Mario Petrovic · Accepted Answer · 2020-08-03 11:43:32Z

1

What your are looking for are implicit type casts. Lets refer to the usage of getSettings

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

If you add a null check typescript will implicitly cast number | undefined to 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
  }
}

edited Aug 3, 2020 at 11:43

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

answered Aug 3, 2020 at 11:25

mamichels

6494 silver badges12 bronze badges

1 Comment

tnkh Over a year ago

Thanks for your help. But I gotta pick one to mark as solution. So I picked the earliest answer that is similar to your solution.

zedryas · Accepted Answer · 2020-08-03 11:26:09Z

0

I can't answer for the React part but typescript is behaving like expected You define someId as undefined upon initialisation. Use your second signature and check for the truthyness of the value and it will be casted as a number pass the if

answered Aug 3, 2020 at 11:26

zedryas

1,00412 silver badges20 bronze badges

Collectives™ on Stack Overflow

Proper way of using typescript?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related