为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第49天 TypeScript(5)

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

2022.09.23 00:11 59浏览

数组类型

字面量表示和泛型表示

  • 字面量
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 只读修饰符
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
2
获赞与收藏
6

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消