Type 'Requireable<string>' is not assignable to type 'Validator<"horizontal" | "vertical" | undefined>'

Question

code

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;

error message

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

How should I define Layout.propTypes?

Answer 1

Make a new type and reference it.

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;

I like strongly typed way. May you can consider this code too.

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;

Usage:

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

Answer 2

After checking other issues, this should work:

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;