Search code examples
javascripttypescriptfrontendcpu-usagetypechecking

How to fix 'Typescript "Type checking in progress..." taking too long'?

Every time i run the project and change something in a file in my Vuejs front-end app which is using typescript, the typescript/webpack instantly tells compiled successfully like: DONE Compiled successfully in 635ms but the type checking will takes too long to tell there is error or not like: No type errors found Version: typescript 3.9.6 Time: 41131ms and it will use high cpu usage for this type checking which i think it is harm full for my laptop in a 8h/day developing.

enter image description here

I tried to set some flags in tsconfig.json as the docs says https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html:

    "incremental": true,
    "tsBuildInfoFile": "./buildcache/front-end",

But nothing has been changed , I also tried "watch":true , but it didn't for either. So I wonder how should we fix this problem with typescript type checking's problems( taking too long to check and high cpu usage)

Update

Here is my tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Update2

You can use this https://github.com/SeyyedKhandon/vuejs-persian-chat-scaffold as a reprex (clone typecheck branch), and as you can see in this simple app, it takes 2 seconds to type-check, which is not acceptable at all. Does it related to vue-composition-api plugin?

Update3

I found-out there is a flag named "skipLibCheck": true in tsconfig.json , which skips lib type checks which made type-checking 2x faster. but still its not good enough.

Solution

  • After spent lots of time on this problem, I decided to upgrade package.json, at the first step I've upgrade 3 packages including "@vue/composition-api": "^1.0.0-beta.3" -> "^1.0.0-beta.10" and "sass-loader": "^7.1.0" -> "^9.0.3" and "typescript": "~3.9.3", -> "~3.9.7", and suddenly the typechecking time decreases to 4s, which was very good promising.

    So, here is what i did :

    1.use "skipLibCheck": true flag in tsconfig.json , which skips lib type checks which will make type-checking 2x faster.

    1. if the problem still exists -> upgrade your package.json

    you can use yarn upgrade-interactive --latest but be careful about breaking changes(read the docs to fix you problems, in case of sass-loader upgrading if you have issue read https://stackoverflow.com/a/62844942/12666332)