迹忆客 专注技术分享

当可能未定义的值用于索引对象或数组时，会出现“Type 'undefined' cannot be used as an index type”错误。 要解决该错误，请使用类型保护来确保在索引对象或数组之前该值不是未定义的。

下面是产生上述错误的一个示例。

// 👇️ key is optional (could be undefined)
const obj1: { key?: string } = {
  key: 'name',
};

const obj2 = {
  name: 'James Doe',
};

// ⛔️ Error: Type 'undefined' cannot be
// used as an index type.ts(2538)
const result = obj2[obj1.key];

我们在 obj1 变量中使用问号将 key 属性标记为可选。

这意味着 obj1.key 属性可以是一个字符串或者它可以有一个未定义的值。

通过错误消息，TypeScript 告诉我们不能使用未定义的值来索引对象。

为了解决这个错误，我们必须在访问该属性之前有条件地检查该值是否未定义。

// 👇️ key is optional (could be undefined)
const obj1: { key?: string } = {
  key: 'name',
};

const obj2 = {
  name: 'James Doe',
};

const result = obj1.key != undefined ? obj2[obj1.key as keyof typeof obj2] : '';

console.log(result); // 👉️ "James Doe"

在访问对象中的特定属性之前，我们使用三元运算符检查 obj1.key 属性是否为空（null 或 undefined）。

如果该属性为空，我们只需返回字符串的后备值。

我们还可以使用用作类型保护的简单 if 语句。

const obj1: { key?: string } = {
  key: 'name',
};

const obj2 = {
  name: 'James Doe',
};

let result = '';

if (obj1.key != undefined) {
  result = obj2[obj1.key as keyof typeof obj2];
}

console.log(result); // 👉️ "James Doe"

obj1.key 属性保证是 if 块中的字符串，因此我们可以安全地将其用作索引类型。

当我们尝试使用可能未定义的值来索引数组时，也会发生该错误。

const arr = ['a', 'b', 'c'];

const num: number | undefined = Math.random() > 0.5 ? 0 : undefined;

// ⛔️ Error: Type 'undefined' cannot be
// used as an index type.ts(2538)
arr[num];

num 变量可以存储数字或未定义的值，TypeScript 不允许我们使用未定义的值索引数组。

const arr = ['a', 'b', 'c'];

const num: number | undefined = Math.random() > 0.5 ? 0 : undefined;

if (num != undefined) {
  const result = typeof num !== undefined ? arr[num] : '';
  console.log(result); // 👉️ "a"
}

num 变量保证是 if 块中的数字，因此我们可以安全地访问特定索引处的数组。

如果上述解决方案均无效，并且我们确定该值是一个数字，则可以使用类型断言。

const arr = ['a', 'b', 'c'];

const num: number | undefined = 1;

const result = arr[num as number]; // 👈️ type assertion

console.log(result); // 👉️ "b"

当我们有关于 TypeScript 不知道的值类型的信息时，使用类型断言。

我们有效地告诉 TypeScript num 变量将是一个数字，不用担心。

总结

当可能未定义的值用于索引对象或数组时，会出现“Type 'undefined' cannot be used as an index type”错误。 要解决该错误，需要使用类型保护来确保在索引对象或数组之前该值不是 undefined。