TypeScript3(数组)

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

这是最常用、最直观的定义方式,表示一个由特定类型元素组成的数组。

ts 复制代码
const arr1: number[] = [1, 2, 3];
const arr2: string[] = ['a', 'b', 'c'];
const arr3: boolean[] = [true, false];
const arr4: any[] = [1, 'a', true];

arr1.unshift(0); // [0, 1, 2, 3]

联合类型数组:如果数组中的元素类型不确定,可以使用联合类型。

ts 复制代码
// 数组元素可以是 number 或 string 
let mixedArray: (number | string)[] = [1, 'two', 3, 'four'];

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

这种语法使用泛型(Generics)来定义数组类型,提供了另一种可读性强的选择。

ts 复制代码
let numbers: Array<number> = [1, 2, 3, 4];

同样也可以使用联合类型

ts 复制代码
let mixedArray: Array<number | string> = [1, 'two', 3, 'four'];

3.用接口表示数组

一般用来描述类数组,核心在于描述那些结构不完全是数组,但行为又类似数组的复杂对象。

ts 复制代码
interface NumberArray {
    // 可以描述任何拥有数字索引并且值是数字的对象
    [index: number]: number;
}
const arr6: NumberArray = [1, 2, 3];

举个栗子

ts 复制代码
interface StudentScore {
    [index: number]: number;
    name: string;
    average(): number;
}

const score: StudentScore = {
    0: 90,
    1: 95,
    2: 100,
    name: "YaeZed",
    average() {
        let sum = 0;
        for (let i = 0; i < 3; i++) {
            // sum += this[i];// 这里报错原因是因为编译器无法保证每个i都存在
            const score = this[i];
            if (score !== undefined) sum += score; // 这里的undefined判断是为了避免数组越界
        }
        return sum / 3;
    }
}
// console.log(score[0]);
// console.log(score.name);
// console.log(score.average());

4.any

any类型数组,在 TypeScript 中,any[] 是一种特殊的数组类型,它允许数组中包含任何类型的元素。它本质上是 TypeScript 类型的"逃生舱",用于在类型系统无法确定或不方便确定类型时,暂时放弃类型检查。更多还是使用联合类型。

ts 复制代码
const arr7: any[] = [1, 'a', true];

参考文章

小满zs 学习typeScript4(数组类型) xiaoman.blog.csdn.net/article/det...

相关推荐
Momo__18 小时前
你写的 import 重试,从来没生效过
前端·javascript·typescript
长不大的杨瑞杰2 天前
OpenCode v2 Custom Tools 实战:开发数据库、工单与发布工具
人工智能·typescript·开发工具·opencode·custom tools
shmily麻瓜小菜鸡2 天前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript
腾科IT教育2 天前
TypeScript 泛型(Generics):类型占位符实现复用与安全
安全·typescript·泛型
猫头_3 天前
MCP 开发实战:把你自己的后端 API 接入 Agent
人工智能·typescript·mcp
长不大的杨瑞杰3 天前
OpenCode v2 LSP 实战:内置语言服务器、自定义配置与诊断闭环
java·人工智能·typescript·lsp·opencode
Highcharts.js3 天前
Highcharts 集成到 React 或 Vue 项目中时,如何高效地使用 TypeScript技巧?
vue.js·人工智能·react.js·typescript·前端框架·highcharts
二哈赛车手4 天前
新人笔记---hermes定时功能设计,具体讲解以及可优化点
java·人工智能·笔记·spring·ai·typescript
jktantan4 天前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
Nymph_Zhu4 天前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus