TypeScript中的数组类型

数组类型

目录

自动推断

不定义类型,推断为never

let array = [];  //never

推断为字符串数组

const akun = ['akun.com', 'akun001'] //const akun : string[]
hd.push(100) //因为类型不允许,所以报错

推断为数组允许的值为字符串或数值

const akun = ['akun.com', 'akun001',100] //const akun :(string|number)[]
akun .push(100,'kunkun') //数组允许数值、字符串类型,所以编译通过

📌如果一开始是any类型,那么你后续往里推什么,就是什么类型但是,类型推断的自动更新只发生初始值为空数组的情况。如果初始值不是空数组,类型推断就不会更新。(测试已经不成立了)

const arr = [];
arr // 以前会推断为 any[] 现在是never类型  

arr.push(123);
arr // error

arr.push('abc');
arr // error

类型配置

字符串数组

// 字符串类型数组
let array02: string[] = [];
array02.push("hello");

数值型数组

let array03: number[] = [];
array03.push(123);

当然,你也可以主动定义联合类型的数组

const akun :(string |number)[] = ['akun.com', 'akun001',100] 
//const akun :(string|number)[]
akun .push(100,'kunkun') //数组允许数值、字符串类型,所以编译通过

也可以使用泛型来声明数组

let akun:Array<string> =[]
akun.push('akun002','akun001')

创建值类型字符串的数组,并填充内容为akun001。在 TypeScript 中,如果您使用了类型注解 Array<string>(3) 来声明数组,并使用 fill() 方法填充数组,可能会导致类型错误。

📌Array<string>(3) 表示一个长度为 3 的字符串数组类型的声明。但是 fill() 方法填充的是值而不是类型。因此,fill("akun001") 将字符串 "akun001" 填充到数组的每个位置,并不会改变数组的类型。

解决这个问题的方法是在声明数组时不使用类型注解,而是使用类型断言 as

let akun = new Array(3).fill("akun001") as string[];
console.log(akun); // ["akun001", "akun001", "akun001"]

只读数组

JavaScript 规定,const命令声明的数组变量是可以改变成员的。

const array06 = [0, 1];
array06[0] = 2;
console.log(array06); //[2,1]

上面示例中,修改const命令声明的数组的成员是允许的。但是,很多时候确实有声明为只读数组的需求,即不允许变动数组成员。

TypeScript 允许声明只读数组,方法是在数组类型前面加上readonly关键字。

const array07: readonly number[] = [0, 1];
// array07[1] = 2; // 报错
// array07.push(3); // 报错
// delete array07[0]; // 报错

上面示例中,arr是一个只读数组,删除、修改、新增数组成员都会报错。TypeScript 将readonly number[]number[]视为两种不一样的类型,后者是前者的子类型。

这是因为只读数组没有pop()push()之类会改变原数组的方法,所以number[]的方法数量要多于readonly number[],这意味着number[]其实是readonly number[]的子类型。

我们知道,子类型继承了父类型的所有特征,并加上了自己的特征,所以子类型number[]可以用于所有使用父类型的场合,反过来就不行。

let array08: number[] = [0, 1];
let array09: readonly number[] = array08; // 正确

array08 = array09; // 报错
array09 = array08; //正确

上面示例中,子类型number[]可以赋值给父类型readonly number[],但是反过来就会报错。

由于只读数组是数组的父类型,所以它不能代替数组。这一点很容易产生令人困惑的报错。

function getSum(s:number[]) {
  // ...
}

const arr:readonly number[] = [1, 2, 3];

getSum(arr) // 报错

上面示例中,函数getSum()的参数s是一个数组,传入只读数组就会报错。原因就是只读数组是数组的父类型,父类型不能替代子类型。这个问题的解决方法是使用类型断言getSum(arr as number[])

📌注意,readonly关键字不能与数组的泛型写法一起使用。

// 报错
const arr:readonly Array<number> = [0, 1];

上面示例中,readonly与数组的泛型写法一起使用,就会报错。实际上,TypeScript 提供了两个专门的泛型,用来生成只读数组的类型。

const a1:ReadonlyArray<number> = [0, 1];

const a2:Readonly<number[]> = [0, 1];

上面示例中,泛型ReadonlyArray<T>Readonly<T[]>都可以用来生成只读数组类型。两者尖括号里面的写法不一样,Readonly<T[]>的尖括号里面是整个数组(number[]),而ReadonlyArray<T>的尖括号里面是数组成员(number)。

只读数组还有一种声明方法,就是使用“const 断言”。

const arr = [0, 1] as const;

arr[0] = [2]; // 报错 

上面示例中,as const告诉 TypeScript,推断类型时要把变量arr推断为只读数组,从而使得数组成员无法改变。

多维数组

TypeScript 使用T[][]的形式,表示二维数组,T是最底层数组成员的类型。

var multi: number[][] = [
  [1, 2, 3],
  [23, 24, 25],
];
console.log(multi);

上面示例中,变量multi的类型是number[][],表示它是一个二维数组,最底层的数组成员类型是number

相关推荐

  1. TypeScript数组类型

    2024-06-15 13:46:03       31 阅读
  2. TypeScript交叉类型

    2024-06-15 13:46:03       36 阅读
  3. typeScript3(数组类型

    2024-06-15 13:46:03       39 阅读
  4. TypeScript-数组、函数类型

    2024-06-15 13:46:03       33 阅读
  5. TypeScript 数据类型

    2024-06-15 13:46:03       40 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-15 13:46:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-15 13:46:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-15 13:46:03       87 阅读
  4. Python语言-面向对象

    2024-06-15 13:46:03       96 阅读

热门阅读

  1. 2024年计算机相关专业是否适合选择

    2024-06-15 13:46:03       34 阅读
  2. RedHat 9.3 一键安装 Oracle 11GR2 单机

    2024-06-15 13:46:03       31 阅读
  3. 孤立森林【python,机器学习,算法】

    2024-06-15 13:46:03       30 阅读
  4. PHP超级全局变量:功能、应用及最佳实践

    2024-06-15 13:46:03       33 阅读
  5. 适配器模式(设计模式)

    2024-06-15 13:46:03       26 阅读
  6. PostgreSQL基础知识

    2024-06-15 13:46:03       23 阅读
  7. Linux中的EINTR和EAGAIN错误码

    2024-06-15 13:46:03       29 阅读