基于vue2 js项目上添加ts的步骤
基础vue2 js项目上添加ts,使用ts主要是应用于工具类的强校验上。
·
首先,项目的需求是,基础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使用,保证工具类的质量。
更多推荐
已为社区贡献2条内容
所有评论(0)