TypeScript入门 | 青训营笔记

魔法少女蕊蕊
56 阅读1分钟

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

1.什么是TypeScript

  • JS:动态类型，弱语言类型
  • TS：静态类型，弱语言类型

静态类型

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

JS的超集

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

基本语法

基础数据类型

image.png

对象类型

image.png

函数类型

image.png

函数重载

image.png

数组类型

image.png

Typescript补充类型

image.png

Typescript泛型

image.png

image.png

类型别名&类型断言

image.png

字符串/数字 字面量

image.png

3.高级类型

联合/交叉类型

image.png

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

image.png

类型保护与类型守卫

image.png

image.png

image.png

高级类型

image.png

image.png

image.png

实现返回值类型

image.png

image.png

4.工程应用

web

webpack

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

相关loader

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

Node

使用TSC编译

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