TypeScript入门 | 青训营笔记

this_is_Domi
42 阅读2分钟

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

一、TypeScript 的发展与基本语法

1. 为什么什么是TypeScript

为什么是TypeScript

  • JS是动态类型的弱类型语言
  • TS是静态类型的弱类型语言
弱类型语言，在进行不同类型数据运算时，会自动转换类型进行运算

image-20230119171010380.png

什么是TypeScript

  • 静态类型

    • 可读性增强：基于语法解析TSDoc，ide增强

    • 可维护性增强：在编译暴露大部分错误 ===>

      • 多人合作的大型项目中，获得更好的稳定性和开发效率

  • JS的超集

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

image-20230119171154198.png

2. 基本语法

基础数据类型

image-20230119171513584.png

  • 对象类型

image-20230119171615804.png

  • 函数类型

image-20230119172015421.png

  • 函数重载

image-20230119172148000.png

  • 数组类型

image-20230119172317938.png

  • TypeScript补充类型

image-20230119172525608.png

  • TypeScript泛型

image-20230119172611148.png

image-20230119172817656.png

  • 类型别名&类型断言

image-20230119172923964.png

  • 字符串/数字 字面量

image-20230119173051457.png

二、TypeScript 高级数据类型

1. 高级类型

联合/交叉类型

  • 联合类型:IA │IB;联合类型表示一个值可以是几种类型之一
  • 交叉类型: IA & IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

image-20230119173322426.png

image-20230119173502594.png

类型保护与类型守卫

  • 类型保护：访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分
  • 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

image-20230119173706874.png

image-20230119173845429.png

image-20230119174024933.png

image-20230119174233814.png

image-20230119174311253.png

image-20230119174502351.png

索引类型:关键字【keyof】,其相当于取值对象中的所有key组成的字符串字面量
​
关键字【in】,其相当于取值字符串字面量中的一种可能，配合泛型P,即表示每个key
​
关键字【?】,通过设定对象可选选项，即可自动推导出子集类型

函数返回值类型

  • 关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式
  • 如 T===判断类型?类型A:类型B
  • 关键字【infer】出现在类型推荐中，表示定义类型变量，可以用于指代类型
  • 如该场景下，将函数的返回值类型作为变量，使用新泛型R表示，使用在类型推荐命中的结果中

image-20230119181516253.png

image-20230119181703539.png

2. 工程应用

Webpack

  • 配置webapack loader相关配置
  • 运行webpack启动/打包
  • 配置tsconfg.js文件
  • loader处理ts文件时，会进行编译与类型检查

image-20230119183108720.png

使用TSC编译

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

image-20230119183209471.png

avatar
文章
阅读
粉丝