WebStorm开发TypeScript的相关设置

最新推荐文章于 2024-08-01 10:09:42 发布

飞天代码

最新推荐文章于 2024-08-01 10:09:42 发布

阅读量1k

点赞数

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/100715185

版权

typescript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近公司采用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创建一个。
在这里插入图片描述