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

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>

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;