【TypeScript笔记】02 - TS高级类型

文章目录

导读

入门级TypeScript,《
黑马程序员前端TypeScript教程,TypeScript零基础入门到实战全套教程》https://www.bilibili.com/video/BV14Z4y1u7pi

开发环境

版本号描述
node -vv14.18.3
npm -v6.14.6
tsc -v4.7.4
ts-node -v10.9.1

class 类

class 基本用法

在这里插入图片描述

class 实例属性初始化

在这里插入图片描述

构造函数

在这里插入图片描述

类构造函数的原理

我们通过tsc将ts转换为js后对比结果如下:
在这里插入图片描述
运行结果如下:

khzdeMacBook-Pro:foo_ts khz$ ts-node class.ts
Person { name: 'lili', age: 18 }

我们可以看出,类的实现其实就是将class转换为一个函数;ts中类的构造函数,就是在函数中执行构造函数中的语句。

从运行结果中我们可以看出,类其实就是名为Person的对象。

类继承 - extends

在这里插入图片描述

类继承 - implements

在这里插入图片描述

类成员的可见性

  • public:公开的(默认可见性)
  • protected:受保护的,仅对其声明所在类及其子类中可见。(实例对象不可见)
  • private:私有的,只在当前类中可见

只读修饰符 readonly

在这里插入图片描述

类型兼容性

class 兼容

TS是Structural Type System(结构化类型系统),类型检测关注的是类的形状。
在这里插入图片描述
相对的,C#、Java等都是Nominal Type System(标明类型系统)const p: Point = new Point2D()这样的语句在C#中是会报错的。

成员多的可以赋值给成员少的:
在这里插入图片描述

接口 兼容

在这里插入图片描述

class和interface之间也是可以兼容的
在这里插入图片描述

函数兼容

·函数兼容性比较复杂,需要考虑:

  • 参数个数
  • 参数类型
  • 返回值类型

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

交叉类型

在这里插入图片描述

在这里插入图片描述

泛型 和 keyof

在这里插入图片描述

泛型函数:创建、调用

在这里插入图片描述
在这里插入图片描述

简化泛型函数

在这里插入图片描述
在这里插入图片描述

泛型约束

在这里插入图片描述
在这里插入图片描述

多个泛型类型变量 和 keyof

在这里插入图片描述
在这里插入图片描述

泛型接口

在这里插入图片描述
在这里插入图片描述

泛型类

在这里插入图片描述

泛型工具类型 - Partial

泛型工具类型 - Readonly

在这里插入图片描述

泛型工具类型 - Pick

在这里插入图片描述

泛型工具类型 - Record

在这里插入图片描述

索引签名类型

在这里插入图片描述
除此之外,上面的例子还包含了下面的约定:

  • 对象obj的值不能是非number类型的。

在这里插入图片描述

映射类型

语法

  • 基于联合类型in在这里插入图片描述
  • 基于对象类型in keyof在这里插入图片描述

实战-Partial<Type>

在这里插入图片描述

索引查询(访问)类型

在这里插入图片描述

同时查询多个索引的类型|keyof
在这里插入图片描述

参考资料

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜猫逐梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值