Reactjs TypeScript在React.FunctionalComponent上声明静态枚举

我有一个带有静态支柱的React.FunctionalComponent，即：

import MyAwesomeComponent from './MyAwesomeComponent';

...

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

如何为这些组件编写.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;

Record

生成一个带有

mode

值的类型（

'super-awesome'|'small 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,
}

---

您可能不需要枚举；字符串的联合（

type modes='super awesome'|'smer awesome'|'regular'

）会起作用吗？但是我无法更改的JS代码已经用camelCased键导出了模式你说的“失败”是什么意思？似乎工作正常（从枚举定义中删除冗余

=

后）冗余=不在我的代码中-只是一个输入错误；主要问题是：导出的静态道具有MyAwesomeComponent.modes.superAwesome的myawesome.modes['super-awesome']安装；我需要声明现有模块才能在我的.tsx编解码器中使用它。您还可以帮助声明为函数的组件吗？（一）最新问题

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

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,
}