TypeScript开发之——高级类型-索引签名类型(7)

发表于 2023-04-27 分类于开发， C-前端开发， TypeScript 阅读时长 ≈ 1 分钟

一概述

索引签名
数组的键（索引）是数值类型
自定义数组

二索引签名

2.1 应用场景

绝大多数情况下，我们都可以在使用对象前就确定对象的结构，并为对象添加准确的类型
使用场景：当无法确定对象中有哪些属性（或者说对象中可以出现任意多个属性），此时，就用到索引签名类型了

2.2 索引签名定义

示例代码

1
2
3

interface AnyObject {
    [key: string]: number
}

说明：

使用 [key: string] 来约束该接口中允许出现的属性名称。表示只要是 string 类型的属性名称，都可以出现在对象中
key 只是一个占位符，可以换成任意合法的变量名称。

2.3 索引签名使用

示例代码

let obj: AnyObject = {
    a: 1,
    abc: 2
}

说明：

这样，对象 obj 中就可以出现任意多个属性（比如，a、b 等）
隐藏的前置知识：JS 中对象（{}）的键是 string 类型的

三数组的键（索引）是数值类型

3.1 数组示例

示例代码

1 2	const arr = [1, 3, 5] arr.forEach

3.2 查看数组源码

示例代码

interface Array<T> {
   //省略代码
    [n: number]: T;
}

说明：数组也可以出现任意多个元素。所以，在数组对应的泛型接口中，也用到了索引签名类型

四自定义数组

示例代码

interface MyArray<Type> {
    [index: number]: Type
}
let arr1: MyArray<number> = [1, 2, 3]
arr1[0]

说明：

MyArray 接口模拟原生的数组接口，并使用 [n: number] 来作为索引签名类型
该索引签名类型表示：只要是 number 类型的键（索引）都可以出现在数组中，或者说数组中可以有任意多个元素
同时也符合数组索引是 number 类型这一前提

0%