我有一个想要逐步移植到TypeScript的应用程序。我希望能够：
*.ts文件导入Vue单个文件组件*.ts文件导入常规*.js文件中。*.js个文件中的*.ts个文件导入该应用是使用vue-cli 3.x设置的。我正在使用Airbnb ESLint配置。
大多数应用程序都是用JS编写的，但是所有新添加的模块都是用TypeScript编写的。
添加TypeScript之前，我的.eslint.js配置是：
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
};
在安装@vue/cli-plugin-typescript，typescript和@vue/eslint-config-typescript模块（使用vue add @vue/typescript命令之后），我在将*.ts文件导入{{ 1}}个文件。 这些只是ESLint错误，不是TypeScript或Babel编译错误。
因此，我对*.js的配置进行了如下修改：
.eslint.js我添加了module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
overrides: [
{
files: [
'**/*.js',
'**/*.vue'
],
parserOptions: {
parser: 'babel-eslint',
},
},
{
files: [
'**/*.ts'
],
parserOptions: {
parser: 'typescript-eslint-parser',
},
}
],
};
部分，以便根据文件扩展名应用不同的解析器。
我的override文件：
tsconfig.json因此，这是{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"allowJs": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
生成的标准tsconfig.json。我唯一更改的是vue-cli-有了这个，我可以导入没有allowJs: true类型定义的JS模块-从而使迁移更加容易。
这一切似乎都已正确配置，但偶尔会出现ESLint错误。似乎有时使用d.ts而不是babel-eslint来整理typescript-eslint-parser文件。我不知道如何复制它，但是我几乎可以肯定，当我将*.ts文件导入*.ts文件中时，它会发生。当我停止并重新启动Webpack（使用*.vue）时，错误通常消失了。