reactjs - 即使类型正确， typescript 也会因类型错误而抛出错误

Question

我正在使用 react youtube package我第一次尝试在 React 组件中嵌入和自定义 YouTube 播放器:

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

从文档中我可以看到我使用了正确的参数，但是如果我尝试像这样传递它们:

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

但是， typescript 抛出错误:

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'.

这怎么可能，我为控件 0 传递了正确的值和正确的类型，为什么 Typescript 会抛出错误？我尝试导入选项界面:

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

但是，然后我得到了一个错误:

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

我该如何解决这个问题？

Answer 1

如果将鼠标悬停在选项上，您会看到 typescript 已将控件类型推断为数字。

typescript 看待选项的方式是，控件的值总是可以改变的。

虽然它应该是'0 | 2 | 1 |如果您想作为 props 传递，则 undefined' 而不是 number。

有几种方法可以通过类型检查，例如:

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

options 现在是只读的，并且控件的值保证始终为其定义的值 (0)。