正缩胃技多不压身，不多逼逼，直接开学。注：本系列文章参考阮一峰老师的教程。

认识TypeScript

前言

因为javascript是作为一个小众语言被创建，最初只是为了能在html页面加上动态效果，请了一位叫Brendan Eich的老头(大佬你要是介意，联系我给您删了😋)花了两周设计出来的。甚至起名也有蹭java热度的嫌疑。只不过大家觉得有点好用，用户体量大了，才慢慢的不断被壮大。老登也是没有想到，他花两周的时间设计出来的语言，一伙子人觉得好用，赶着让老登加功能、更新。老登的成功......老登你是不是有系统？？？

TypeScript

TS是微软公司开发的基于JS的编程语言，它的目的不是创造一种全新语言，而是增强 JavaScript 的功能，使其更适合多人合作的企业级项目。（JS有太多不合理之处，出于种种原因，并不能被完美的解决）TypeScript 可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

以下部分内容参考自阮一峰老师的TypeScript教程

TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本（但是可能会报错），因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，此外它再增加了一些自己的语法。

增加的功能包括：

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

以下功能是从 ECMA 2015 反向移植而来：

类
模块
lambda 函数的箭头语法
可选参数以及默认参数

Typescript Playground

最简单的 TypeScript 使用方法，就是使用官网的在线编译页面，叫做Typescript Playground

只要打开这个网页，把 TypeScript 代码贴进文本框，它就会在当前页面自动编译出 JavaScript 代码，还可以在浏览器执行编译产物。如果编译报错，它也会给出详细的报错信息。

这个页面还具有支持完整的 IDE 支持，可以自动语法提示。此外，它支持把代码片段和编译器设置保存成 URL，分享给他人。

本书的示例都建议放到这个页面，进行查看和编译。

tsc 编译器

TypeScript 官方提供的编译器叫做 tsc，可以将 TypeScript 脚本编译成 JavaScript 脚本。本机想要编译 TypeScript 代码，必须安装 tsc。

根据约定，TypeScript 脚本文件使用.ts后缀名，JavaScript 脚本文件使用.js后缀名。tsc 的作用就是把.ts脚本转变成.js脚本。

安装 tsc

tsc 是一个 npm 模块，使用下面的命令安装（必须先安装 npm）。

ruby 复制代码

$ npm install -g typescript

上面命令是全局安装 tsc，也可以在项目中将 tsc 安装为一个依赖模块。

安装完成后，检查一下是否安装成功。

ruby 复制代码

# 或者 tsc --version
$ tsc -v

上面命令中，-v或--version参数可以输出当前安装的 tsc 版本。

编译脚本

安装 tsc 之后，就可以编译 TypeScript 脚本了。

tsc命令后面，加上 TypeScript 脚本文件，就可以将其编译成 JavaScript 脚本。

ruby 复制代码

$ tsc app.ts

上面命令会在当前目录下，生成一个app.js脚本文件，这个脚本就完全是编译后生成的 JavaScript 代码。

tsc命令也可以一次编译多个 TypeScript 脚本。

ruby 复制代码

$ tsc file1.ts file2.ts file3.ts

上面命令会在当前目录生成三个 JavaScript 脚本文件file1.js、file2.js、file3.js。

tsc 有很多参数，可以调整编译行为。

（1）--outFile

如果想将多个 TypeScript 脚本编译成一个 JavaScript 文件，使用--outFile参数。

css 复制代码

$ tsc file1.ts file2.ts --outFile app.js

上面命令将file1.ts和file2.ts两个脚本编译成一个 JavaScript 文件app.js。

（2）--outDir

编译结果默认都保存在当前目录，--outDir参数可以指定保存到其他目录。

css 复制代码

$ tsc app.ts --outDir dist

上面命令会在dist子目录下生成app.js。

（3）--target

为了保证编译结果能在各种 JavaScript 引擎运行，tsc 默认会将 TypeScript 代码编译成很低版本的 JavaScript，即3.0版本（以es3表示）。这通常不是我们想要的结果。

这时可以使用--target参数，指定编译后的 JavaScript 版本。建议使用es2015，或者更新版本。

css 复制代码

$ tsc --target es2015 app.ts

编译错误的处理

编译过程中，如果没有报错，tsc命令不会有任何显示。所以，如果你没有看到任何提示，就表示编译成功了。

如果编译报错，tsc命令就会显示报错信息，但是这种情况下，依然会编译生成 JavaScript 脚本。

举例来说，下面是一个错误的 TypeScript 脚本app.ts。

ini 复制代码

// app.ts
let foo:number = 123;
foo = 'abc'; // 报错

上面示例中，变量foo是数值类型，赋值为字符串，tsc命令编译这个脚本就会报错。

go 复制代码

$ tsc app.ts

app.ts:2:1 - error TS2322: Type 'string' is not assignable to type 'number'.

2 foo = 'abc';
  ~~~

Found 1 error in app.ts:2

上面示例中，tsc命令输出报错信息，表示变量foo被错误地赋值为字符串。

这种情况下，编译产物app.js还是会照样生成，下面就是编译后的结果。

ini 复制代码

// app.js
var foo = 123;
foo = 'abc';

可以看到，尽管有错，tsc 依然原样将 TypeScript 编译成 JavaScript 脚本。

这是因为 TypeScript 团队认为，编译器的作用只是给出编译错误，至于怎么处理这些错误，那就是开发者自己的判断了。开发者更了解自己的代码，所以不管怎样，编译产物都会生成，让开发者决定下一步怎么处理。

如果希望一旦报错就停止编译，不生成编译产物，可以使用--noEmitOnError参数。

css 复制代码

$ tsc --noEmitOnError app.ts

上面命令在报错后，就不会生成app.js。

tsc 还有一个--noEmit参数，只检查类型是否正确，不生成 JavaScript 文件。

css 复制代码

$ tsc --noEmit app.ts

上面命令只检查是否有编译错误，不会生成app.js。

tsconfig.json

TypeScript 允许将tsc的编译参数，写在配置文件tsconfig.json。只要当前目录有这个文件，tsc就会自动读取，所以运行时可以不写参数。

shell 复制代码

$ tsc file1.ts file2.ts --outFile dist/app.js

上面这个命令写成tsconfig.json，就是下面这样。

json 复制代码

{
  "files": ["file1.ts", "file2.ts"],
  "compilerOptions": {
    "outFile": "dist/app.js"
  }
}

有了这个配置文件，编译时直接调用tsc命令就可以了。

ruby 复制代码

$ tsc

ts-node 模块

ts-node 是一个非官方的 npm 模块，可以直接运行 TypeScript 代码。

使用时，可以先全局安装它。

ruby 复制代码

$ npm install -g ts-node

安装后，就可以直接运行 TypeScript 脚本。

ruby 复制代码

$ ts-node script.ts

上面命令运行了 TypeScript 脚本script.ts，给出运行结果。

如果不安装 ts-node，也可以通过 npx 调用它来运行 TypeScript 脚本。

ruby 复制代码

$ npx ts-node script.ts

上面命令中，npx会在线调用 ts-node，从而在不安装的情况下，运行script.ts。

如果执行 ts-node 命令不带有任何参数，它会提供一个 TypeScript 的命令行 REPL 运行环境，你可以在这个环境中输入 TypeScript 代码，逐行执行。

shell 复制代码

$ ts-node
>

上面示例中，单独运行ts-node命令，会给出一个大于号，这就是 TypeScript 的 REPL 运行环境，可以逐行输入代码运行。

shell 复制代码

$ ts-node
> const twice = (x:string) => x + x;
> twice('abc')
'abcabc'
>

上面示例中，在 TypeScript 命令行 REPL 环境中，先输入一个函数twice，然后调用该函数，就会得到结果。

要退出这个 REPL 环境，可以按下 Ctrl + d，或者输入.exit。

如果只是想简单运行 TypeScript 代码看看结果，ts-node 不失为一个便捷的方法。

。。。未完待续

TypeScript学习笔记📒第一章-简介

认识TypeScript

前言

TypeScript

Typescript Playground

tsc 编译器

安装 tsc

编译脚本

编译错误的处理

tsconfig.json

ts-node 模块