这是我参与【第五届青训营】伴学笔记创作活动的第11天。
TypeScript
JS VS TS
JS：动态类型 and 弱类型语言
TS：静态类型 and 弱类型语言
TypeScript
静态类型
- 可读性增强: 基于语法解析TSDoc，ide增强
- 可维护性增强: 在编译阶段暴露大部分错误 多人合作的大型项目中，获得更好的稳定性和开发效率
JS 的超集
- 包含于兼容所有Js特性，支持共存
- 支持渐进式引入与升级
编辑器推荐
Visual Studio Code
基本语法
基础数据类型
对象类型
函数类型
函数重载
数组类型
TypeScript补充类型
TypeScript泛型
- 泛型别名 */
- 泛型约束:限制泛型必须符合字符串 */
- 泛型参数默认类型 */
- 报错: 类型“string”的参数不能赋给类型“number”的参数 */ getRepeatArr('123');
- 通过type关键字定义了IObjArr的别名类型 */ type I0bjArr = Array<{
类型别名 & 类型断言
字符串/数字 字面量
高级类型
联合/交叉类型
- 联合类型：
IA | IB；联合类型表示一个值可以是几种类型之一 - 交叉类型：
IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。
类型保护与类型守卫
- 类型守卫: 定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域
- 实现函数reverse
- 实现函数logBook类型
- 函数接受书本类型，并logger出相关特征 function logBook(book: IBookltem){
- 联合类型 +类型保护 = 自动类型推断
高级类型
- 实现merge函数类型
- 要求sourceObj必须为targetObj的子集
- 类型实现繁琐: 若obj类型较为复杂，则声明source和target便需要大量重复2遍*容易出错: 若target增加/减少key，则需要source联动去除
- 索引类型:关键字 【keyof】，其相当于取值对象中的所有key组成的字符串字面量,如 type lKeys=keyof{a:string; b:number };
- => type IKeys = "a" | "b"
- 关键字【in】，其相当于取值 字符串字面量 中的一种可能，配合泛型p，即表示每个key
- 关键字【?】， 通过设定对象可选选项，即可自动推导出子集类型
函数返回值类型
- 实现函数delayCall的类型声吉明
- delayCall接受一个函数作为为入参,其实现延迟1s运行函数
- 其返回promise，结果为入参函数的返回结果
- 关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式//如T===判断类型?类型A:类型B
- 关键字【infer】出现在类型推荐中，表示定义类类型变量，可以用于指代类型
- 如 该场景下，将函数的返回值类型作为变量， 使用新泛型R表示，使用在类型推荐命中的结果中
工程应用
Webpack
- 配置Webpack loader相关配置
- 配置tsconfig.js文件
- 运行Webpack启动/打包
- loader处理ts文件时，会进行编译与类型检查
Node
- 安装Node与npm
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到JS文件
使用tsc编译：
