最近公司采用typescript来编写组件,一开始都是手动tsc来将ts文件编译成js文件。用了一天后,都要疯了,还是直接设置webstorm来自动生成js吧。
第一步:安装node就不介绍了
第二步:当然就是安装typescript了
npm install typescript -g
安装完了,执行tsc -v看下版本
第三步:配置tsconfig.json文件
我的文件内容大概如下:
{
"compilerOptions": {
"target": "es5",//编译结果
"module": "esnext",
"strict": true,
"jsx": "preserve",
"removeComments": true,
"alwaysStrict":false,//是否需要严格模式
"importHelpers": false,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"noImplicitThis": false,//当this表达式的值为any类型的时候,生成一个错误。
"sourceMap": false,
"baseUrl": ".",
"types": [
],
"outDir": "src/js",
"paths": {
"@/*": [
"src/ts/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/ts/**/*",
"typings/globals/jquery/index.d.ts"
],
"watch": false,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
第四步:打开Webstorm,为TypeScript文件更改编译设置,File->Settings->File Watchers->TypeScript,这里我们需要选择TypeScript,如果第一次进来,应该是选择不到的,则选择custorm创建一个。
第五步:配置Watchers
//tsc安装目录
Program:C:\Users\Administrator\AppData\Roaming\npm\tsc
//编译的目标类型
Arguments:–sourcemap --target “ES5”
Output paths to refresh: F i l e N a m e W i t h o u t E x t e n s i o n FileNameWithoutExtension FileNameWithoutExtension.js: F i l e N a m e W i t h o u t E x t e n s i o n FileNameWithoutExtension FileNameWithoutExtension.js.map
Working directory: F i l e D i r FileDir FileDir
第六步:设置typescript自动编译,勾选下图圈红线的位置。
到此为止就配置完了,在编辑器里面编写ts就会生成相应的js文件。