reactjs - Hvordan bruke Immer med Typescript

Jeg prøver å bruke Immer med mitt React-prosjekt som allerede bruker TypeScript. Jeg kunne ikke finne i dokumentasjonen, eller andre steder, hvordan man faktisk bruker Immer med TypeScript.

Det jeg har så langt:

export interface IProps { }

export interface IState {
  names: string[]
}

export class ListNames extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.state = { names: [] }
  }

  addName = (name: string) => {
    this.setState(produce(draftState => {
      draftState.names.push(name)
    }))
  }
  ...
}

dette gir meg to feil:

  1. [ts] Object is possibly 'null'
  2. [ts] Property 'names' does not exist on type 'DraftObject<Pick<IState, never>>'

Å sette typen for draftState til IState vil ikke fungere. Det jeg gjorde som fikk det til å fungere, var å caste draftState til IState før jeg bruker det.

Saken er: Jeg kan komme til å ønske å bruke draftState mer enn én gang, så det er i det minste upraktisk.

Hva er den riktige måten å bruke Immer med Typescript på?

Svar #1

Når du ser på typedefinisjonen for produce, tar den en generisk type som er tilstanden, som standard er any. TypeScript-reglene dine er satt opp på en måte som gjør at den tror draftState kan være null. Du kan spesifisere den generiske typen til produce for å angi hva tilstanden er:

produce<IState>(draftObject ...

Relaterte artikler