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

什么是TypeScript？

TS是属于JavaScript的超集，可以编译成纯JavaScript，TS新增了许多特性，例如数据类型、类、继承以及接口等。

静态类型

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

JS的超集

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

基本类型

• 类型声明
  • 类型声明是TS非常重要的一个特点
  • 通过类型声明可以指定TS中变量（参数、形参）的类型
  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
  • TS语法:

let 变量 : 类型 ;

let 变量 : 类型 = 值 ;

function fn (参数 :类型; 参数 : 类型) : 类型 {
       ...
}

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行时，可以省略掉类型声明

• 类型:

类型	例子	描述
number	1,-33,2.5	任意数字
string	'hello','he'	任意字符串
boolean	true,false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值(undefined)	没有值(或undefined)
never	没有值	不能是任何值
object	{name:'你好}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum(A,B)	枚举，TS中新增类型

boolean类型

let flag:boolean = [false] [true]

数字类型

let num:number = 12;
let float:number = 12.12;

字符串类型

let str:string = 'hello world'

数组类型

let array:number[] = [1,2]
let str:string[] = ['1','2']

• 泛型方式

let arr:Array<string> = ['we','WBG']

元组类型

let tup:[string,number,boolean] = ['WBG',21,false]

枚举类型

enum 枚举变量名 {
    枚举类名 = 枚举值,
    枚举类名1 = 枚举值1,
    .....
}

• 使用

enum flag{
    success = 1,
    error = 1
}
var F:flag = flag.success
console.log(F)

任意类型

let dom:any = document.getElementById('app')

null和undefined

let num:number|undefined|null

TypeScript的高级数据结构

• 联合/交叉类型：
  • Ta|Tb表示可以是这两种类型中的任意一种
  • Ta&Tb多种类型叠加到一起成为一种类型，包含了两种类型的所有特性。
• 类型保护与守卫
  • 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域 -`联合类型＋类型保护=自动类型推断

本课小结

通过本节课的学习，我了解了什么是TypeScript，知道了TypeScript的基本语法，还需要多加练习。