TypeScript 元组类型精简知识点

一、元组基础特性

  • 定义:TypeScript 特有类型,允许数组成员类型不同(与数组的"同类型成员"特征区分)。
  • 声明方式 :成员类型写在方括号内,需显式声明(否则会被推断为联合类型数组)。
    示例:const t: [string, number, boolean] = ['a', 1, true]
  • 与数组的区分
    • 数组:类型写在方括号外(number[]),成员类型必须相同。
    • 元组:类型写在方括号内([number]),成员类型可不同。

二、元组成员规则

  • 可选成员 :尾部成员可加 ? 表示可选(可选成员必须在必选成员之后)。
    示例:type Tuple = [number, string?](可包含 1 或 2 个成员)。
  • 不定成员 :用扩展运算符(...)表示不限数量的成员,... 后需跟数组/元组。
    示例:type NamedNums = [string, ...number[]](第一个成员为字符串,后续为任意数量数值)。
    • ... 可位于元组任意位置(头部、中部、尾部)。
  • 成员命名 :可添加说明性名称(无实际作用),格式为 名称: 类型
    示例:type Color = [red: number, green: number, blue: number]

三、只读元组

  • 声明方式
    1. readonly [类型1, 类型2]
    2. Readonly<[类型1, 类型2]>(泛型工具类型)。
  • 特性:禁止修改、新增、删除成员。
  • 类型关系 :普通元组是只读元组的子类型(普通元组可赋值给只读元组,反之不行)。
    • 示例:let t: [number] = [1]; let rt: readonly [number] = t 正确;t = rt 报错。

四、成员类型与数量推断

  • 成员类型读取
    • 通过索引:type Tuple = [string, number]; type T = Tuple[1](返回 number)。
    • 所有成员类型:Tuple[number](返回联合类型,如 string|number)。
  • 成员数量推断
    • 无可选成员和 ... 时,TypeScript 可确定元组长度(如 [number, number] 长度固定为 2)。
    • 含可选成员时,推断可能的长度范围(如 [number, number?] 长度为 1|2)。
    • ... 时,无法推断长度,元组会被当作数组处理(成员数量不确定)。

五、扩展运算符应用

  • 数组传参问题 :数组用 ... 传参时,因成员数量不确定可能报错(如函数需固定参数个数)。
  • 解决方法
    1. 将数组声明为固定长度元组:const arr: [number, number] = [1, 2]
    2. 使用 as const 断言:const arr = [1, 2] as const(推断为只读元组 readonly [1, 2])。
相关推荐
Nan_Shu_6141 分钟前
学习: Threejs (2)
前端·javascript·学习
G_G#9 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
@大迁世界25 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路34 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug37 分钟前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213839 分钟前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中1 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路1 小时前
GDAL 实现矢量合并
前端
hxjhnct1 小时前
React useContext的缺陷
前端·react.js·前端框架
前端 贾公子2 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端