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?
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With