1.TypeScript 介绍

TypeScript 是什么？

简单来说，TS就是Javascript的超集，超集就是数学上的那个超集的意思，其实就是以JS为基础，增加了许多更人性化和更方便的功能，如图所示，JS有的，TS都有，所以TS代码中，可以编写任意JS代码。

TypeScript 相比 JavaScript 的优势是什么？

1.强大的类型系统，提升了代码的可维护性。

2.支持ECMAScript的最新语法。

3.类型推断机制。

4.编写程序中的任何地方都有代码提示，编码体验极强。

TypeScript 趋势

尤大在Vue3中已经使用TS进行重写，Angular默认就支持TS，而目老牌框架react早就与TS完美配合，市面上大中型项目中TS已经成为必不可少的一部分。

2.TS的类型系统

首先我们看这段JS代码

let a = 1
 
a.toFixed()
复制代码

这段代码暂时看来没有什么问题，但是如果你对变量a的类型进行了改变，例如

let a = 1

a = '1'

a.toFixed()
复制代码

那么你就会发现，当代码跑起来的时候，会显示以下错误

这是因为toFixed方法只能作用于数值类型，但是当你把变量a的类型转换成字符串时自然会报错。

再让我们看看同样的代码在TS中会如何

// ts的写法规定了变量a必须是number类型
let a:number = 1

a = '1'

a.toFixed()
复制代码

当你运行这段代码时，不，你根本不需要运行这段代码，你就会发现

是的，已经报错了，告诉你不能把string类型赋值给number类型的变量。

这就是TS和JS本质上的区别，TS是静态语言，JS的动态语言，而静态语言在编译时就会进行判断，动态语言只有在运行时才会进行对类型的判断。

3.Type Script 常用类型

3.1 类型注解

// TS的类型其实就是在变量名后添加一个:并且跟上一个数据类型，如此就可以约束变量的类型。
let num: number = 10
复制代码

3.2 Type Script 常用基础类型

TS的常用类型简单来说就是两种，一种是JS已有的原生类型，一种是TS新增类型。

JS已有类型

简单类型：number / string / boolean / null / undifined / symbol（ES6新增数据类型，用的不多，具体不再阐述

对象类型：object （数组、对象、函数等对象都属于此）

TS新增类型

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

我们先来看看JS已有类型的定义方式。


let hero: string = '灰烬之灵'

let age: number = 22

let ultimateSkill: boolean = true

复制代码

接下来就是对象类型的定义方式。

在对象类型中，每个具体的对象，都有自己的类型写法。

个人觉得这一点挺关键的，毕竟在原生JS中，无论是数组Array还是对象Object，用typeOf类型判断的时候，返回的都是Object。

此处先说说数组Array的写法。

Array


// 第一种写法, 类型 + [], 推荐, 常用写法.

let arr: string[] = ['风暴之灵', '灰烬之灵', '大地之灵', '虚无之灵']

// 第二种写法, Array + <类型>, 不推荐, 因为在react中script标签中是可以写标签的, 所以此种写法与标签的尖括号冲突.

let arr2: Array<string> = ['蓝猫', '火猫', '土猫', '紫猫']

复制代码

那写到这里就有小伙伴要问了，如果我想要一个数组里同时存在字符串和数字或者更多类型怎么办呢？

当然有办法了


let arr: (number | string)[] = ['敌法师', 30000, '一秒躺'] 

复制代码

这就是TS的联合类型，使用 | 隔开两个或多个类型。

接来下我们来看对象类型中，函数类型的写法。函数类型有两种，我们先说第一种。

Function


function add(num1, bum2) {
    return num1 + num2
}

复制代码

这是一个最基本的函数。

首先来说一下，对于函数来说，最重要的其实就是函数的参数和返回值，那么其实函数类型要约束的也是函数的参数和返回值。

说到这里，肯定已经有聪明的小伙伴想到了，函数的参数，其实也就是一种变量，没错，所以函数的参数和普通变量是一种语法，如下


function add(num1: number, bum2: number) {
    return num1 + num2
}

复制代码

那么返回值该如何约束呢?


function add(num1: number, bum2: number): number {
    return num1 + num2
}

复制代码

在参数后面加上约束类型就好啦。

当然如果函数是一个表达式时，写法是一样的


const add = (num1: number, bum2: number): number => {
    return num1 + num2
}

复制代码

这就是函数类型的第一种写法，分别单独给参数和返回值定义类型，接下来看第二种。

第二种就是同时约束函数的参数和返回值类型。

这种写法与普通变量的语法类似，但是只有当函数是表达式时，才可以使用。


const add: (num1: number, bum2: number) => number = (num1, num2) => {
    return num1 + num2
}

复制代码

其实肯定会有人想问，实际应用中，使用函数时无需返回值也可完成某些功能，这时候该怎么办呢。

如果上面这段函数没有返回值，运行起来会怎么样？


const add: (num1: number, bum2: number) => number = (num1, num2) => {
    console.log('直接进行一百个勤的酬')
}

复制代码

没错，的确会报错，因为你规定了返回值的类型，但并没有返回值。

所以这时候就用到了TS的新增类型void


const add: (num1: number, bum2: number) => void = (num1, num2) => {
    console.log('ti10 LDG必胜')
}

复制代码

如上，这段函数并没有返回值，但是代码并不会报错

void的含义，就是空，可以使一个函数不需要返回值。

一定要跟null类型分开，void只能用来指定没有返回值的函数，而null是给变量指定类型。

说到没有返回值的函数，那肯定也有参数可传可不传的函数咯，定义方法如下


const add: (num1?: number, bum2?: number) => void = (num1, num2) => {
    console.log('ti10 LDG必胜')
}

复制代码

在参数后面和冒号前面加上一个问号，就指定了这个参数未非必传参数，但是要注意，非必传参数必须在最后并且非必传参数后面不可存在必传参数。

到这里，函数类型就算是告一段落了，接下来我们来看看对象类型object该如何去约束。

Object

JS中的对象，其实就是属性的方法的一个集合，只不过相对于数组来说，对象中有key值，也就是每一个属性和方法的名字。


let obj = {
    name: '萧瑟',
    age: 15,
    stageName: function() {
        console.log('仙贝')
    }
}

复制代码

那么在TS中的对象类型，就是去描述一个对象中的每个属性或者方法的类型。


let obj: {name: string; age: number; stageName(): void} = {
    name: '萧瑟',
    age: 15,
    stageName: function() {
        console.log('仙贝')
    }
}

复制代码