Typescript——简单介绍

前言

JavaScript因为从设计之初就没有考虑类型约束问题，所以造成了我们前端开发人员关于类型思维的缺失，前端开发人员通常不关心变量或者参数是什么类型的，如果当必须确定函数的参数类型时，我们往往需要使用各种判断验证；比如：

（1）当我们去实现一个核心类库时，如果没有类型约束，那么需要对别人传入的参数进行各种验证来保证我们代码的健壮性；

（2）当我们去调用别人的函数时，对方并没有对函数进行任何的注释，我们只能去看里面的逻辑来理解这个函数需要传入什么参数，返回值是什么类型；

为了弥补javaScript在类型约束上的缺陷，增加类型约束，很多公司推出了自己的方案：

（1）2014年，Facebook推出了flow来对javaScript进行类型检查；

（2）同年，Microsoft微软也推出了typeScript1.0版本；

他们都致力于为javaScript提供类型检查； 而现在无疑typeScript已经完全胜出：

（1）Vue2.x的时候采用的是flow来做类型检查；

（2）Vue3.x已经全线转向typeScript，98.3%使用typeScript进行了重构；

（3）而Angular在很早期就使用typeScript进行了项目重构并且需要使用typeScript来进行开发；

（4）而甚至Facebook公司一些自己的产品也在使用typeScript；

因此深入学习typeScript不仅仅可以为我们的代码增加类型约束，而且可以培养我们前端程序员具备类型思维。

官方对typescript的定义：typeScript是拥有类型的javaScript超集，它可以编译成普通、干净、完整的javaScript代码。我们可以将typeScript理解成加强版的javaScript。 javaScript所拥有的特性，typeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的；并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等；

基础环境配置

在前面我们提到过，TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境：

我们需要先进行全局的安装：

​ npm install typescript -g # 安装命令

​ tsc --version # 查看ts版本

编译运行方式一：

​ 第一步：通过tsc编译typeScript为javaScript代码；

​ 第二步：在浏览器或者Node环境下再去运行javaScript代码；

如果我们每次为了查看typeScript代码的运行效果都经过上面两个步骤的话就太繁琐了，所以推荐使用下面的方式。

编译运行方式二：

​ 通过ts-node库，为typeScript的运行提供执行环境；

​ 安装：npm install ts-node -g

​ 另外需要依赖 tslib 和 @types/node 两个包： npm install tslib @types/node -g

​ 现在，我们便可以直接通过 ts-node 来运行TypeScript的代码：ts-node math.ts

定义变量

声明了类型后typeScript就会进行类型检测，声明的类型称之为类型注解；

比如我们声明一个message变量，完整的写法如下：

const message: string = "Hello World"

注意：这里的string是小写的，和String是有区别的，string是typeScript中定义的字符串类型，而String是ECMAScript中定义的一个类。如果我们给message赋值其他类型的值，那么就会报错。

在开发中，有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型，我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型，而这便被称为类型推断（所以我们在以后的ts开发中需要根据实际的情况去给变量添加上数据类型）

声明变量的关键字

在TypeScript定义变量（标识符）和ES6之后一致，可以使用var、let、const来定义。

var name: string = "why"
let age: number = 18
const height: number = 1.88

当然，在tslint中并不推荐使用var关键字来声明变量： 可见，在TypeScript中并不建议再使用var关键字了，主要原因和ES6升级后let和var的区别是一样的，var是没有块级作用域的，会引起很多的问题，这里不再展开探讨。