【九月打卡】第49天 TypeScript(5)

数组类型

字面量表示和泛型表示

• 字面量

const arr: string[] = ['a', 'b']
const arr: (string | number)[] = [1, 2, 'a']

// 或者使用type
type List = (string | number)[];
const arr: List  = [1, 2, 'a']

• 泛型

const arr: Array<string> = ['a', 'b'];
const arr: Array<string | number> = ['a', 'b', 1];

// 或者使用type
type List = Array<string | number>;
const arr2: List = ['a', 'b', 1];

readonly 只读修饰符

• readonly将使得数组不可以修改

function fn1(arr: readonly string[]) {
  arr.concat()
  arr.push()  // 错误提示：不可以修改原数组
}

• readonly只能和字面量使用，不能和泛型一起使用

function fn1(arr: readonly Array<string>) {
  arr.concat();
}
// 错误提示：'readonly' type modifier is only permitted on array and tuple literal types

Array泛型的底层原理的简单实现

interface selfArray<T> {
  [key: number]: T;
  length: number;
  pop: () => T | undefined
  push: (...items: T[]) => number
}

const arr: selfArray<string> = ['a', 'b', 'c']

元组类型

什么是元组
元组是指长度确定，每项类型确定的特殊的数组。

表示方法如下：

// right
const tuple: [string, number] = ['a', 1]

// wrong: 元组每项的类型都是确定好的
const tuple: [string, number] = [1, 'a']

readonly 只读修饰符

// wrong: readonly使得元组不可以修改
function fn1(arr: readonly [string, string]): string {
  arr[0] = 'c'; // 报错
  return arr[0];
}
fn1(['a', 'b'])

// right: 元组解构的变量跟元组无关，可以修改
function fn2([x, y]: readonly [string, string]): string {
  x = 'c';   // 通过
  return x + y;
}
fn2(['a', 'b'])

元组传参方式不同导致的问题

type Point = [number, number];
function getPoint([x, y]: Point): number {
  return x + y
}

// right
getPoint([1, 2])

// wrong: point通过类型推断是number[]，和元组类型不匹配
const point = [1, 2]
getPoint(point);

// 解决方法：给point加上元组类型
const point: Point = [1, 2]
getPoint(point);

小结

• 数组的类型表示（字面量和泛型）
• 数组的泛型底层简单实现
• 元组的类型表示（字面量）
• 数组和元组的readonly 只读修饰符