TypeScript入门 | 青训营笔记

凉子木
81 阅读1分钟

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

01.什么是TypeScript

TypeScript发展历史

image.png

什么是TypeScript及其特点

  • JS是动态类型、弱类型语言。
  • TS是静态类型、弱类型语言。 弱类型语言：
  • 变量可以根据环境变化自动进行转换

静态类型：编译期做类型检查

  • 可读性增强：基于语法解析TSDoc，ide增强
  • 可维护性增强：在编译阶段暴露出大部分错误
  • 多人合作的大型项目中，获得更好的稳定性和开发效率 JS的超集：
  • 包含于兼容所有JS特性，支持共存；
  • 支持渐进式引入与升级。

编译器推荐

  • VS code
  • TypeScript官网在线编译器

02.基本语法

基础数据类型

image.png

对象类型

image.png

函数类型

image.png

函数重载

image.png

image.png

数组类型

image.png

TypeScript补充类

image.png

TypeScript泛型

image.png

image.png

类型别名&类型断言

image.png

字符串/数字 字面量

image.png

03.高级类型

联合/交叉类型

image.png

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

类型保护与类型守卫

image.png

image.png

image.png

高级类型

image.png

image.png

image.png

函数返回值类型

image.png

image.png

04.工程应用

web

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

Node

使用TSC编译： image.png

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