一、TypeScript基础

基础类型

在TyprScript中声明变量时，需要进行类型的标注。比如

let a: number = 1
let b: string = "hello"

如果定义了类型的变量赋值其他类型的变量，是会报错的，比如

let b: number = 'hello`

b变量希望接收一个数字类型的值，却得到了一个字符串，此时编译ts代码时tsc会报错。

函数类型

在定义函数的时候，需要对函数的参数和返回值进行类型标注。

function add(a: number, b: number): number {
    return a + b
}

这就要求函数在使用的时候传入的两个参数必须都是数字类型。

interface

在定义对象的时候，一般还会对对象的属性进行要求。通过interface来限制对象的属性类型

interface Person {
    name: string
    age: number
}

let p: Person = {
    name: 'Jack',
    age: 20
}

二、类型进阶

联合类型与交叉类型

联合类型的变量可以同时拥有两种类型

let num: number | string
num = 8
number = 'hello'

交叉类型类似于继承

interface Person {
    name: string
    age: number
}

type Student = Person & {grade: number}

let stu: Student
stu.name = 'Jack'

同时在IDE中编写代码时还可以发现stu变量同时拥有了三个提示，这也是TS带来的好处之一：优秀的代码提示功能。使用TypeScript编写的VSCode能够提供优秀的代码提示就是这个原因。

type和interface的区别

TS中interface是定义对象类型的主要方式，而type则主要用来定义别名。除此之外，两者还有其他区别

interface可以重复声明，但是type不行。
interface不能定义基本类型，但是type可以。

泛型

泛型可以理解为一个占位符，它占的是类型声明的位置。例如编写一个函数时我们并不确定传入的参数是什么，希望在使用函数的时候来指定，泛型就有这个用处。比如下面的例子。

function printArray<T>(arr: T[]) {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}
const arr1 = ["foo", "bar", "baz"];
printArray<string>(arr1); // 输出 "foo", "bar", "baz"

const arr2 = [1, 2, 3, 4];
printArray<number>(arr2); // 输出 1, 2, 3, 4

泛型还有许多相关的API，比如获取泛型的类型，获取所有的key等。

三、TS实战相关

首先是一些常见项目中关于TS的文件。

declare: 第三方库需要类型声明文件。
d.ts: 声明文件定义。
@types: 一般是第三方库的TS版本。
tsconfig.json: TS的配置文件。

##四、总结

TypeScript作为JavaScript的超集，引入了类型系统，提高了代码的可维护性，同时还带来了良好的代码提示功能。例如Vue3这类有名的项目，都已经是官方使用TS来进行源码的编写了，所以TS在大型项目上的优势也得到了广泛认可。而且还有一个原因，TS虽说引入了类型系统，但是它的开发体验和JS相比并没有发生翻天覆地的变化。虽说精通TS很难（类型体操要我狗命），但是对于一个经常写JS的人来说，想要快速上手TS还是比较简单的。

深入TypeScript | 青训营笔记