ts自动编译声明文件_webstorm配置TS运行时环境与自动给编译

webstorm配置TS运行时环境与自动编译

Step 1 安装TypeScipt

$ npm i typescript -g

Step 2 设置webstorm language

Step 3 设置File Watch

添加file watch类型

file watch详细配置

output path说明：$FileDir$$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

Step 4 tsconfig.json

{

"compilerOptions": {

"module": "esnext",

"target": "es5",

"sourceMap": true,

"lib": [

"dom",

"dom.iterable",

"esnext"

],

"allowJs": true,

"skipLibCheck": true,

"esModuleInterop": true,

"allowSyntheticDefaultImports": true,

"strict": true,

"forceConsistentCasingInFileNames": true,

"moduleResolution": "node",

"resolveJsonModule": true,

"noEmit": true,

"jsx": "react",

"isolatedModules": true

},

"exclude": [

"node_modules"

],

"include": [

"src"

]

}

End

到这里，整个踩坑就结束了，TS配置应该可以自动编译了。

如何直接编译.ts文件呢？

下载ts-node

$ npm i ts-node -g

命令行运行

$ ts-node xxx.ts

webstorm如何配置？

因为这样配置会导致，中文编码乱码，个人用过很多方法，但是都基本无效。所以此处不做总结。