一.简介:

TypeScript（简称 TS）是微软公司开发的一种基于 JavaScript （简称 JS）语言的编程语言。

它的目的并不是创造一种全新语言，而是增强 JavaScript 的功能，使其更适合多人合作的企业级项目。

TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本（但是可能会报错），此外它再增加了一些自己的语法。

TypeScript 对 JavaScript 添加的最主要部分，就是一个独立的类型系统。

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

二.关于类型(动态类型与静态类型):

类型的概念:

类型是编程语言中对数据特征与行为的抽象归类，它定义了一组值所共有的属性、操作方式及约束规则。简单来说，类型是对 “什么样的值可以做什么事” 的明确约定。

类型是对数据的 “能力” 与 “限制” 的抽象描述，它通过统一的规则划分数据类别，约束操作范围，最终目的是减少编程中的不合理操作，提升代码的可靠性与可维护性。

let studentName: string = "Tom";
let studentAge: number = 20;

在上面的两个数据中,分别添加了string与number这两个数据类型约束,如果后续对其赋值不是其所规定的数据类型时,TypeScrip就会报错处理

let studentName: string = "Tom";
let studentAge: number = 20;

studentName = 100    // 报错
studentAge = "18"    // 报错

动态类型:

《你不知道的 JavaScript（中卷）》中提到，从 ES5.1 规范来看，ECMAScript 语言中所有的值都有一个对应的语言类型，包括 Undefined、Null、Boolean、String、Number 和 Object。书中对 JavaScript “类型” 的定义为：对语言引擎和开发人员来说，类型是值的内部特征，它定义了值的行为，以使其区别于其他值。并且强调 JavaScript 不做 “类型强制”，也就是说，语言引擎不要求变量总是持有与其初始值同类型的值。

《JavaScript 设计模式与开发实践》中指出，动态类型语言是指变量类型要到程序运行的时候，待变量被赋予某个值之后，才会具有某种类型。JavaScript 是一门典型的动态类型语言。

下面就是JavaScript语言的示例:

let a = 1;
a = "我是1";
console.log(a); // 我是1

let b = "hello";
b = 2;
console.log(b); // 2

静态类型:

对于上面JavaScript动态语言代码示例,我们不能提前知道这个变量的类型是咋么样的,虽然JavaScript也有着属于自己的数据类型,但是，JavaScript 的类型系统非常弱，而且没有使用限制，运算符可以接受各种类型的值。在语法上，JavaScript 属于动态类型语言。

正是JavaScript的这个特性,对于提前发现代码错误，非常不利。

TypeScript 引入了一个更强大、更严格的类型系统，属于静态类型语言。

三.安装:

NPM 全局安装 TypeScript:

npm install -g typescript

四.编译:

1.命令行编译:

安装完成之后就可以使用tsc命令来执行 TypeScript 的相关代码

创建一个.ts文件夹写ts代码,例如:app.ts

这样TypeScript 转换为 JavaScript就可以通过node来运行代码

tsc app.ts
node app.js 

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

2. ⾃动化编译:

• 第⼀步：创建 TypeScript 编译控制⽂件：tsc --init
• 第⼆步：监视⽬录中的 .ts ⽂件变化 tsc --watch 或 tsc -w
• 第三步：⼩优化，当编译出错时不⽣成 .js ⽂件 tsc --noEmitOnError --watch
  • 备注：当然也可以修改 tsconfig.json 中的 noEmitOnError 配置

3.ts-node 模块:

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

npm install -g ts-node

安装成功之后就可以直接编译TypeScript代码:(例如app.ts)

ts-node app.ts

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

$ npx ts-node app.ts

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

4.TypeScript Playground:

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

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

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

五.配置:

默认情况下，TypeScript 以 ES5 为目标，这是 ECMAScript 的一个非常老的版本。通过使用 target 选项，我们可以选择更新一点的东西。使用 --target es2015 运行将 TypeScript 更改为以 ECMAScript 2015 为目标，这意味着代码应该能够在任何支持 ECMAScript 2015 的地方运行。

tsc --target es2015 app.ts 

使用命令tsc --init快速生成配置TypeScript配置文件

六.资料来源:

TypeScript 阮一峰 | 阮一峰 TypeScript 教程

TypeScript 快速上手 | 寻觅~流光

TypeScript 中文网: 手册 - TypeScript 手册

下一篇:TypeScript---基础类型