TypeScript在React上声明静态枚举.功能组件

Question

我有一个React。具有静态道具的FunctionalComponent，即：

import MyAwesomeComponent from './MyAwesomeComponent';
...
<MyAwesomeComponent mode={MyAwesomeComponent.modes.superAwesome} />

静态道具是关键价值图：

MyAwesomeComponent.modes = {
superAwesome: 'super-awesome',
almostAwesome: 'almost-awesome',
regular: 'regular',
}

如何为此类组件编写.d.ts？

我尝试制作枚举，然后添加到导出为StaticProps:

enum modes {
superAwesome = 'super-awesome',
almostAwesome = 'almost-awesome',
regular = 'regular',
}
interface MyAwesomeComponentProps {
mode: modes,
}
interface StaticProps {
modes: Record<modes, modes>,
}
declare const MyAwesomeComponent: React.FC<MyAwesomeComponentProps> & StaticProps;
export default MyAwesomeComponent;

但它在有破折号的模式值上失败，即"超级棒">

我如何键入这样的组件，以便在移动指针时使用camelCase键并看到虚线值？

UPD：找到解决方案！谢谢你，阿列克谢！

UPD2：我的一些组件被声明为一个函数，即：

declare namespace MyAwesomeComponent {
declare enum modes {
superAwesome = 'super-awesome',
almostAwesome = 'almost-awesome',
regular = 'regular',
}
}
interface MyAwesomeComponentProps {
mode: MyAwesomeComponentProps.modes,
}
declare function MyAwesomeComponent(props: PropsWithChildren<MyAwesomeComponentProps): JSX.Element;
export default MyAwesomeComponent;

当我尝试时，我会得到@typescript-eslint/no-unsafe-assignment和@typescript-eslint/no-unsafe-member-access的内部错误

<MyAwesomeComponent mode={MyAwesomeComponent.modes.superAwesome} />

Answer 1

Record<modes, modes>生成一个类型，其中mode值('super-awesome' | 'almost-awesome' | 'regular'(既是键也是值。您要查找的是可以使用typeof运算符查询的枚举对象的实际类型：

interface StaticProps {
modes: typeof modes,
}

游乐场

---

另一个仅供参考的选项-使用常规类型别名：

type Modes = {
superAwesome: 'super-awesome',
almostAwesome: 'almost-awesome',
regular: 'regular',
}
interface MyAwesomeComponentProps {
mode: Modes[keyof Modes],
}
interface StaticProps {
modes: Modes,
}

游乐场