Typescript | 青训营笔记

45 阅读1分钟

TypeScript 的发展与基本语法

为什么什么是 TypeScript

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

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

静态类型:

1、可读性增强:基于语法解析TSDoc,ide增强

2、可维护性增强:在编译阶段暴漏大部分错误

JS的超集:

1、包含于兼容所有JS特性,支持共存

2、支持渐进式引入与升级

基本语法

基础数据类型

JS

字符串:const q = 'string'

数字:const w = 1

布尔值:const e = true

null:const r = null

undefined:const t = undefined

TS

字符串:const q: string = 'string'

数字:const w: number = 1

布尔值:const e: bollean = true

null:const r: null = null

undefined:const t: undefined = undefined

对象类型

image.png

函数类型

image.png

函数重载

image.png

数组类型

image.png

Typescript补充类型

image.png

Typescript泛型

image.pngimage.pngimage.png

类型别名 & 类型断言

image.png

字符串/数字 字面量

image.png

高级类型

联合/交叉类型

image.png

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

image.png

类型保护与类型守卫

image.pngimage.png

高级类型

image.pngimage.pngimage.png

函数返回值类型

image.pngimage.png

工程应用

Typescript工程应用 - Web

webpack

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

相关loader:

  1. www.npmjs.com/package/awe…
  2. www.npmjs.com/package/bab…

Typescript工程应用 - Node

使用TSC编译

image.png

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