CODEWITHSUNDEEP
reactjstypescriptreact-proptypes
One-Winged_Eagle
One-Winged_Eagle

Reputation: 61

React, typescript and prop-types: how to use own type?

I have a string type literal, something in the form of type MyType = 'str1' | 'str2' | 'str3' and I want one of my props to accept only this type, but I have no idea how to tell PropTypes.

I've tried to use propTypes.oneOf(['str1', 'str2', 'str3']) but then typescript infer it as a normal string, which I don't want.

Upvotes: 0

Views: 429

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1073968

Since this is type checking with TypeScript, you don't try to do it at the React runtime level (propTypes), you do it at the TypeScript level.

Your component should use your string literal type in its props type:

type MyComponentProps = {
    propName: MyType;
}

Then if its a class component:

class MyComponent extends React.Component<MyComponentProps, /*...your state type here...*/> {
    // ...
}

Or if you're using a functional component:

const MyComponent: React.FC<MyComponentProps> = ({propName}) => {
    // ...
};

Upvotes: 3

Related Questions