这是我参与「第四届青训营」笔记创作活动的第6天

什么是TypeScript

发展历史

2012-10：微软发布了TypeScript第一个版本(0.8)
2014-10：Angular 发布了基于TypeScript的2.0版本
2015-04：微软发布了Visual Studio Code
2016-05：@ ty pes/react发布，TypeScript 可开发React
2020-09：Vue 发布了3.0 版本，官方支持TypeScript
2021-11：v4.5版本发布

为什么是TypeScript

动态类型在执行过程中进行类型的匹配，js的弱类型会在执行时进行隐式类型转换，而在静态类型中则不然

TypeScript则为静态类型：java、c/c++等

可读性增强：基于语法解析TSDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误
多人合作的大型项目中，可以获得更好的稳定性和开发效率

TypeScript是JS的超集

包含于兼容所有Js特性，支持共存
支持渐进式引入与升级

基本语法

基本数据类型

js ==> ts

可以看到，ts的类型定义方式：let 变量名: 类型 = 值;

TypeScript基础类型

对象类型

函数类型

可以看到，格式为function 函数名（参数:类型...）:返回值类型

函数重载

数组类型

type作用就是给类型起一个新名字，相当于c++中的typedef

TypeScript补充类型

空类型：表示无赋值
任意类型：是所有类型的子类型
枚举类型：支持枚举值到枚举名的正、反向映射

Typescript泛型

泛型，之前学过c++的话dddd，跟c++中的差不多：不预先指定具体的类型，而在使用的时候再指定类型的一种特性

类型别名 & 类型断言

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

字符串/数字字面量

高级类型

联合/交叉类型

为书籍列表编写类型 -> ts类型声明繁琐存在较多重复。高级类型

联合类型: IA | IB; 联合类型表示一个值可以是几种类型之一
交叉类型: IA & IB; 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性上述代码可以通过ts简化为：

类型保护与类型守卫

访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分

函数返回值类型

函数返回值类型在定义时候是不明确的，也应该通过泛型进行表达

下文代码delayCall接受一个函数作为入参，其实现延迟1s运行函数func，其返回promise，结果为入参函数的返回结果

关键字 extends 跟随泛型出现时，表示类型推断，其表达可类比三元表达式
- 如T === 判断类型?类型A:类型B -> T extends 判断类型?类型A:类型B
关键字 infer 出现在类型推荐中，表示定义类型变量，可以用于指代类型

infer 简单示例如下：

type ParamType = T extends (...args: infer P) => any ? P : T;

在这个条件语句 T extends (...args: infer P) => any ? P : T 中，infer P 表示待推断的函数参数。

整句表示为：如果 T 能赋值给 (...args: infer P) => any，则结果是 (...args: infer P) => any 类型中的参数 P，否则返回为 T。

工程应用

TypeScript工程应用——Web

配置webapack loader相关配置
配置tsconfig.js文件（宽松——严格，都可以定义）
运行webpack启动/ 打包
loader处理ts文件时，会进行编译与类型检查

相关loader：

awesome-typescript-loader
or babel-loader

TypeScript工程应用——Node

使用TSC编译

安装Node与npm
配置tsconfig.js文件
使用npm安装tsc
使用tsc运行编译得到js文件

TypeScript 入门 | 青训营笔记