在 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];

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

这很有用,因为我们仍然获得对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值的类型上设置其他属性。