6.1 初体验 TypeScript 🎉

学习本章节之前，先看这里！！！

学习完 ECMAScript6 新特性模块之后再来学习 TypeScript 效果会更佳，假如你还没有学习 ECMAScript6 新特性，请点击ECMAScript6 新特性模块进行学习，之后再来学习本章节！

TypeScript 是由微软开发的超集 JavaScript 的编程语言。它是一种静态类型语言，意味着在编写代码时，你必须指定每个变量的类型，而不是在运行时动态检测它们的类型。

TypeScript 为 JavaScript 提供了一些高级功能，如类型检查和面向对象编程，使得 JavaScript 开发人员能够更轻松地编写大型应用程序

TypeScript 代码可以通过编译器转换为 JavaScript 代码，这样就可以在浏览器或任何其他 JavaScript 运行环境中运行。它与 JavaScript 的兼容性非常好，因此你可以在现有的 JavaScript 项目中使用 TypeScript，或者在新项目中从头开始使用 TypeScript 开发

你可以暂时先这样理解 TypeScript，就是 JavaScript 能做的 TypeScript 也能做，JavaScript 不能做的 TypeScript 还能做，众所周知，Type 译为种类、类型等，所以 TypeScript 是一种像 Java 一样的强类型语言

TypeScript 与 JavaScript 的关系，为了更好的理解，我们可以将三者看成是包含关系

下面我用两个场景带大家迅速了解下 TypeScript

场景 1：

普通的 JavaScript 代码，假如代码有错误，只有在运行之后才会才会知道哪里写错了，例如：

function add(a, b) {
  console.log(a + b + 1);
}
add();

这种情况，编译器不会报错，运行代码的时候控制台报错，回过来一检查，是忘记了给他传递a和b这两个参数，假如使用 TypeScript 呢，在没有运行之前，编译器就会直接给你标红提示（应有 2 个参数，但获得 0 个。），直接大大减少代码错误率以及调错时间成本。

场景 2:

有一个函数，给他一个数字类型的参数，就会打印参数值与 100 的和，例如传递 102，打印出 202，代码如下：

function add(a) {
  console.log(a + 100);
}
add(102);

上边代码运在 JavaScript 中是没有问题的，但是，如果我并没有按要求传递参数，或者给了他一个字符串类型的参数，结果肯定就不是我们想要的了，并且编译器也不会报错，这时候就留下了漏洞，如下:

function add(a) {
  console.log(a + 100);
}
add();
function add1(a) {
  console.log(a + 100);
}
add1("哈哈");

得到的结果分别是NaN和哈哈100，这显然都不是我们所需要的

但是，通过 TypeScript 就完全把这种情况给干掉了，直接看代码，

function add(a: number) {
  console.log(a + 100);
}
add(102);

它给了参数a一个类型限制，意思就是你只能给我传递数字类型的参数，其他类型的我都不买单，即使你在调用该函数时忘记传递参数了，编译器就会像场景一那样会给你标红提示（应有 1 个参数，但获得 0 个。）
通过上边两个案例，相信大家对 TypeScript 有了基本的认识和了解，下面开始正式学习 TypeScript

安装 TypeScript

我们所编写的应用程序最终是需要运行在浏览器中的，但是浏览器能识别的语言是 JavaScript 而非 TypeScript。那么问题来了，我们编写 TypeScript 的代码如何运行在浏览器中呢？答案：将 TypeScript 编译成 JavaScript 代码在运行在浏览器中！

npm install -g typescript

// 检查
tsc -v

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了

检查是否安装成功：tsc -v

编译 TypeScript

// index.ts
function add(n: number, m: number) {
  console.log(n + m);
}
add(10, 20);

如上，这里有一个 index.ts 文件，编译一个 TypeScript 文件很简单

tsc index.ts

通过编译，直接会在当前目录下生成一个同名的js文件，在 HTML 中引入这个js文件即可

直接运行 TypeScript

对于js文件，我们除了在 HTML 中引入外，还能通过node index.js运行这个 js 文件，同样，我们也可以不通过编译直接运行ts文件

npm install -g ts-node

ts-node index.ts