React, typcript и prop-types: как использовать собственный тип?

Question

У меня есть строковый литерал, что-то в форме type MyType = 'str1' | 'str2' | 'str3', и я хочу, чтобы один из моих реквизитов принимал только этот тип, но я не знаю, как сказать PropTypes.

Я имею пытался использовать propTypes.oneOf(['str1', 'str2', 'str3']), но затем машинопись выводит его как обычную строку, чего я не хочу.

Answer 1

Поскольку это проверка типов с помощью TypeScript, вы не пытаетесь делать это на уровне среды выполнения React (propTypes), вы делаете это на уровне TypeScript.

Ваш компонент должен использовать вашу строку литеральный тип в его типе реквизита:

type MyComponentProps = {
    propName: MyType;
}

Тогда, если его компонент класса:

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

Или если вы используете функциональный компонент:

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