后端的React之路（三）开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

在大致了解常用的ES6标准所带来的提升后，下面就来学习同样支持ES6标准、来自微软开发的、JavaScript的超集、TypeScript！

其实就是基于JavaScript的一个面向对象编程的语言，扩展了JavaScript语法，引入了传统面向对象语言的静态类型、类、模块、接口、注解等语法特点。本质上还是JavaScript，只是在从TS编译到JS中进行了静态的类型检测拉。

原先的JavaScript是传统的动态类型语言，这就意味着容易出现一些不容易发现的类型错误，在大型的项目中容易埋坑，这是动态语言的通病。

TypeScript引入了静态类型，这使得在编译时期就可以发现大部分类型错误，这总比项目运行到一半时出错要好的多。同时个人也觉得方便了平常的开发，通过静态类型就可以很快明白变量的作用，Idea工具也可以提供更多代码提示、补全等功能，并提高团队协作开发效率。

正如上面所说，TypeScript是一个JavaScript的超集，这意味着项目中可以随意出现ts和js为后缀的文件。

如果你是一个熟练的后端接口仔，当你看到TypeScript就会感到很熟悉，代码中的class、interface、abstract让你像回到家一样熟悉，能够快速上手。

PS：可能你会想知道为啥没有水TypeScript的缺点，主要我认为TS对我来说没有什么缺点、例如网上所说的：面向对象学习成本、编译时间长、代码更多等，对于一个后端仔说这都不是事~

关于TypeScript的安装，直接使用npm即可，随后在命令控制行输入tsc -v查看是否安装成功

npm install -g typescript

tsc -v
Version 4.7.4

安装好后就来用TS写个Hello World把~

// hello.ts
const hello:string = "Hello World!"
console.log(hello);

随后使用tsc hello.ts命令，就会发现生成了一个hello.js，那么TS你就已经掌握拉，可以去写个项目拉(￣▽￣)"~

对于与大多数面向语言一致的语法，这里就不多做介绍（水文）了，下面来记录一下我认为需要TS语法中需要注意的地方把~

TS并不强制变量在声明时需要指定静态类型，但有时候我们需要将一个变量指明为一个静态类型，这个时候就可以使用as关键字，例如下面的例子

let object = "abc"
let name:string = object as string

类型断言只是个语法糖，他为编译期提供类型的分析方法，并不会影响最后转换的JS代码本身。

TS提供了一个类似于Java语言中的List容器类型，它不同于数组只能存储相同类型的元素（除了ayn[]数组），元组允许存储不同元素类型，使用方法于数组基本一致。

// 创建方式
var tuple = ["str",1,false,function (){}]

// 新增与删除
tuple.push("1") // 新增元素到尾部
tuple.pop() // 删除尾部元素

// 解构赋值
var [str,num,flag,fun] = tuple

TS支持变量为多种类型的可能性，使用管道|将变量设置为多种类型，赋值的时候根据设置类型来赋值。

var id:string|number
id = "1"
id = 1
id = true // error TS2322: Type 'boolean' is not assignable to type 'string | number'.

可以看到id变量可以被string和number赋值，但之外的其他类型的赋值都会抛出编译错误。

后端的React之路（三）