7. 属性索引

约 826 字大约 3 分钟

2025-05-16

在 TypeScript 中，属性索引（Indexable Types）允许我们定义对象的动态属性名（索引签名），即对象可以通过某种类型的键（如 string 或 number）来访问值。它常用于描述类似字典（键值对）或数组的结构。

一、基础写法

interface A {
  [prop: prop_type]: value_type;
}

prop：属性名，可以是任意字符串。
prop_type：属性名的类型，可以是字符串、数字或符号类型。
value_type：属性值的类型，可以是任何有效的 TypeScript 类型。

二、属性索引的类型

最基础的属性索引主要有string、number和symbol三种类型。

1、字符串索引

字符串索引用于描述对象中属性名是字符串类型的属性，主要在对象中使用。

interface A {
  [prop: string]: any;
}
const a: A = {
  name: "123",
  age: 123,
};

2、数字索引

数字索引用于描述对象中属性名是数字类型的属性，主要在数组中使用。

interface A {
  [index: number]: any;
}
const a: A = [1, 2, 3];

3、符号索引

符号索引用于描述对象中属性名是符号类型的属性，主要用于描述对象中属性名是symbol类型的属性。

interface A {
  [index: symbol]: any;
}
const a: A = {
  [Symbol("name")]: "123",
  [Symbol("age")]: 123,
};

三、特殊用法

1、字面量索引

字面量索引是字符串索引的一种特殊形式，使用字面量和模板字符串拼接的形式对属性名进行了一定格式的约束。

例如以下场景中：我们可以用来拼接 CORS 的报文。

interface CORS {
  [key: `Access-Control-Allow-${string}`]: string;
}
const cors_config: CORS = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
  "Access-Control-Allow-Credentials": "true",
  "Access-Control-Expose-Headers": "Content-Type, Authorization",
};

或者自定义 http 报文头。

interface HttpHeader {
  [key: `x-${string}`]: string;
}
const http_header: HttpHeader = {
  "x-request-id": "1234567890",
  "x-timestamp": "2023-05-16T19:08:51.000Z",
  "x-user-agent": "Mozilla/5.0",
  "x-ip-address": "IP_ADDRESS  "x-ip-address": "127.0.0.1",
}

2、多个索引混合

混合索引是指属性名可以是多种类型的组合。

interface MixedDictionary {
  [key: string]: any;
  [index: number]: any;
}

const data: MixedDictionary = {
  name: "Bob",
  age: 30,
  0: "zero",
  1: 100,
};

我们需要注意一种情况：接口中同时定义了字符串索引和数值索引。这时候，数值索引必须服从于字符串索引。

因为在 JavaScript 中，数值属性名最终是自动转换成字符串属性名。

interface A {
  [prop
: string]: number;
  [prop: number]: string; // 报错'number' index type 'string' is not assignable to 'string' index type 'number'.
}
interface B {
  [prop
: string]: number;
  [prop
: number]: number; // 正确
}

3、索引的联合类型

联合索引是指属性名可以是多个类型的组合。

interface A {
  [key: string | number]: any;
}
const a: A = {
  name: "123",
  age: 123,
  1: "1",
};

4、设置只读

只读索引是指属性名是只读的，不能被修改。

// @errors: 2540
interface A {
  readonly [key: string]: any;
}
const a: A = {
  name: "123",
  age: 123,
};
a.name = "456";

5、结合固定属性

属性索引可以结合固定属性一起使用，用于描述对象中属性名是字符串类型的属性，同时还包含其他固定属性、可选属性、只读属性。

我们一般要求固定属性必须在属性索引的前面，方便代码阅读。

interface A {
  name: string;
  age?: number;
  readonly email: string;
  [key: string]: any;
}
const a: A = {
  name: "123",
  age: 123,
  email: "123@qq.com",
};

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24