首先,项目的需求是,基础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使用,保证工具类的质量。

Logo

前往低代码交流专区

更多推荐