类型 'Requireable<string>' 不可分配给类型 'Validator<"horizo​​ntal" | “垂直” |未定义>'

Question

代码

import * as React from 'react';
import * as PropTypes from 'prop-types';

interface ILayoutProps {
  dir?: 'horizontal' | 'vertical'
};

const Layout: React.FunctionComponent<ILayoutProps> = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

Layout.defaultProps = {
  dir: 'horizontal'
};
Layout.propTypes = {
  dir: PropTypes.oneOf(['horizontal', 'vertical'])
};
export default Layout;

错误信息

TS2322: Type '{ dir: Requireable<string>; }' is not assignable to type 'ValidationMap<ILayoutProps>'.
  Types of property 'dir' are incompatible.
    Type 'Requireable<string>' is not assignable to type 'Validator<"horizontal" | "vertical" | undefined>'. 

我应该如何定义 Layout.propTypes？

Answer 1

创建一个新类型并引用它。

import * as React from 'react';
import * as PropTypes from 'prop-types';

type Direction = 'horizontal' | 'vertical'

interface ILayoutProps {
  dir?: Direction;
};

const Layout: React.FunctionComponent<ILayoutProps> = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

Layout.defaultProps = {
  dir: 'horizontal',
};

Layout.propTypes = {
  dir: PropTypes.oneOf<Direction>(['horizontal', 'vertical']),
};

export default Layout;

我喜欢强类型的方式。你也可以考虑这个代码。

import * as React from 'react';
import * as PropTypes from 'prop-types';

export enum Direction {
  Horizontal = 'horizontal',
  Vertical = 'vertical',
}

interface ILayoutProps {
  dir?: Direction;
};

const Layout: React.FunctionComponent<ILayoutProps> = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

Layout.defaultProps = {
  dir: Direction.Horizontal,
};

Layout.propTypes = {
  dir: PropTypes.oneOf<Direction>([
    Direction.Horizontal,
    Direction.Vertical,
  ]),
};

export default Layout;

用法：

import Layout, { Direction } from './Layout';
// ...
<Layout dir={Direction.Horizontal}></Layout>

Answer 2

检查other issues 后，这应该可以工作：

import * as React from 'react';
import * as PropTypes from 'prop-types';

const tuple = <T extends string[]>(...args: T) => args;

const DIR = tuple('horizontal', 'vertical')

interface ILayoutProps {
  dir?: typeof DIR[number];
};

const Layout: React.FunctionComponent<ILayoutProps> = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

Layout.defaultProps = {
  dir: 'horizontal',
};

Layout.propTypes = {
  dir: PropTypes.oneOf(DIR),
};

export default Layout;