基于vue2 js项目上添加ts的步骤

最新推荐文章于 2024-09-20 17:12:29 发布

kitty_lin

最新推荐文章于 2024-09-20 17:12:29 发布

阅读量4.1k

点赞数 3

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/u011785537/article/details/130557729

版权

文章详细介绍了如何在一个基于vue-cli5构建的Vue2js项目中添加TypeScript支持，主要用于工具类的强校验，同时结合eslint进行代码检查。步骤包括安装相关依赖、配置tsconfig.json、修改vue.config.js以及调整.eslintrc.js来支持TypeScript。

摘要由CSDN通过智能技术生成

首先，项目的需求是，基础vue2 js项目上添加ts，使用ts主要是应用于工具类的强校验上，在vue上并未使用，同时项目中使用了eslint作为代码检查工具，本项目使用的是vue-cli5创建的模板工程。

第一步，安装相关依赖 typescript，ts-loader， @typescript-eslint/eslint-plugin， @typescript-eslint/parser

npm install typescript --save-dev

npm install ts-loader --save-dev

npm install @typescript-eslint/eslint-plugin --save-dev

npm install @typescript-eslint/parser --save-dev

第二步，添加 tsconfig.json，里面的配置（根据需要调整）参考如下

{
  "compilerOptions": {
    // 允许js
    "allowJs": true,
    // 支持any
    "noImplicitAny": false,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    // 导入js
    "src/**/*.js",
    "src/**/*.ts",
    "types/*.ts"
  ],
  "exclude": ["node_modules"]
}

第三步，配置 vue.config.js，在configureWebpack属性下配module和resolve，参考如下：

configureWebpack: {
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"]
              }
            },
            "ts-loader"
          ],
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [".ts", ".js"]
    }
  }

修改 .eslintrc.js ，在 overrides 下添加ts相关配置，数组第一个是自带的，第二个是添加的，参考如下：

overrides: [
    {
      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
      env: {
        jest: true
      }
    },
    {
      files: ["*.ts"],
      parser: "@typescript-eslint/parser",
      plugins: ["@typescript-eslint"],
      parserOptions: {
        project: "tsconfig.json"
      },
      extends: ["plugin:@typescript-eslint/recommended"],
      settings: {
        "import/resolver": {
          node: {
            extensions: [".d.ts", ".ts"]
          }
        }
      }
    }
  ]

完成以上几步后，可以将src/utils/ 目录下的文件从js调整为ts使用，保证工具类的质量。