reactjs - Typescript kastar ett fel för fel typ även när typen är rätt

Jag använder ett React YouTube-paket för första gången och jag försöker bädda in och anpassa YouTube-spelaren i en React-komponent:

const options = {
  height: 'auto',
  width: '100%',
  playerVars: {
    // https://developers.google.com/youtube/player_parameters
    controls: 0
  }
}

Från dokumentationen kan jag se att jag använder rätt parametrar, men om jag försöker skicka dem på det här sättet:

<YouTube videoId="xyQ5qD-u-J7" opts={options} ref={videoElement}/>

Men TypeScript ger ett fel:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: YouTubeProps | Readonly<YouTubeProps>): YouTube', gave the following error.     Type '{ height: string; width: string; playerVars: { controls: number; }; }' is not assignable to type 'Options'.       The types of 'playerVars.controls' are incompatible between these types.         Type 'number' is not assignable to type '0 | 2 | 1 | undefined'.   Overload 2 of 2, '(props: YouTubeProps, context: any): YouTube', gave the following error.     Type '{ height: string; width: string; playerVars: { controls: number; }; }' is not assignable to type 'Options'.

Hur är det möjligt, jag skickar ett korrekt värde för kontroller 0 och rätt typ, varför kastar då Typescript ett fel? Jag har försökt importera ett Options-gränssnitt:

import YouTube, {Options} from 'react-youtube'

Men sedan fick jag ett fel:

ESLint: Options not found in 'react-youtube'(import/named)

Hur kan jag fixa detta?

Svar #1

Om du hovrar över options ser du att TypeScript har härlett typen för controls som number.

Sättet TypeScript ser options på är att värdet av controls alltid kan ändras.

Även om det borde vara '0 | 2 | 1 | undefined' och inte number, om du vill skicka det som props.

Det finns några sätt att klara typkontroll, till exempel:

const options = {
  height: 'auto',
  width: '100%',
  playerVars: {
    // https://developers.google.com/youtube/player_parameters
    controls: 0
  }
} as const

options är nu skrivskyddad och värdet av controls är garanterat att alltid vara värdet av dess definition (0).