04. Typescript 数组类型

1. 数组类型

数组类型写法:类型\[\]

typescript 复制代码
let arr: number[] = [1, 2, 3]; // 数字数组
let arr2: string[] = ['1', '2', '3']; // 字符串数组
let arr3: any[] = [1, '2', true]; // 任意类型数组

数组内每一项必须遵守定义时的类型,否则会出现报错,使用数组的方法也必须遵守。

bash 复制代码
// 错误情况
// let arr5: number[] = [1, '2', true]; // 错误,数组元素类型不一致
// arr.push('1'); // 错误,p与原始数组类型不一致

2. 数组泛型

数组泛型是定义数组类型的另一种方式。

写法:Array<类型>

typescript 复制代码
// 数组泛型
let arr6: Array<number> = [1, 2, 3]; // 数字数组
let arr7: Array<string> = ['1', '2', '3']; // 字符串数组
let arr8: Array<any> = [1, '2', true]; // 任意类型数组

3. 多维数组

多维数组的类型定义与一维数组类似,只是在类型名后面添加了更多的方括号,需要注意的是有几层维度就需要在后面添加几个中括号。

写法:类型\[\]\[\]

less 复制代码
// 多维数组
let arr9: number[][] = [  [1, 2, 3],
  [4, 5, 6],
]; // 二维数字数组
let arr10: string[][][] = [  [    ["1", "2", "3"],
    ["4", "5", "6"],
  ],
]; // 三维字符串数组

let arr11: string[][][] = [  [    ["1", "2", "3"],
    ["4", "5", "6"],
  ],
  [    ["7", "8", "9"],
    ["10", "11", "12"],
  ],
]; // 三维字符串数组

数组泛型写法:Array<Array<类型>>

typescript 复制代码
// 多维数组泛型
let arr13: Array<Array<number>> = [
  [1, 2, 3],
  [4, 5, 6],
]; // 二维数字数组

let arr14: Array<Array<Array<string>>> = [
  [
    ["1", "2", "3"],
    ["4", "5", "6"],
  ],
]; // 三维字符串数组

4. 使用接口表示数组

一般使用接口来表示类数组

ini 复制代码
// 用接口表示数组
interface NumberArray {
  [index: number]: number;
}
let arr15: NumberArray = [1, 2, 3]; // 数字数组
// arr15[0] = '1'; // 错误,类型不一致

5. arguments 类数组

javascript 复制代码
// anguments 类数组
function Arr(...args:any): void {
  console.log(arguments)
  //错误的arguments 是类数组不能这样定义
  // let arr:number[] = arguments
  //正确的
  let arr:IArguments = arguments; // 类数组
}

IArguments:其实是 TS 中内置的类型。等同于

typescript 复制代码
// IArguments 是 TypeScript 中定义好了的类型,
interface IArguments {
  [index: number]: any;
  length: number;
  callee: Function;
}

6. 限制数组长度

在 TS 中,我们可以使用 TS 声明特性来声明一个固定长度的数组。

typescript 复制代码
// 限制数组长度
// 使用元组类型来限制数组长度
let arr16: [number, number, number] = [1, 2, 3]; // 长度为 3 的数字数组
// arr16.push(4); // 错误,数组长度超出限制

// 使用 ReadonlyArray 来限制数组长度
let arr17: ReadonlyArray<number> = [1, 2, 3]; // 长度为 3 的数字数组
// arr17.push(4); // 错误,数组长度超出限制

// 使用 const 关键字来限制数组长度
const arr18: number[] = [1, 2, 3]; // 长度为 3 的数字数组
// arr18.push(4); // 错误,数组长度超出限制

// 使用数组解构来限制数组长度
let [a, b, c] = [1, 2, 3]; // 长度为 3 的数字数组
// [a, b, c] = [1, 2, 3, 4]; // 错误,数组长度超出限制

7. any 类型数组

表示数组中可以存在任意类型

swift 复制代码
// any 类型的数组
let arr19: any[] = [1, "2", true]; // 任意类型数组

8. 文件下载

📎数组类型.ts

相关推荐
两只羊ovo6 分钟前
手写一个最小版 Claude Code:从任务拆解到 Agent Loop 转起来
前端
给个offer养家糊口13 分钟前
抽离 elpis npm 包
前端
默_笙15 分钟前
🙃 我让爬虫终于看到了我的网站,后端同事说"这也行?"(下):App Router 全栈实战
前端·javascript
葡萄城技术团队22 分钟前
一个单元格放置两个日期选择器:用 SpreadJS CellButtons 录入日期范围
前端
马可家的菠萝2 小时前
自动保存已经有了,为什么笔记软件还需要“历史版本”?
前端·后端·架构
半个落月2 小时前
从 "use client" 到 Route Handler:用 Todos 理解 Next.js 水合与全栈请求
前端·react.js·next.js
qq_452396232 小时前
第七篇:《大型前端项目的模块化与目录结构设计》
前端
你脑门上的脚印2 小时前
Vue 项目从零实现语音转文字、文字转语音功能(完整可用 + 踩坑指南)
前端·vue.js
paopaokaka_luck2 小时前
基于springboot3+vue3的车间生产管理系统(Echarts图形化分析、BI报表)
java·前端·spring boot·学习·echarts
程序员鱼皮2 小时前
3 大 DeepSeek Harness 进阶玩法,招多个大肥鱼帮我干活!
前端·后端·ai编程