ts_数组

226 阅读2分钟

ts数组具有js数组的特点,成员数量可以无限也可以为空;

不同于js数组,ts数组成员类型可约束

定义数组

两种方式:

   // 1.
   let arr:number[] = [1,2,3]
   // 不加括号该变量类型为 number | string[]
   let stringOrNumberArr:(number|string)[] = [1,2,'3']
   // 2.
   let arr2:Array<number> = [1,2,3]
   let stringOrNumberArr2:Array<number | string> = [1,2,'3']
   

数组成员数量是动态的

可以增加/删除成员

    let arr:number[] = [1, 2, 3];
    arr[3] = 4;
    arr.length = 2;
    arr // [1, 2]

成员数量动态变化,不会开启成员的边界检查,可越界访问数组并不会报错,元组则与其相反。

    let arr:number[] = [1, 2, 3];
    let foo = arr[3]; // 正确

读取数组的成员类型

    type strArr = string[]
    type name:strArr[0] // == :string
    let students = [{name:'ws',age:23},{name:'ws',age:23,aihao:'lol'}] 
    type stuArr = typeof students
    type stu = stuArr[0]
    let ws1:stu = {name:'ws',age:23}
    let ws2:stu = {name:'ws',age:23,aihao:'lol'}

数组类型推断

如果数组变量没有宣告类型,TypeScript 就会推断数组成员的类型。

const arr = [];
arr // 推断为 any[]

arr.push(123);
arr // 推断类型为 number[]

arr.push('abc');
arr // 推断类型为 (string|number)[]

上例的arr初始值为空数组,如果初始arr初始值不为空数组终止后续推断类型

const arr = [123];
 // arr 推断为 number[]
arr.push('abc'); //报错:类型应为number[],arr初始值不为空数组则终止后续推断类型

只读数组

不能操作(增删改)数组成员的数组

定义只读数组

    // 1.readonlyArr关键字
    let readonlyArr:readonly number[] = [1]
    readonlyArr[0]
    //报错:类型“readonly number[]”中的索引签名仅允许读取
    delete readonlyArr[0]

数组是只读数组的子类

只读数组的方法\属性数组都有,数组的操作方法只读数组没有 => 数组 继承 只读数组

父子类兼容问题

    let a1:number[] = [0, 1];
    // 父兼容子 
    let a2:readonly number[] = a1; // 正确
    // 子不兼容父
    a1 = a2; // 报错
    function fn (arr:number[]) {
        console.log(arr);    
    }
    let arr5:ReadonlyArray<number> = [0]
    //fn(arr5) //类型“readonly number[]”的参数不能赋给类型“number[]”的参数。
    // 断言解决
    fn(arr5 as number[])

readonly不能与数组的泛型写法一起使用。

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

生成只读数组的类型的两个泛型

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

多维数组

// 二阶数字数组。
var multi:number[][] =[[1,2,3], [23,24,25]];