TypeScript入门

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

TypeScript发展史

• 2012-10：微软发布了TypeScript第一个版本(0.8)

• 2014-10：Angular 发布了基于TypeScript的2.0版本

• 2015-04：微软发布了Visual Studio Code

• 2016-05：@types/react发布，TypeScript 可开发React

• 2020-09：Vue 发布了3.0 版本，官方支持TypeScript

• 2021-11：v4.5版本发布

什么是TypeScript

TypeScript静态类型的语言

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

TypeScript是JavaScript的超集，静态类型和面向对象编程

TypeScript适合大型应用或者多人协作

TypeScript vs JavaScript

• TypeScript强类型限制,JavaScript是弱类型
• TypeScript更适合编写应用程序
• TypeScript跨平台、开源
• 重用JS，直接引入JS流行的库
• 在Vue、Node、React中都可以使用TypeScript

编辑器

• vsCode

TypeScript基本语法

(JavaScript VS TypeScript)

基础数据类型

对象类型

函数类型

函数重载

数组类型

TypeScript补充类型

• 空类型：表示无赋值
• 任意类型：是所有类型的子类型
• 枚举类型：支持枚举值到枚举名的正、反向映射

Typescript泛型

• 不预先指定具体的类型，而在使用的时候再指定类型,是一种抽象的类型
• 不能直接定义一个变量类型为泛型

TypeScript高级类型

联合/交叉类型

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

类型保护与类型守卫

• 类型保护可以保证一个字符串是一个字符串

函数返回值类型

• 函数返回值类型在定义时候是不明确的，也应该通过泛型进行表达

TypeScript工程应用

Web

• 配置webapack loader相关配置
• 配置tsconfig.js文件（宽松——严格，都可以定义）
• 运行webpack启动/ 打包
• loader处理ts文件时， 会进行编译与类型检查

Node

• 使用TSC编译

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