打字稿类型检查结果耗时过长

Question

I'm converting a relatively new CRA app over to Typescript. The app is relatively new, though it is setup to be a quite complex app so it has everything from react-router, react-redux, to i18n libraries and various others.

Everytime I run 'npm run start', typescript can take anywhere between 20s to several minutes to typecheck each change, even if nothing actually changed.

When I run 'tsc --diagnostics', I get the following info:

Files:          5677
Lines:        118431
Nodes:           NaN
Identifiers:     NaN
Symbols:      192584
Types:         26014
Memory used: 242096K
I/O read:      8.44s
I/O write:     0.00s
Parse time:   14.28s
Bind time:     0.92s
Check time:    4.63s
Emit time:     0.00s
Total time:   19.84s

I'm wondering why Nodes and Identifiers are showing as NaN . I haven't been able to find anyone else having this issue when they run -diagnostics .

Can anyone offer any insight into this? I'm wondering if Typescript is hitting some snags compiling which is resulting in the slow typechecking.

I'm using Typescript v3.4.1 and VS Code v1.3.3 on MacOS High Sierra. I've tried deleting/install my node_modules folder to no avail, and tried adding the --incremental flag which is supposed to make Typescript cache buildinfo for future compilations to go faster, but that hasn't done anything either.

my package.json dependencies and devDependencies

dependencies:

    "axios": "^0.18.0",
    "browser-locale": "^1.0.3",
    "date-fns": "^1.30.1",
    "i18next": "^15.0.9",
    "i18next-browser-languagedetector": "^3.0.1",
    "prop-types": "^15.6.2",
    "react": "^16.8.4",
    "react-app-polyfill": "^0.2.2",
    "react-dom": "^16.8.4",
    "react-i18next": "^10.6.2",
    "react-loadable": "^5.5.0",
    "react-redux": "^7.0.0-beta.0",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "react-transition-group": "^2.5.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "source-map-explorer": "^1.6.0",
    "styled-components": "^4.2.0",
    "typeface-roboto": "^0.0.54",
    "typescript": "^3.4.1",
    "use-redux": "^2.2.0"

devDependencies

    "@types/material-ui": "^0.21.6",
    "@material-ui/core": "^3.8.2",
    "@material-ui/icons": "^3.0.2",
    "@types/axios": "^0.14.0",
    "@types/date-fns": "^2.6.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/react": "^16.8.12",
    "@types/react-dom": "^16.8.3",
    "@types/react-loadable": "^5.5.1",
    "@types/react-redux": "^7.0.6",
    "@types/react-router": "^4.4.5",
    "@types/redux": "^3.6.0",
    "@types/redux-thunk": "^2.1.0",
    "@types/styled-components": "^4.1.12",
    "@types/react-router-dom": "^4.3.1",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.8.0",
    "jest": "^23.6.0",
    "jest-dom": "^3.0.1",
    "prettier": "1.15.3",
    "react-axe": "^3.1.0",
    "react-testing-library": "^5.4.4",
    "redux-devtools-extension": "^2.13.7",
    "redux-mock-store": "^1.5.3"

Answer 1

There seems to be a performance problem regarding the use of typescript > 3.3.4000 and styled-components .

If you read up on this issue thread , the preliminary solution seems to be to downgrade typescript to 3.3.4000 . It worked for me in that it brought VS Code up to speed again when checking types while editing.

In the near future, a fix for this on either styled-components side or typescript is to be expected.