背景
vue3.0已经面世,但现有项目还是以2.0为主,本着熟悉和了解一下ts的目的,于是决定在现有的一个基于vue-cli3的vue2.0项目中引入ts试试水。在网上搜索了一下关于vue2.0引入ts的文章和教程,基本上大同小异,决定在此归纳总结一下。
小贴士:本文不涉及基于类的 Vue 组件即在.vue文件使用ts相关内容,因为我不会。。。(具体原因见最后总结部分)
引入方式一
1.安装依赖
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- @vue/eslint-config-typescript
- typescript
- ts-loader
2.vue.config.js添加配置
configureWebpack: config => {
// 扩展文件类型
config.resolve.extensions = [
'.tsx',
'.ts',
'.mjs',
'.js',
'.jsx',
'.vue',
'.json',
'.wasm'
]
// 添加ts加载rules
config.module.rules.push({
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}],
exclude: /node_modules/
})
}
3.添加ts配置文件tsconfig.json(与vue.config.js同级)
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noImplicitAny": false,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
4.添加ts模块声明文件xxx.d.ts(src目录下,文件后缀为“.d.ts”)
示例:shims-vue.d.ts(让ts能将 .vue 当成模块识别,同时ts通过import引入.vue文件时,文件需要加‘.vue’后缀)
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
5.配置eslint
.eslintrc.js
module.exports = {
// 关键配置
plugins: ['@typescript-eslint'], // 新增
extends: [
'plugin:vue/essential',
'@vue/typescript' // 新增
],
parserOptions: {
parser: '@typescript-eslint/parser', // 新增
}
}
或者 package.json
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript" //新增
],
"parserOptions": {
"parser": "@typescript-eslint/parser" // 新增
},
"rules": {}
},
引入方式二
vue-cli3项目根目录下,执行命令vue add typescript
,根据提示选择自己所需选项
我的选择:
注意点:执行完成后会默认生成一个helloword.vue的示例组件和重写app.vue,所以需要删除示例组件以及还原app.vue的内容
两种方式区别
依赖
两种方式新增的依赖基本相同,方式二中用@vue/cli-plugin-typescript代替了ts-loader
@vue/cli-plugin-typescript详情
mian.js
方式二默认将main.js重命名为main.ts,同时项目入口文件为main.ts
一些想法
虽然vue2.x官方文档提供了基于类的 Vue 组件相关方法,但个人感觉此类改动在实际项目中过于繁琐,得不偿失。所以vue2.0可以只针对现有项目中的js文件部分做引入,一方面完善代码 ,另一方面熟悉ts相关的知识。