在 TypeScript 中定义和使用键值对

作者

在 TypeScript 中定义和使用键值对

Defining and using Key-Value pair in TypeScript

使用索引签名在 TypeScript 中定义键值对，例如
const employee: { [key: string]: string | number } = {}. 当我们事先不知道类型键的所有名称，但我们知道它们值的形状时，使用索引签名。

索引.ts
const employee: { [key: string]: string | number } = {};

employee.name = 'James';
employee.salary = 100;

// 👇️ {name: 'James', salary: 100}
console.log(employee);

我们使用索引签名来定义 TypeScript 中的键值对；。

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

示例中的索引签名意味着当一个对象被索引为 astring时，它将返回一个类型为string or的值number。

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

索引.ts
const employee: { [key: string]: any } = {};

employee.name = 'James';
employee.salary = 100;

employee.years = [2021, 2022];

// 👇️ {name: 'James', salary: 100, years: [2021, 2022]}
console.log(employee);

当{[key: string]: any}我们事先不知道类型键的名称和值的形状时，索引签名用于创建键值对。

您可以提前声明您知道的键和值的类型，并为您不知道的键和值使用any类型。

索引.ts
type Employee = {
  [key: string]: any;
  name: string;
  salary: number;
};

const employee: Employee = {
  name: 'James',
  salary: 100,
};

employee.country = 'Chile';
employee.years = [2021, 2022];

我们声明了name和salary属性的类型，这是我们提前知道的，并且使用索引签名仍然允许我们将具有任​​何值的任何键分配给对象。

这很有用，因为我们仍然获得对name 和salary属性的类型支持，如果我们尝试将属性设置为不兼容的类型，类型检查器会抛出错误。

如果您尝试将不兼容类型的属性分配给该对象，则会出现错误。

索引.ts
type Employee = {
  [key: string]: string;
};

const employee: Employee = {
  name: 'James',
};

// ⛔️ Type 'number' is not assignable
// to type 'string'.ts(2322)
employee.salary = 100;

我们使用了带有字符串键和值的索引签名，因此如果我们尝试向对象添加值，类型检查器会显示错误number。

但是，我们不能简单地添加一个salary类型为numberto
的键Employee，因为我们已经指定所有类型为 string 的键的值为string。

索引签名{[key: string]: string}意味着当对象被索引为 a 的键时string，该值将始终为 a
string。

索引.ts
type Employee = {
  [key: string]: string;
  // ⛔️ Error: Property 'salary' of type 'number'
  // is not assignable to 'string' index type 'string'.
  salary: number;
};

要解决这个问题，您必须使用
联合类型。

索引.ts
type Employee = {
  [key: string]: string | number;

  salary: number;
};

const employee: Employee = {
  name: 'James',
  salary: 100,
};

新的索引签名意味着如果对象使用string键索引，它会返回一个stringor值number，因此我们能够在具有number值的类型上设置其他属性。

–