Typescript 初识以及环境的搭建

一、什么是Typescript ?

1. Typescript是微软在2012年开发的一门免费开源的编程语言。它是JavaScript的超集（增强版）。它在javascript的基础上增加了一套十分强大的类型系统(可选的静态类型)：1、丰富的语法提示。2、可以通过类型检查，从而有效避免一些线上错误。

2. Typescript具有真正的面向对象编程思想，你可以采用它来完成更加大型复杂的应用。

3. Typescript遵循javascript语法和语义，任何JS都可在Ts内运行，但是Typescript不可以直接在浏览器内运行。

二、为什么要学习Typescript ?

1. 拥有强大的靠山，分别为微软和谷歌。Typescript 很有可能是未来前端脚本语言发展的主流方向。
2. Vue 3.0 源码全部用Typescript 重写。
3. Node.js之父瑞安达尔发布了新的开源项目 deno ， 而该项目最终是为了提供一个安全的Typescript运行环境
4. 升职加薪

对于实际开发中TypeScript解决的问题：

1. 大型项目开发中，如果想调用别人的函数，对于传参，如果没有注释，你不知道参数类型的话，必须看逻辑了就。
2. 对于前后端联调，你为了代码的健壮性，你可能对变量类型进行各种假设，加各种判断。

在JavaScript推出静态类型之前，TypeScript是解决此问题的最佳方案。

三、安装Typescript

前言 ： typescript是需要Node.js支持的，你需要先安装node.js。

全局安装 ：

npm install typescript -g

查看是否安装成功 ：

tsc --version

四、运行你的第一个ts程序

1. 创建一个后缀名为.ts的文件

2. 写一些Ts代码，如 ：

     var str : string = "buzhanhua";
     console.log(str);
   

3. 命令行运行 tsc xxxx.ts 将ts文件转化为js文件。 （这里需要注意的是 .ts 后缀是可以省略的）

4. node xxx.js

五、 对ts文件实现监听

对于上面的demo你会发现，每次更新代码都要将js文件进行删除，然后重新运行tsc 指令 ，显而易见这样是非常不利于项目开发的。

1. npm init -y 创建一个package.json文件

2. 打开 package.json 文件，增加脚本

      "scripts": {
               "start": "tsc --watch",
               "build" : "tsc",
       }
   

   tsc命令会用到 tsconfig.json的配置,该文件用于决定ts怎么编译为js，新建tsconfig.json，输入一下代码 ：

     {
         "compilerOptions": {
                "module": "commonjs",
                "target": "es5",
                "sourceMap": true,
                "outDir": "lib" // 全部放到lib文件夹中，相当于出口文件
         },
         "include": [
               "src/**/*.ts" // 表示选取src 文件夹下的所有ts文件
         ]
     }
   

3. 运行 npm run start 就可以实现自动监听。