reactjs - 找不到 TypeScript 常量字符串

Question

我试图定义一个字符串常量而不是多次定义它，我的代码如下；

interface RefreshReviewerBenchAction { type: 'REFRESH_REVIEWER_BENCH_COMPONENT' }

我很困惑为什么这不是“字符串”类型，而不是看起来是一个常量字符串。我尝试像这样定义这个常量字符串；

export const REFRESH_REVIEWER_BENCH_COMPONENT = 'REFRESH_REVIEWER_BENCH_COMPONENT';

interface RefreshReviewerBenchAction { type: REFRESH_REVIEWER_BENCH_COMPONENT }

但是我收到一条错误消息，指出“找不到REFRESH_REVIEWER_BENCH_COMPONENT”。我认为找不到它，因为我在需要类型的地方使用了常量字符串。所以问题是字符串和'REFRESH_REVIEWER_BENCH_COMPONENT'有什么区别？以及如何使 'REFRESH_REVIEWER_BENCH_COMPONENT' 成为字符串类型，这样我就不必在整个代码中使用看起来是常量字符串的东西？

标签： reactjstypescript

Answer 1

没错，问题与值和类型之间的差异有关。给定名称可以独立定义为值、类型或两者。（类似的字符串文字'REFRESH_REVIEWER_BENCH_COMPONENT'可以用作值或类型。）使用typeof关键字获取常量的类型REFRESH_REVIEWER_BENCH_COMPONENT：

export const REFRESH_REVIEWER_BENCH_COMPONENT = 'REFRESH_REVIEWER_BENCH_COMPONENT';
interface RefreshReviewerBenchAction { type: typeof REFRESH_REVIEWER_BENCH_COMPONENT }

如果您希望能够REFRESH_REVIEWER_BENCH_COMPONENT直接用作类型，那么您可以定义一个类型别名：

export const REFRESH_REVIEWER_BENCH_COMPONENT = 'REFRESH_REVIEWER_BENCH_COMPONENT';
type REFRESH_REVIEWER_BENCH_COMPONENT = typeof REFRESH_REVIEWER_BENCH_COMPONENT;
interface RefreshReviewerBenchAction { type: REFRESH_REVIEWER_BENCH_COMPONENT }