Typescript

Typescript 介绍

TypeScript 是由微软开发的自由和开源的编程语言。

它是 JavaScript 的一个超集。

TypeScript 和 JavaScript 的主要区别，TypeScript 中 Type 是类型的意思，在 TypeScript 提供了类型检查。

为什么类型检查很重要？

因为有了类型检查，我们可以在代码运行前就知道错误，避免运行时错误。

can not read property 'id' of undefined

上面的错误，往往是在我们运行代码的时候，要运行到特定的点，才会触发。这种错误我们叫做运行时错误。

所以运行时错误是具有很大隐患的，往往在测试的时候如果没有测试到，一旦项目上线，往往会被用户发现，用户投诉，你会被扣工资，辞退，中年危机。

所以，我们更加希望这样的错误在运行前检查出来。动态语言是做不了，静态语言。

静态语言最大的特点，就是如果有错误，在编译的时候就会报错，换句话说，一旦有错，项目都跑不起来。

下表罗列出了 TypeScript 和 JavaScript 的主要区别：

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块，泛型或接口
支持 ES3，ES4，ES5 和 ES6 等	不支持编译其他 ES3，ES4，ES5 或 ES6 功能
社区的支持仍在增长，虽然还不是很大	大量的社区支持以及大量文档和解决问题的支持

搭建 TypeScript 开发环境

需要安装 typescript：

npm i -g typescript

查询版本：

tsc -v

初始化一个项目，npm init -y 和 tsc --init 来初始化我们的项目。

初始化完毕之后，我们的项目里面就有 2 个文件：package.json 和 tsconfig.json

默认情况下，ts 认为我们的代码是在浏览器环境里面运行，所以使用 node 的语法， 会报错，这个时候可以安装 @types/node 这个包

npm i @types/node

@types/node 是 ts 官方推出的一个类型包，提供了对 nodejs 代码的检查。

再比如，jQuery 本身使用 js 来写的，所以不存在类型检查，所以也需要安装类型检查库 @types/jquery.

优化开发环境

在上面的示例中，我们建立了一个最基本的 typescript 开发环境，但是该环境还有很多能优化的地方。

首先，我想将所有的 ts 文件放入 src 目录下面，然后编译出来的 js 文件全部放在 dist 目录下面。

这个可以在 tsconfig.json 中进行配置，如下：

// tsconfig.json

{
  "compilerOptions": {
    ...
    "outDir": "./dist"  // 编译后的 js 所存放的目录
    ...
  },
  "include": ["./src"]  // 默认编译项目目录下所有的 ts 文件，这里表示只编译 src 目录下的 ts 文件
}

配置完成后，在项目根目录下新建 src 目录，并将 index.ts 放进去，然后执行 tsc 命令。

之后就会在项目根目录下自动生成一个 dist 目录，编译结果 index.js 就存放在此目录中。

目前为止，我们已经将我们的 ts 文件和 js 文件分门别类了，并且你也已经知道写了 ts 文件后，要先编译成 js 再执行。

推荐安装 ts-node 这个第三方库

npm i -g ts-node

这个库的作用就是在内存中运行 ts 的结果。

ts-node <文件名>

接下来，我们继续优化开发环境。

所以我们可以安装 nodemon，这个插件的作用在自动监听改变的文件，自动执行

npm i -g nodemon

接下来在 package.json 中配置：

"dev" : "nodemon --watch src -e ts --exec ts-node src/index.ts"

TypeScript 中的数据类型

typescript 既然作为 js 的超集，js 有的数据类型，ts 一定有。

我们在 ts 中，定义变量的时候，可以在变量后面添加数据类型，如下：

// 简单数据类型
let i:boolean
let d : number
let str : string
let u : undefined
let sym : symbol
// 复杂数据类型
let arr:number[] = [1,2,3];
let obj:object = {
    name : 'william',
    age : 18
}