TypeScript快速入门

TypeScript快速入门

---

1、关于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版本发布

静态类型：

理解静态与动态之别，我们要从变量赋值这个操作为切入点。

静态类型语言中，变量的类型必须先声明，即在创建的那一刻就已经确定好变量的类型，而后的使用中，你只能将这一指定类型的数据赋值给变量。如果强行将其他不相干类型的数据赋值给它，就会引发错误。

在静态语言中，一旦声明一个变量是int类型，之后就只能将int类型的数据赋值给它，否则就会引发错误，而动态类型则没有这样的限制，你将什么类型的数据赋值给变量，这个变量就是什么类型。

弱类型语言：

强弱之分，体现在对类型的检查严格程度上，弱类型语言对于变量类型的检查比较宽松，容忍隐式类型转换这种事情的发生。在弱类型语言中，变量可以隐式强制转换为不相关类型，而在强类型语言中则不可以。

---

2、基本语法

基础数据类型：

对象类型：

函数类型：

函数重载：

数组类型：

补充类型：

泛型：


类型别名&类型断言：

字符串/数字 字面量：

---

3、高级类型

联合/交叉类型：

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

类型保护与类型守卫：



高级类型：



函数返回值类型：

---

4、工程应用

浏览器web

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

Node.js

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