typescript 中的{[key: string]: string} 是什么意思-ag捕鱼王app官网

{[key: string]: string} 语法是 typescript 中的索引签名，当我们事先不知道类型属性的所有名称但知道值的形状时使用。 索引签名指定字符串类型的键和值。

// 👇️ function returning index signature
// (a key-value structure with key and value strings)
function getobj(): { [key: string]: string } {
  return { name: 'tom', country: 'chile' };
}
// 👇️ interface using index signature
interface person {
  [index: string]: string;
}
// 👇️ const p1: person
const p1: person = { name: 'tom', country: 'chile' };
// 👇️ type using index signature
type animal = {
  [index: string]: string;
};
const a1: animal = { name: 'alfred', type: 'dog' };

{[key: string]: string} 语法是 typescript 中的索引签名，当我们事先不知道类型属性的所有名称但知道值的形状时使用。

示例中的索引签名意味着当用字符串索引对象时，它将返回一个字符串。

我们可能还会在示例中看到索引签名 {[key: string]: any} 。 它代表一个键值结构，当用字符串索引时返回任何类型的值（非常广泛）。

让我们看一个示例，说明如果我们尝试添加与索引签名中指定类型不同的值，typescript 会如何警告我们。

interface person {
  [index: string]: string;
}
// ⛔️ error: type 'number' is not assignable to type 'string'.
const p1: person = { name: 'tom', age: 30 };

我们已经指定当具有 person 类型的对象被字符串索引时，它应该返回一个字符串。

尝试设置一个值为数字的字符串的键会给我们带来错误。

我们可能会尝试使用索引签名覆盖特定属性的类型。

interface person {
  [index: string]: string;
  // ⛔️ error: property 'age' of type 'number' is not
  // assignable to 'string' index type 'string'.
  age: number;
}

但是示例中 age 属性的类型与字符串索引的类型不匹配，所以 typescript 给了我们一个错误。

在这种情况下，我们可以将字符串索引的类型设置为联合。

interface person {
  [index: string]: string | number;
  age: number;
  name: string;
}
// 👇️ const p1: person
const p1: person = { name: 'tom', country: 'chile', age: 30 };

具有字符串类型索引签名的值的类型是字符串和数字的联合。

age 和 name 属性的值是联合的子类型，因此我们不会收到错误。

尝试向不在联合中的类型添加属性会导致错误。

interface person {
  [index: string]: string | number;
  age: number;
  name: string;
  // ⛔️ error: property 'colors' of type 'string[]' is not assignable
  // to 'string' index type 'string | number'.ts(2411)
  colors: string[];
}

如果我们需要防止分配给它们的索引，还可以将索引签名设置为readonly。

interface readonlyobj {
  readonly [index: string]: string;
}
const obj: readonlyobj = {
  name: 'tom',
  country: 'chile',
};
// ⛔️ index signature in type 'readonlyobj'
// only permits reading.
obj.name = 'alfred';

我们将字符串索引的类型设置为readonly，因此如果我们尝试写入具有字符串键的属性，类型检查器会给我们一个错误。