VSCode 搭建TypeScript开发环境

第一部分： TypeScript 简介

1. 什么是TypeScript
   1.1 TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格 － .net 技术的主要发起人之一)领衔开发的。
   1.2 TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。

2. TypeScript 的特性
   2.1 TypeScript 是 JavaScript 的超集，.js文件可以直接重命名为 .ts
   2.2 即使不显式的定义类型，也能够自动做出类型推断
   2.3 定义从简单到复杂的一切类型
   2.4 即使 TypeScript 编译报错，也可以生成 JavaScript 文件
   2.5 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

3. TypeScript 与 Javascript的区别与联系
   3.1 加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销
   3.2 增加一个完整的类结构，使之更象传统的面向对象语言
   3.3 TypeScript 可编译成可读的、标准的 JavaScript
   3.4 TypeScript 支持开发大规模 JavaScript 应用

第二部分：配置demo 文件

1. 创建typeDemo文件夹，并生成package.json 文件
   4.1 mkdir typeDemo2
   4.2 cd typeDemo2
   4.3 npm init

   
   图片 1

2. 安装typescripts
   npm install -g typescript

3. 创建tsconfig.json 文件

   3.1 tsc --init
   3.2 tsconfig.json 片段
   {
      "compilerOptions": {
          "module": "commonjs",
          "target": "es5",
          "noImplicitAny": false,
          "sourceMap": false
      }
   }
   3.3 因为写node.js你可以修改tagget为es6, 要调试把 sourceMap改为true, 添加allowjs为true,就可以ts和js混合玩了.
   {
        "compilerOptions": {
            "module": "commonjs",
            "target": "es5",
            "noImplicitAny": false,
            "sourceMap": true,
            "allowJs": true
         }
    }
   

4. 安装 .d.ts 文件
   npm install @types/node --dev-save

5. 通过命令行打开typeDemo 文件夹

     code .
   

图片 2

第三部分： 编译文件

1. 配置typescript 的task 编译文件
   1.1 使用快捷键 command ＋ shift + b

图片 3

   1.2  点击“配置任务运行程序”

图片 4

  1.3 点击“TypeScript - tsconfig.json 创建TypeScript 项目” ，生成文件tasks.json 文件

图片 5

第四部分：创建 .ts 文件并编译成 .js 文件

1. 创建app.ts 文件
   /**
   * person
   */
   class person {
   constructor() {

           }
   
         /**
              * print
         */
          public print() {
              console.log('this is a person')
          }
    }
    let p = new person();
    p.print();
   

2. 使用command ＋ shift ＋ b 编译出app.js