typescript

vscode 下的 typescript 自动编译方法

 

1、首先进入nodejs里安装typescript

1	npm install -g typescript

2、创建相应的项目目录，打开nodejs 进入当前项目目录

3、创建tsconfig.json文件

1	tsc --init

4、打开tsconfig.json文件修改和删除相应配置（如果想快速修改配置，请复制下列配置）

1 2 3 4 5 6 7 8 9 10

{   "compilerOptions": {    "target": "es5",    "noImplicitAny": false,    "module": "amd",    "removeComments": false,    "sourceMap": false,    "outDir": "src/js"//你要生成js的目录   } }

　

5、点击菜单 任务-运行任务，点击 tsc:构建-tsconfig.json 

6、此时src目录下会自动生成js/test.js文件了；打开test.js文件，点击编辑器的拆分编辑器菜单，即把js和ts文件拆开，自行编辑ts文件的时候，右侧会自动生成js代码。

（如果此时不会自动生成js代码，点击菜单 任务-运行任务 点击 tsc:监视-tsconfig.json 然后就同步了; 或者tsc -w运行） 

//tsconfig.json指定了用来编译这个项目的根文件和编译选项
{
  "compilerOptions": { //compilerOptions:编译选项,可以被忽略，这时编译器会使用默认值
    "module": "commonjs", //指定生成哪个模块系统代码
    "declaration": false,
    "noImplicitAny": true, //不允许any类型
    "removeComments": true, //编译成JS时,去除注释
    "noLib": false,
    "allowSyntheticDefaultImports": true, //允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示，仅为了类型检查。
    "emitDecoratorMetadata": true, //给源码里的装饰器声明加上设计类型元数据
    "experimentalDecorators": true, ///启用实验性的ES装饰器
    "target": "es6", //输出文件的格式
    "sourceMap": true, //用于debug ,生成相应的.map文件
    "allowJs": true,//
    "outDir": "./dist",//输出JS文件目录
    "baseUrl": "./src", //解析非相对模块名的基准目录
  },
  "include": [ //包含编译的文件目录
    "src/**/*"
  ],
  "exclude": [//排除的需要编译的文件目录
    "node_modules",
    "**/*.spec.ts"
  ]
}