TS ｜ 青训营笔记

彼岸an
99 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

01 TS发展历史

JS和TS

  • 动态类型：执行过程中才能确定一个类型的匹配。
  • 静态类型：会提前检验-类似python、java先走一遍编译过程才执行。
  • 弱类型：类型转换，隐性类型转换

image.png

image.png

TS：可读性。ide：一段时间以后再看代码可以大概看明白作用。写代码相当写文档。

  • 编译器推荐-vscode、在线编译器

02 基础语法

image.png

image.png

  • 对象大部分自定义：一般开头大写I，用于与对象、类区分
  • interface：只读关键字readonly不可在对象初始化外赋值。-关键字 除了可选属性可缺省，必有属性必须存在。

函数类型

image.png

函数重载-与函数定义不同

  • 函数定义只有定义操作
  • 相当于赋值，错误一中，修改：将IGetDate的返回类型范围扩大。
  • any-任意类型关键字

数组类型

image.png Record-对象类型简写 一般用第一二种 第四种：函数、对象、void等

补充类型

image.png

  • type:  用来描述对象或函数的类型，其作用就是给类型起一个新名字，可以作用于原始值（基本类型），联合类型，元组以及其它任何你需要手写的类型，在ts编译成js后，所有的接口和type 都会被擦除掉。
  • 与interface相似但有区别

Ts: type关键字_回村中年的博客-CSDN博客_ts type关键字

TS泛型

  • 不确定类型

image.png

image.png

  • 类、泛型接口、泛型别名尖括号在后面
  • 函数定义尖括号是在前面

泛型约束//有限定

extends-限制string；函数泛型，注意尖括号位置

image.png

  • =默认类型-类型别名

类型别名、类型断言

image.png

  • 类型断言-array转换为object？
  • as断言 很明确类型

字符串/数字 字面量类型

image.png

  • 或的关系。

03 高级类型

通过各种基础数据类型做高级类型定义

  • case一

联合/交叉类型

image.png

具有重复声明、且类型只有history和story

  • 改进：

image.png

类型保护与类型守卫

js上可以、ts不可以，ts只可以使用公共部分

image.png

修改：

image.png

  • 类型谓词is
  • 当返回值为true时候，输入时候一定是IA类型。geiIsIA返回值是个布尔值
  • Q：不太理解return !!(arg as...

image.png

只有两种类型完全没有任何相同点时候使用 类型守卫。

case 二

安全实现-子集不污染合并、参数入参必须正确

image.png

image.png

  • 判断子集：可能存在，可能不存在

1、通过泛型方式实现

image.png

高级类型：基础类型通过语法表达

  • IPartial：T是IPartial的子集

函数返回类型

image.png

输入泛型、输出泛型函数

image.png

作用：用来取函数类型！取到子类型的判定类型

泛型推断

  • extends出现在定义时候是表达类型推断，和三等号等价
  • infer：类型指代，'infer R'是整体

04 工程应用

  • 1.web-webpack应用

image.png

处理js文件，将ts文件转换为js文件让webpack处理

  • 2.node.js应用

image.png

avatar
文章
阅读
粉丝