我有一个主要是打字稿的存储库,但是我也有一些javascript浮动,主要用于与构建相关的东西,这些东西永远不会部署。话虽如此,我仍然希望对它进行整理,并能够更漂亮地对其进行格式化。但是,我现在在javascript文件中收到与打字稿相关的警告,告诉我需要输入内容,即使它是.js
它首先会抱怨文件需要成为es6模块,然后如果我将其转换为es6模块,它将抱怨功能不是类型。
摆脱这些问题的最佳解决方案是什么?
示例文件utils.js
:
'use strict'
const log4js = require('log4js') // <-- Require statement not part of import statement.eslint(@typescript-eslint/no-var-requires)
var getLogger = function (category) {
log4js.configure({
appenders: { out: { type: 'stdout' } },
categories: { default: { appenders: ['out'], level: 'debug' } },
})
return log4js.getLogger(category)
}
const utils = {
getLogger: getLogger,
}
module.exports = utils
转换后:
'use strict'
import { configure, getLogger as _getLogger } from 'log4js'
/*
Warnings on the following line
Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types
Argument 'category' should be typed.eslint@typescript-eslint/explicit-module-boundary-types
*/
var getLogger = function (category) {
configure({
appenders: { out: { type: 'stdout' } },
categories: { default: { appenders: ['out'], level: 'debug' } },
})
return _getLogger(category)
}
const utils = {
getLogger: getLogger,
}
export default utils
基本文件夹结构:
src
- components
comp.ts
- redux
file.ts
...etc
build-system
utils.js
style.js
tasks.js
gulpfile.js
.eslintrc.js
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["es6", "dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noFallthroughCasesInSwitch": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"build-system",
"src",
".eslintrc.js",
"gulpfile.js"
],
"exclude": ["node_modules"]
}
.eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser',
env: {
es6: true,
node: true,
browser: true,
},
parserOptions: {
ecmaVersion: 6,
tsconfigRootDir: __dirname,
project: './tsconfig.json',
ecmaFeatures: {
jsx: true,
},
},
plugins: ['react', 'react-hooks', '@typescript-eslint'],
rules: {
'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': ['error'],
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
],
}