WebStorm开发TypeScript的相关设置

谁借莪１个温暖的怀抱￠ 2024-04-18 19:18 66阅读 0赞

最近公司采用typescript来编写组件，一开始都是手动tsc来将ts文件编译成js文件。用了一天后，都要疯了，还是直接设置webstorm来自动生成js吧。

第一步：安装node就不介绍了  
![在这里插入图片描述][20190910222805297.png]  
第二步：当然就是安装typescript了

npm install typescript -g

安装完了，执行tsc -v看下版本  
![在这里插入图片描述][20190910222909428.png]  
第三步：配置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创建一个。  
![在这里插入图片描述][20190910223222331.png]

第五步：配置Watchers  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
//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自动编译，勾选下图圈红线的位置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]

到此为止就配置完了，在编辑器里面编写ts就会生成相应的js文件。

[20190910222805297.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/01d972748be54b8f997960f0bbb59644.png
[20190910222909428.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6c0a9f5647cf483a8fb9abb188d893de.png
[20190910223222331.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7b7d501152ac488ead913ca2cfd780ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/054b3fbf4d3e4778bc60872cf75b2717.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/41b04428880443469d65ff1abaeb4ae6.png