TypeScript入门 | 青训营笔记

王水
63 阅读1分钟

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

4. TypeScript入门

4.1 为什么是TypeScript?

4.1.1 TypeScript发展历史

image.png

4.2.2 什么是TypeScript？

JSTS
动态类型静态类型
弱类型语言弱类型语言

静态类型

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

JS的超集

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

编辑器推荐：Visual Studio Code

4.2 基本语法

基础数据类型

image.png

对象类型

image.png

函数类型

image.png

函数重载

image.png

数组类型

image.png

TypeScript补充类型

image.png

TypeScript泛型

image.png

image.png

image.png

类型别名 & 类型断言

image.png

字符串/字符 字面量

image.png

4.3 高级类型

4.3.1 联合/交叉类型

image.png

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

image.png

4.3.2 类型保护与类型守卫

image.png

image.png

4.3.3 高级类型

image.png

image.png

image.png

4.3.4 函数返回值类型

image.png

image.png

4.4 工程应用

TypeScript工程应用-Web

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

相关loader：

  1. awesome-typescript-loader
  2. babel-loader

TypeScript工程应用-Node

image.png

  1. 安装Node与npm
  2. 配置tsconfig.js文件
  3. 使用npm安装tsc
  4. 使用tsc运行编译得到js文件
avatar
文章
阅读
粉丝