前端与 HTML | 青训营笔记——第四课

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

一、为什么什么是TypeScript？

对比

JS：动态类型、弱类型语言

TS：静态类型、弱类型语言

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

• 可读性增强：基于语法解析TSDoc，ide增强
• 可维护性增强：在编译阶段暴露大部分错误

JS的超集：

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

二、基本语法

• 对象类型

• 函数类型

• 数组类型

• TypeScript泛型

  类型别名&类型断言

  字符串/数字 字面量

三、高级类型

• 联合/交叉类型：为书籍列表编写类型——类型声明繁琐，存在较多重复

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

  交叉类型：IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

• 类型保护与类型守卫

  类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

  联合类型+类型保护=自动类型判断

• 高级类型

  1、类型实现繁琐：若obj类型较为复杂，则声明source和target便需要大量重复2遍

  容易出错：若target增加/减少key，则需要source联动去除

  2、索引类型：关键字【keyof】，其相当于取值对象中的所有key组成的字符串字面量

• 函数返回值类型

  //实现函数delayCall的类型声明

  //delayCall接受一个函数作为入参，其实现延迟1s运行函数

  //其返回promise，结果为入参函数的返回结果

  关键词【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式

  关键词【infer】出现在类型推荐中，表示定义类型变量，可以用于指代类型

四、工程应用

• Web

  1、配置webapack loader相关配置

  2、配置同时从fig.js文件

  3、运行webpack启动/打包

  4、loader处理ts文件时，会进行编译与类型检查

• Node

  1、安装Node与npm

  2、配置tsconfig.js文件

  3、使用npm安装tsc

  4、使用tsc运行编译得到js文件