TypeScript 入门 | 青训营笔记

80 阅读1分钟

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

重点

  • TS发展历史
  • TS优点
  • TS基本语法
  • TS高级类型:联合交叉 类型保护守卫 merge

TypeScript

发展历史

image.png

为什么使用TypeScript

  • 动态类型:编译在执行时
  • 静态类型:编译在执行之前
  • 弱语言类型:类型转换,数字可以和字符串相加,然而强语言不行
  • JS:动态类型,弱类型语言
  • TS:静态类型,弱类型语言

image.png

基本语法

基础数据类型

JS vs TS

image.png

对象类型

image.png

  • interface来定义类型,类型名用I开头
  • readonly 只读属性
  • ?:可选属性 属性可以不存在
  • [key:string]:any 任意属性

函数类型

image.png

image.png

函数重载

image.png image.png 注意报错

数组类型

image.png 表示方法

  • 类型+方括号
  • 泛型
  • 元组
  • 接口

补充类型

image.png 以下为TS对JS的补充

  • 空类型
  • 任意类型
  • 枚举类型

泛型

image.png

image.png

image.png

类型别名 断言

image.png

字符串 数字 字面量

image.png

高级类型

联合 交叉类型

image.png 问题:繁琐 较多重复

联合类型IA|IB 表示一个值可以是几种类型之一

交叉类型 IA & IB 多种类型叠加到一起成为一种类型 包含了所需的所有类型的特性 image.png

类型保护和类型守卫

image.png 访问联合类型 仅能访问交集部分 image.png

image.png

image.png

merge

image.png

image.png

image.png

函数返回值类型

image.png

image.png

工程应用

image.png image.png

总结

详细介绍了TS的基础用法和高级类型