reactjs - Tipo 'Requireable' não é atribuível ao tipo 'Validator<"horizontal" | "vertical" | undefined>'

código

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;

mensagem de erro

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

Como devo definir Layout.propTypes?

Resposta #1

Crie um novo tipo e faça referência a ele.

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;

Eu gosto de um modo fortemente tipado. Talvez você possa considerar este código também.

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;

Uso :

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

Resposta #2

Depois de verificar outros problemas, isso deve funcionar:

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;