Question

我无法为material-ui Breakpoint类型提供正确的原型。

断点如下：export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

在我的App.tsx中，如果有以下代码：

import React, { FC } from 'react'
import PropTypes from 'prop-types'
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'
import withWidth from '@material-ui/core/withWidth'

interface IApp {
  width: Breakpoint
}

const App: FC<IApp> = ({ width }) => {
    // Code here
}

App.propTypes = {
  width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired,
}

export default withWidth()(App)

给我以下错误：

Type '{ width: Validator<string>; }' is not assignable to type 'WeakValidationMap<IApp>'.
  Types of property 'width' are incompatible.
    Type 'Validator<string>' is not assignable to type 'Validator<Breakpoint>'.
      Type 'string' is not assignable to type 'Breakpoint'.ts(2322)

Answer 1

问题

执行此操作时：

App.propTypes = {
  width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired,
}

TypeScript会将['xs', 'sm', 'md', 'lg', 'xl']视为随机字符串数组，而不是您感兴趣的特定字符串。

解决方案（TypeScript 3.4 +）

要将其类型缩小到Breakpoint定义的特定值，请使用const assertion。

App.propTypes = {
  width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'] as const).isRequired,
}

解决方案（TypeScript <3.4）

如果您运行的TypeScript版本早于3.4，则可以在定义propTypes之前创建一个知名字符串文字数组来达到相同的结果。

const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl'];

App.propTypes = {
  width: PropTypes.oneOf(breakpoints).isRequired,
}

React Proptypes联合类型断点给出错误

1 个答案: