TypeScript基础笔记(持续更新)

一、TypeScript介绍

1、概念

TypeScript是JS的超集(JS有的TS都有)

TypeScript = Type + Script(在JS基础之上，为JS添加了类型支持)

TS是微软开发的开源编程语言，可以在任何运行JS的地方运行

2、TS为什么要为JS添加类型支持

背景：JS类型系统存在“先天缺陷”，JS代码中绝大部分错误都是类型错误

问题：增加了找Bug、改Bug的事件

从编程语言的动静来区分，TS属于静态类型的编程语言，JS属于动态类型的编程语言。

静态类型：编译期间做类型检查。   动态类型：执行期间做类型检查。

对于JS来说：需要等到代码真正去执行的时候才能发现错误(晚)

对于TS来说：在代码编译的时候(执行前)就可以发现错误(早)

3、TS相比于JS的优势

①更早发现错误，减少找Bug、改Bug时间，提升开发效率

②程序中任何地方的代码都有代码提示，增强开发体验

③强大的类型系统提升了代码的可维护性，使得重构代码更加容易

④支持最新的ECMAScript语法，优先体验最新语法

⑤TS类型推断机制，不需要在代码中的每个地方都显示标注类型，在享受优势的同时降低了成本

4、安装编译TS的工具包

因为Node.js/浏览器，不认识TS，需要将TS先转换为JS才能运行

安装命令：npm i -g typescript

验证是否安装成功：tsc -v(查看TS版本)

5、编译并运行TS代码

①创建hello.ts(注意TS文件后缀名为.ts)

②将TS编译为JS tsc hello.ts

③执行JS代码，node hello.js

说明：所有合法的JS代码都是TS代码，有JS基础只需要学习TS的类型即可

注意：由TS编译生成的JS文件，代码中就没有类型信息了

6、简化运行TS的步骤

问题：每次修改代码都要重复执行两个命令才能运行ts代码，太麻烦

简化方式：使用ts-node包，直接在node.js中执行TS代码

安装命令：npm i -g ts-node (ts-node包提供了ts-node命令)

使用方式：ts-node hello.ts

---

二、TS常用类型

1、类型注解

说明：代码中的:number就是类型注解

作用：为变量添加类型约束。

解释：约定了什么类型，就只能给该类型赋该类型的值，否则就会报错

---

2、常用类型概述

可将TS常用基础类型细分为两类

(1)JS已有类型

原始类型：number/string/boolean/null/undefined/symbol

对象类型：object

(2)TS新增类型

联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any等

---

3、原始类型

number/string/boolean/null/undefined/symbol

特点：简单，这些类型完全按照JS中类型名称来书写

---

4、数组类型

对象类型：Object(包括数组、对象、函数等对象)

特点：对象类型，在TS中更加细化，每个具体的对象都有自己的类型语法

两种方式

需求：数组中既有number类型，又有string类型，这个数组的类型应该如何写：

解释：|(竖线)在TS中叫做联合类型(由多个类型组成的类型，表示可以是其中的任意一种)

注意：只有一根线，并且注意这个括号相当于分配律，和number|string[]含义不同

---

5、类型别名

类型别名(自定义类型)：为任意类型起别名

使用场景：当同一类型(复杂)被多次使用时，可以通过类型别名，简化该类型的使用

解释：①使用type关键字来创建类型别名

       ②类型别名可以是任意合法的变量名称

       ③创建类型别名后，直接使用该类型别名作为变量的类型注解即可

---

6、函数类型

函数的类型实际上指的是：函数参数和返回值的类型

为函数指定类型的两种方式：①单独指定参数、返回值的类型 ②同时指定参数、返回值的类型

(1)单独指定参数、返回值的类型

(2)同时指定参数、返回值的类型

注意：这种形式只适用于函数表达式

(3)void

(4)可选参数

在可传可不传的参数名称后面添加?(问号)

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

---

7、对象类型

JS中的对象是由属性和方法组成的，而TS中的对象就是在描述对象的结构(有什么类型的属性和方法)。

(1)对象类型的写法：

解释：

①直接使用{}来描述对象结构。属性采用属性名:类型的方式；比如采用方法名():返回值类型的形式

②如果方法有参数，就在方法名后面的小括号中指定参数类型

③在一行代码中指定对象的多个属性类型时，使用；(分号)来分隔

如果一行代码只指定一个属性类型(通过换行来分隔多个属性类型)，可以去掉；(分号)

方法的类型也可以使用箭头函数形式

1. 如果一行代码只指定一个属性类型(通过换行来分隔多个属性类型)，可以去掉;(分号)
2. 方法的类型也可以使用箭头函数形式

(2)可选属性

例如使用axios时，如果发GET请求，method属性可以省略

---

8、接口

(1)基本使用

当一个对象类型被多次使用时，一般会使用接口来描述对象的类型，达到复用的目的

解释：①使用interface关键字来声明接口

       ②接口名称可以是任意合法的变量名称

       ③声明接口后，直接使用接口名称作为变量的类型

       ④因为每一行只有一个属性类型，因此，属性类型后没有；(分号)

(2)interface和type的对比：

1. 相同点：都可以给对象指定类型
2. 不同点：

                ①接口，只能为对象指定类型

                ②类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

(3)接口继承

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

更好的方式：

---

9、元组

场景：在地图中，使用经纬度坐标来标记位置信息

可以使用数组来记录坐标，那么该数组只有两个元素，并且这两个元素都是数值类型的

使用number[]的缺点：不严谨，因为该类型的数组中可以出现任意多个数字

更好的方式：元组(Tuple)

元组类型是另一种类型的数组，它确切的知道包含多少个元素，以及特定索引对应的类型

解释：

①元组类型可以确切地标记出有多少个元素，以及每个元素的类型

②该实例中，元素有两个元素，每个元素都是number

10、类型推论

在TS中，某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型

换句话说，由于类型推论的存在，有些地方类型注解可以省略不写

发生类型推论的两种常见场景：

(1)声明变量并初始化时

(2)决定函数返回值时

推荐：能省略的地方就省略

技巧：如果不知道类型就把鼠标悬停在变量上