When I kick off my Typescript application using tsc -b -w
, I always encounter an issue with @typescript-eslint
not reacting to file changes accurately. It flags invalid types/syntax errors where there are none. Restarting the process sometimes doesn't resolve the problem either. The only workaround is to make some whitespace edits in the file and save it again, hoping that this time it behaves as expected.
For instance:
I recently defined an interface in ./types.ts
:
export interface IHaveWorkspace {
workspace: Workspace;
}
Then, I imported and tried to utilize this interface in index.tsx
. But when attempting to access myObj.workspace
, I'm greeted with these errors:
[1] src/components/Navigation/index.tsx
[1] Line 26:29: Unsafe assignment of an any value @typescript-eslint/no-unsafe-assignment
[1] Line 26:29: Unsafe member access .workspace on an any value @typescript-eslint/no-unsafe-member-access
Interestingly, it does not flag any issues related to the interface itself. It appears to struggle grasping the interface's types, without raising other errors such as import-related ones. Neither saving the files nor restarting the process seems to work. After introducing some whitespace modifications and subsequent saves, the errors mysteriously vanish.
Configuration Details:
Just for your reference...
.eslintrc.js
:
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'eslint-plugin-react', 'eslint-plugin-react-hooks'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'prettier',
'prettier/@typescript-eslint',
],
rules: {
'indent': ['error', 2],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': ['error', 'always'],
},
env: {
amd: true,
},
parserOptions: {
project: './tsconfig.json',
tsconfigRootDir: __dirname,
},
};
And tsconfig.json
:
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"allowJs": true,
"declaration": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"lib": [
"es2015",
"dom"
],
"skipLibCheck": true,
"rootDir": "src",
"baseUrl": "src",
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}