TypeScript学习之路（1w字总结）

今天是2022年9月19日，也是我开始计划写这篇文章的日子。为什么要写这篇文章呢，其实在我去年下半年的时候，专门学过ts，但是实际工作中，用ts的地方其实用的很浅。平常工作也就定义个types啊，或者枚举enum啊。什么泛型之类的，工作中从来没有用过。以至于当我在看别人的工具包的时候，人家定义的函数参数类型，我有一些看不明白，所以才专门重新学了一遍ts，并且写一篇博客记录一下，这样当我往后忘记的时候，就只需要再看一遍自己的博客就好了。我也推荐大家用写博客的方式，来记录自己的学习之路。看 -> 做 -> 教 -> 是学习的三大阶段，你只看别人怎么写，基本是学不会的。如果边看，边做。可能当时记住了，但过段时间不用你也会忘，只有当你学会了，并且教会别人，时常巩固，才能收益最大化。

TypeScript是什么

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。

TypeScript的优缺点

刚接触TypeScript的小伙伴可能会有点疑惑，为什么要使用typescript，我直接用js不香吗。其实我刚开始接触typescript也是这么想的。明明用js，半天就能搞定的事，用了ts，工作量反而要翻一倍甚至不止。如果你要写出漂亮的ts代码，人力成本肯定要大大增加的，这也是一些小型创业公司不用ts的原因，烧钱啊。但是，不知道大家有没有碰到过，一个用了ts的项目，和没用ts的项目，当你有一天去维护它的时候，用ts的项目维护起来简直如鱼得水，也不会犯因为类型错误而报的错，而反观没用ts的，你去用一些函数的时候，都不知道它接受几个参数，也不知道传什么类型。所以，学习ts是非常有必要的（ps：主要是不学ts，以后容易被淘汰啊，我也不想学啊）

优点

• 增强代码的可维护性，尤其在大型项目的时候效果显著
• 友好地在编辑器里提示错误，编译阶段就能检查类型发现大部分错误
• 支持最新的JavaScript新特特性
• 周边生态繁荣，vue3已全面支持 typescript

缺点

• 需要一定的学习成本
• 和一些插件库的兼容并不是特别完美，如以前在 vue2 项目里使用 typescript就并不是那么顺畅
• 增加前期开发的成本（但是便于后期的维护）

TypeScript起步使用

安装TypeScript

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）
• 安装Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript，你可以下载它。

针对使用npm的用户：

> npm install -g typescript

构建你的第一个TypeScript文件

在编辑器，将下面的代码输入到greeter.ts文件里：

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

编译代码

我们使用了.ts扩展名，但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。

在命令行上，运行TypeScript编译器：

tsc greeter.ts

输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！

安装ts-node

当然，如果只用tsc这个命令，每次都会生成一个新的js文件，很麻烦。所以我们来安装ts-node。这样每次运行都只需要运行一次命令就好
安装

npm i ts-node -g

运行

ts-node 文件名

有了ts-node，我们就能很方便的调试ts文件。一切准备就绪，让我们开始学习吧

TypeScript的基础类型

string

JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string表示文本数据类型。 和JavaScript一样，可以使用双引号（ "）或单引号（'）表示字符串。

如果给的类型不对，会直接报错，代码编辑器会显示出来。例如（后面我不会贴图了，知道编辑器会报错就行）

const str: string = 1234; // false 定义str为string类型 如果给别的类型会直接报错
let str1: string = '1234'; // true
str1 = '2345'; // true
str1 = 1234; // false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ug5r9Kmk-1663742751357)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7906187414d140a1bfe91bfab588a120~tplv-k3u1fbpfcp-watermark.image?)]

number

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

const num: number = '1234'; // false 不能将string分配给number
let num1: number = 1234; // true
num1 = '2345'; // false 不能将string分配给number
num1 = 1234; // true

boolean

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。

const boo: boolean = '1234'; // false 不能将string分配给boolean
let boo1: boolean = true; // true
boo1 = '1234'; // false 不能将string分配给boolean
boo1 = false; // true

enum

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green; // 1

默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1开始编号，如果后面成员没设置编号，自动从你上一个设置的编号开始排序：

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green; // 2

或者，全部都采用手动赋值：

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green; // 2

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

array

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

let list1: number[] = [1, 2, 3];

第二种方式是使用数组泛型，Array<元素类型>：

let list2: Array<number> = [1, 2, 3];

tuple元祖

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。听上去可能高大尚，其他它只是在数组类型上，知道了一个数字的长度，所以给数组的每个元素都定义类型。 比如，你可以定义一对值分别为 string和number类型的元组。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

当访问一个已知索引的元素，会得到正确的类型：

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

当访问一个越界的元素，会报错：

x[3] = 'world';  //false 不能将“world”分配给undefined

any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。