VS Code 开发调试 TypeScript

2016.8.8

环境

首先需要 Node.js 环境。

     cmd 中输入  npm  如果没有报错说明安装了 Node.js

否则    从网上下载并安装！

     cmd 中输入  tsc -v  如果没有报错说明安装了 TypeScript

否则    输入以下命令

npm install -g typescript

模块被安装的位置（没在Node.js的安装位置）  在：

案例下载， 可以看看：

https://github.com/Microsoft/TypeScriptSamples

创建一个项目，   使用  VSCode 随便打开一个文件夹路径。

        项目内容， 新建一个文件  main.ts     (故意没有创建在根目录下)

添加 代码内容：

class Parent {

   constructor(public name) { }

    say(data){

       console.log(this.name + " Say: " + data);

    }

}

class Child1 extends Parent {

    say() {

       console.log("Child1...");

       super.say(5);

    }

}

var sam = new Child1("TypeScriptName")

sam.say()

            .vscode是VSCode开发工具特有的文件夹，主要用来存放调试时需要用到的配置文件。

配置编译   .ts  => .js   文件

tsconfig.json：TypeScript编译配置文件(  放在项目的根目录下！)

项目的根目录下  添加文件 tsconfig.json

{

   "compilerOptions": {

       "target": "es5",

       "noImplicitAny": false,

       "module": "commonjs",

       "removeComments": true,

       "sourceMap": false,

       "outDir": "Golang/TypeScript/"

    }

    //"include":[

    //     "ts"

    // ],

    //"exclude": [

    //     "js"

    // ]

}

有几个重要的属性需要解释一下：

• target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
• noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
• module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。
• removeComments：编译生成的JavaScript文件是否移除注释。
• sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
• outDir：编译输出JavaScript文件存放的文件夹。
• include、exclude：编译时需要包含/剔除的文件夹。

在 .vscode  里添加  tasks.json 文件

{

    // See https://go.microsoft.com/fwlink/?LinkId=733558

    // for thedocumentation about the tasks.json format

   "version": "0.1.0",

   "command": "tsc",

   "isShellCommand": true,

   "args": ["-p", "."],

   "showOutput": "always",

   "problemMatcher": "$tsc"

}

            以上配置完成后，使用 Ctrl+Shift+B 启动编译，如果VS Code的OUTPUT窗口没有任何异常信息显示，则表示编译成功。在配置的 Golang/TypeScript/   文件夹里将会生成编译后的JavaScript文件

调试文件

           切换到调试模式，点击配置按钮，选择Node.js环境。因为接下来的Demo演示都将在Node.js环境下进行。

         修改生成的launch.json文件内容，指定启动入口文件的路径

调试运行的结果：

到此结束！

然后是  重新弄一下目录的管理， 像下面这样

 http://blog.csdn.net/u010019717/