How to set initial React state in typescript?

Question

What is the proper way to initialize state when using typescript and react. The following throws an error because obviously currentVehicle isn't allowed to be an empty object. What should the initial state be? What are best practicies?

 interface State{
    currentVehicle:Vehicle
}

export default class extends Component<Props, State> {
   state:State={
       currentVehicle:{}
     }
  }

Since you have passed a State interface to the React.Component you should just initialize it like state = { currentVehicle: {} } — Nikita Ščigelský
– Nikita Ščigelský, Commented Feb 13, 2020 at 13:54
Does this answer your question? Typescript and React setting initial state with empty typed array — squillman
– squillman, Commented Feb 13, 2020 at 13:55

ehutchllew · Accepted Answer · 2020-02-13 14:44:30Z

5

You can cast it:

state:State = {
    currentVehicle:{} as Vehicle
}

answered Feb 13, 2020 at 14:44

ehutchllew

9588 silver badges16 bronze badges

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

2 Comments

Sean A.S. Mengis Over a year ago

The underlying value will still be an empty object which can cause errors during compile time if you try to access a prop in the empty object.

ehutchllew Over a year ago

You'll only get a RefError if you try to access nested props, but top level props will just return undefined. Regardless though you should probably be null checking or at least initiating a state with all required values.

Daniel Gabor · Accepted Answer · 2020-02-13 14:06:35Z

4

In this case i would define the type of currentVehicle as Vehicle or null and assign to it a null value on the initial state

interface State {
   currentVehicle: Vehicle | null
}

export default class extends Component<Props, State> {
  state: State = {
     currentVehicle: null
  }
}

A second option would be to define currentVehicle as an optional parameter. That way you don't have to initialise it.

interface State {
   currentVehicle?: Vehicle // optional
}

export default class extends Component<Props, State> {

  /** you only define your state without defining state.currentVehicle */
  state: State = {}
}

answered Feb 13, 2020 at 14:06

Daniel Gabor

1,52812 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to set initial React state in typescript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related