后端小白的TypeScript入门学习笔记

写在前面

本博文仅作为个人学习过程的记录，可能存在诸多错误，希望各位看官不吝赐教，支持错误所在，帮助小白成长！

一、TypeScript入门了解

1.1、什么是TypeScript

学习TypeScript前，我听过的关于它最多的一句话就是：TypeScript是JavaScript的超集！

TypeScript在JavaScript的基础与ES标准之上，加上了接口、类型限定、泛型等功能，强化了代码静态检查。更易于我们编写代码，但是TypeScript语法的代码目前无法直接运行在浏览器上，需要将TypeScript代码通过编译器（tsc）转化为JavaScript代码然后再进行使用！（TypeScript中可以使用所有JavaScript语法）

TypeScript由微软开发并开源，在2012.10发布了TypeScript第一个公开版本，正式版于2013.6.19发行！TypeScript的作者是***安德斯·海尔斯伯格***，C#的首席架构师。

1.2、快速上手

安装TypeScript

安装TypeScript:

npm install -g typescript

验证安装：(当前笔记使用版本为4.3.2)

tsc -V

代码文件编写

创建一个文件夹作为代码目录：

• 创建index.ts文件
• 创建index.html文件

index.ts

function sayHi(speaker: string) {
   
  console.log(`${
     speaker}: Hello TypeScript!`)
}

sayHi('sakura');

这里我们使用了一个ts的语法：speaker: string，对函数参数类型做了限定！此时如果你在调用sayHi函数时，不指定参数或者参数类型不是string时，就会报错！（但是编译依然会通过！）

如果此时我们直接在html中引入ts代码文件，并在浏览器中运行，浏览器是会报错的！因为含有ts语法代码是无法直接在浏览器中运行的！（如果没有使用ts语法，只是基础的js代码，依然可以使用）此时需要对ts代码进行编译！

编译（ts -> js）

我们安装TypeScript时，同时为我们安装了TypeScript代码的编译器tsc，使之转化为JavaScript代码。

执行以下命令，将ts代码编译成js代码

tsc ./index.ts

然后命令执行所在目录就会生成编译后的js代码，然后我们在Html文件中进行引入即可！

1.3、TypeScript自动编译（vscode）

首先在代码目录中执行命令：

tsc init

会生成一个tsconfig.json文件，文化中包含了一些编译配置选项，其中有一个outDir默认值是./即编译后的文件是在命令执行的所在目录。你可以按需修改为其他位置，这里我修改为./js/。

然后我们使用ctrl+shift+b，打开task运行面板，选中tsc watch（如果有多个项目目录，注意匹配当前代码目录的配置文件！）

如果修改了快捷键，可以在【菜单栏】-> 【Terminal】-> 【Run Task …】-> 【typescript】中找到任务并执行。

此时tsc会在后台监控目录下的ts文件，如果发生了变化将实时对其编译！

1.4、搭建Webpack项目

环境准备

当项目工程化以后，我们如何在webpack中配置TypeScript自动编译？！

首先我们使用npm init -y对工程进行初始化（如果你全局安装了webpack和webpack-cli，可以省略此步骤）

然后执行npx webpack init

npx会优先使用项目本地依赖包中的webpack，并且会临时安装可执行依赖。

如果全局安装直接使用webpack init

然后开始进行webpack项目配置：

1. 选用typescript
2. 启用webpack-dev-server
3. 启用简化HTML文件创建和bundle引入
4. 样式文件如果没有选择none
5. 不启用Prettier
6. 最后选择覆写package.json

然后静静等待配置文件生成即可！

基础测试

完成后，会发现我们ts转换js的ts-loader已经帮我们安装了，npm脚本命令也已经为我们配置好了，HttpWebpackPlugin也已经配置好了。

如果还需要其他配置，可以在webpack.config.js中进行修改！例如在output中设置clean:true，开启dist文件夹清理【对webpack不熟悉的，复习一下webpack，再按需对配置文件进行修改~】

你先你可以先尝试在src/index.ts中写一些ts语法的代码，然后命令行中执行npm run build:dev（开发环境打包），然后dist目录中就是打包构建的内容了，ts代码也被成功编译为js代码，并自动引入了！

现在你可以使用npm run serve启动webpack-dev-server，启动后我们可以实现代码的热部署，每次我们代码变化后，都会自动进行build，然后我们在浏览器上刷新就可以看到最新的代码效果了！！

二、TypeScript特性

2.1、基础类型

TypeScript相较于JavaScript变化最明显的，最容易感受到的就是加上了类型限定，通过x:number此类形式为变量/属性设置类型，一旦声明时类型确定就不再改变，妥妥的静态类型语言！这也就是为什么我们在编写JavaScript代码时针对类型的错误，我们不便于排查，但是换上TypeScript，就像写Java一样，代码逻辑上一点纰漏都会被排查出来！

number、string、boolean

以上几种类型，但凡学过任何一门语言应该都知道，直接略过！

说明一点：在JavaScript和TypeScript中，所有的数字都是浮点数，所有没有整型和浮点型只分，同属于number！TypeScript支持二、八、十、十六进制字面量：

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d; // 十六进制
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制

Array、Tuple

数组应该都很熟悉，直接上代码：

// 声明数组
let numbers: number[] = [1, 3, 5, 7, 9]
console.log(numbers[2]); // 5

// 使用Array+泛型声明数组
let numbers2: Array<number> = [2, 4, 6, 8, 0]
console.log(numbers2[2]); // 6

在TypeScript中，当你为数组元素类型做了限定后（即使用了arr: number[]或arr: Array<number>）数组中只能放置对应类型的数据。

在JavaScript中，数组没有元素类型的限定，多种类型的元素允许出现在一个数组中：

let arr = [1, 'Hello', true, 3.1415926]

当然这种操作也是可以用TS语法实现的，不过需要一个特殊的类型Any，这个后面再说。

Tuple元组，可以将看做是一个指定大小，并且指定每个位置元素类型的数组。在声明时就确定了元组的大小以及各个位置元素的类型：

let tuple: [number, string, boolean] = [123123, 'sakura', true]
console.log(`id :${
     tuple[0]} | name: ${
     tuple[1]} | isMan: ${
     tuple[2]}`);

使用元组，我们可以将看似无关数据进行组合，形成一个整体！

enum

年少不知枚举好，错把if-else当成宝！

使用枚举，我们可以为复杂的数据取名字，方便我们在使用时进行调用。

创建一个枚举类型：

enum Color {
   
  red,
  blue,
  green
}

因为此时，我们还没有为枚举中的元素进行赋值，所以元素会默认从0开始编号，将其编号作为自己的元素值：

console.log(Color.red); // 0
console.log(Color.blue); // 1
console.log(Color.green); // 2

当你某个元素赋number类型值后，后面的元素会重新以此数值为起点重新计算编号：

enum Color {
   
  red,
  blue = 99,
  green
}

console.log(Color.red); // 0
console.log(Color.blue); // 99
console.log(Color.green); // 100，从99开始计算编号

但是如果你为元素赋值为字符串类型，那么其后的元素都必须进行赋值！（只有数字类型的枚举可以计算元素值！并且只能使用字面量进行赋值。）

但我们是希望用Color.red来代替一个复杂的数据，我们可以给每个元素都指定数据值：

enum Color {
   
  red = 0xff0000,
  blue = 0x0000ff,
  green =</