![在这里插入图片描述](https://img-blog.csdnimg.cn/20191212214332469.png
top_img: https://5b0988e595225.cdn.sohucs.com/images/20190831/84729f5c5bb346208416445feb485df6.jpeg)

Cying, What Is TypeScript ?

TypeScript ，是 JavaScript 的一个超集，Microsoft 公司于 2013 年正式发布 v 0.9

JavaScript 从某方面来说的确是一门非常优秀的编程语言，以至于几十年来还没有能取而代之的新语言诞生，但是在 JavaScript 设计之初是存在很多弊端没有被考虑到的，比如 ES5 规范之前 var 类型的作用域问题，设计之初的数组并非连续存储单元，以及到今天还未解决的 类型检测机制 等等。这形态各异的 ‘八阿哥’ 也是使得出现了各种规范 (ES5、ES6…) 和封装语言 **(jQuery、Flow、TypeScript…)**。

说白了，就像 Java 是 C 和 C++ 的封装语言，反过来说，C 和 C++ 是 Java 的底层语言一样，TypeScript 是 JavaScript 的封装语言，而 JavaScript 就是 TypeScript 的底层语言。所以在最后的最后，TypeScript 仍然会解析成 JavaScript 去执行。那么下面进入我们的初体验环节

1.环境配置

  • 下载并安装 Node.js
  • 打开 cmd 输入 npm install TypeScript -g

    在这里插入图片描述

Complete

2.测试

  • 任意打开一个文件夹，新建一个 .txt 文件，并更改扩展名为 .ts

    在这里插入图片描述

  • 随便写一点代码

在这里插入图片描述

  • 打开 cmd 并找到当前文件夹，然后输入 tsc filename.ts

    在这里插入图片描述
  • 这个时候就完成了 TypeScript 到 JavaScript 的解析，并生成了 .js 文件

    在这里插入图片描述

在这里插入图片描述

Complete

3.自动编译 TypeScript 成 JavaScript

  • 将当前文件夹在 VsCode 中打开，在 VsCode 的 Terminal 输入指令： tsc init，即可生成 tsconfig.json 的配置文件

在这里插入图片描述

  • 取消 "outDir": "./", 的注释，这就是 .js 文件的输出路径，其中 ./ 代表 tsconfig.json 所在的目录，用户可在其后自己添加更多路径，如我的 Disc 就是自己加上去的

    在这里插入图片描述
  • 然后如下：Terminal 菜单 => Run Task

在这里插入图片描述

  • 选择 tsc: watch - tsconfig.json 即可实现实时编译

    在这里插入图片描述
  • 此时就能看到在当前文件夹下多了 Disc 文件夹，其下就有编译出来的 index.js

    在这里插入图片描述

Complete

极度舒适的代码风格

左边是 TypeScript，右边是解析出来的 JavaScript

在这里插入图片描述

新建index.html并引入解析出来的index.js的运行结果

在这里插入图片描述