Typescript - 类型 'string' 的表达式不能用于索引类型

Question

// common.js

const boxNames = ['one', 'two'];

module.exports {
  boxNames,
}

const common = require("./common.js");
const boxNames = common.boxNames;
const messages = {
  'one': {
      id: 'some id',
      text: 'some text',
  },
  'two': {
    id: 'some id',
    text: 'some text',
  },
};
const disabled = boxNames.map((key: string) => messages[key]);

上面的代码为 messages[key] 语句产生了 TypeScript 错误:

TS7053: Element implicitly has an 'any' type because expression oftype 'string' can't be used to index type '{ one: { id: string; text:string; }; two: { id: string; text: string; }; }'. No indexsignature with a parameter of type 'string' was found on type '{ one:{ id: string; text: string; }; two: { id: string; text: string; }; }'.

我将 key 声明为字符串，而 messages 的键是字符串，那么问题是什么？

(这里值得注意的是，messages 是使用 react-intl 库中的 defineMessages 方法生成的。)

(我在 StackOverflow 上看到了一些与此类似的引用 Object.keys 的答案，但我不确定这与我的 TypeScript 错误有何关系。)

Answer 1

对象messages 的键不是string 类型，它们是"one"| “二”。换句话说，它们是字符串文字，是一种比简单的 string 更窄的类型，不能被更广泛的 string 类型索引。

让您的示例编译的简单方法是将键数组转换为元组:

const boxNames = ['one', 'two'] as const;

这有效地将类型从 string[] 更改为 ["one", "two"]，现在当您映射它们时它们将是正确的键入索引您的对象。作为旁注，没有必要显式设置 key 的类型，因为这可以从使用中推断出来。

const disabled = boxNames.map((key) => messages[key]); // this is now fine

另一种输入方法是将 messages 的键分配给数组:

const messages = {
  'one': {
      id: 'some id',
      text: 'some text',
  },
  'two': {
    id: 'some id',
    text: 'some text',
  },
};

const boxNames: (keyof typeof messages)[] = ['one', 'two'];

const disabled = boxNames.map((key) => messages[key]);

这比使用元组更动态，并且它将保持类型安全，因为您将不允许在 boxNames 中包含比作为 messages 键存在的字符串更多的字符串。我想象这在您描述的require 场景中仍然有效，尽管我现在没有设置环境来测试它。

我认为这里的主要内容是 boxNames 需要获取更具体的类型，或者 messages 需要更不具体的类型。我假设这些键必须是完全匹配的，但也许您的情况实际上更适合分配 messages 一个 string 索引类型- 我认为这里没有足够的上下文来假设任何一种方式。这意味着在您的代码中处理您实际上不知道数组和对象在运行时是否匹配的可能性。