TypeScript学习_01_TypeScript开发环境搭建

                 基于Visual Studio Code和Node.js下的TypeScript开发环境搭建

一，TypeScript简介（TypeScript中文官网）

    TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法，.js文件可以直接重命名为 .ts。  

   1，语法特性

• 类 Classes
• 接口 Interfaces
• 模块 Modules 
• 类型注解 Type annotations
• 编译时类型检查 Compile time type checking 
• Arrow 函数 (类似 C# 的 Lambda 表达式)
• 即使不显式的定义类型，也能够自动做出类型推断
• 可定义从简单到复杂的一切类型
• 即使 TypeScript 编译报错，也可以生成 JavaScript 文件
• 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

   2，JavaScript 与 TypeScript 的区别

• 加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销。
• TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
• 增加一个完整的类结构，使之更象传统的面向对象语言。
• TypeScript 可编译成可读的、标准的 JavaScript。
• TypeScript 支持开发大规模 JavaScript 应用（面向对象，并拥有一些函数式特性可适配大型App构建）。

 

  二，Node.js简介（Node.js的前世今生）

       Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，通过对高性能V8引擎的封装，并通过一系列优化的API类库，使其就能够在后端运行。

       Node.js有两大特点：

          1、基于事件驱动；

　　   2、无阻塞。

       从而使Node.js非常适合处理并发请求，使其轻量又高效。

       Node.js其本质就是JavaScript，所以基于事件驱动不难理解，因为JavaScript是单线程的，所以要做到无阻塞，Node是通过大量的回调函数来达到这一目的。

     

      Node.js一方面是提供一个开发的Runtime；另一方面提供的npm工具，我们可以利用这个工具来安装TypeScript。   

  三，安装

    1，Node.js安装 

       TypeScript源码需要进行编译以后才能运行，Node.js则提供了编译环境， 这里安装一下Node.js。

       进入官方下载地址：http://nodejs.cn/download/，按照自己的操作系统选择合适的版本下载即可。自己这里选择的是64位的安装程序。

        

          安装过程，基本是下一步操作，按照建议流程安装即可。

          然后在CMD中运行如下命令：node -v 来查询当前node.js的版本号，然后输出如图所示的结果就表示node.js安装成功，接着可以输入命令：npm -v 来查询当前npm工具的版本号[可能需要时间稍长点]，便会输出如图所示的结果表示npm工具可用。

    2，TypeScript安装

         1，安装

             安装好Node.js后，可以直接使用npm工具来安装TypeScript，这个TypeScript的Package其实也是一个Compiler，可以通过这个Complier将typescript编译成javascript。打开命令提示符cmd，进入控制台(或其他终端Terminal)，输入指令：

        npm install -g typescript(使用命令行：tsc -v，可查看验证typescript是否正确安装成功)

      2，更新

      如上图所示，下载的TypeScript版本为3.1.6，该版本为最新稳定版，所以不需要更新，如果我们下载的版本小于这个版本，我们可以使用如下命令来进行更新：npm update -g typescript.

    3，VS Code安装

          前往 VS Code 的 官方网站，点击首页的下载链接即可下载。Windows 用户下载后运行 VSCodeSetup.exe 按提示完成安装即可运行。

四，TypeScript的第一个Hello World。

        1，新建TypeScript工程

        本地磁盘目录，新建typescript工作空间，在cmd命令行中定位到该文件目录，运行"code ."，即可在此位置打开VSCode编辑工具。

该目录下新建一个名为Hello_TypeScript目录：

在Hello_TypeScript目录下新建名为HelloType.ts的文件，并输入如下代码：

同时再新建一个index.html文件。新建时输入文件的.后缀名，工具会自动判定文件类型给以icon图标提示。

因为VSCode的强大功能，在你输入如下内容时已为你关联了相关代码内容，敲个回车，一键搞定！！！

文件内容如下(自己这里使用的是win10系统)：

    2，编译typescript文件

        编译ts文件生成至js文件需要生成一个tsconfig.json的配置文件，该文件生成可直接创建，也可使用命令行的方式。命名必须是tsconfig。

        方式1：Hello_TypeScript目录下直接创建一个名为tsconfig.json的文件。

        方式2：命令行："tsc -init"，命令行位置须在对应工程目录下。

        

      生成对应的tsconfig.json文件后，输入如下文件内容：
    

    接下来我们继续输入编译命令，编译HelloType.ts；输入指令：tsc -w HelloType.ts, 其中-w是watch监控的意思，当typescript文件内容发生改变时会自动进行编译。

可以看到，对应Hello_TypeScript工程目录下多了一个.js后缀的同名文件，这就是typescript编译后的javascript文件。

至此，项目编译成功。

    3，验证

           将之前的index.html用Chrome或者Firefox等浏览器打开看看效果：

好了，整个基于VSCode+Node.js环境下的typescript环境搭建梳理到此，新手小白，难免有误……。

感谢一下大神：

初探Node.js: http://www.cnblogs.com/giggle/p/5357269.html
使用Visual Studio Code + Node.js搭建TypeScript开发环境:https://segmentfault.com/a/1190000006124164
使用Visual Studio Code搭建TypeScript开发环境:http://www.cnblogs.com/sunjie9606/p/5945540.html
打造TypeScript的Visual Studio Code开发环境:https://zhuanlan.zhihu.com/p/21611724
Node.js概述：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434501245426ad4b91f2b880464ba876a8e3043fc8ef000