Typescript: 3.4.1 tsc works 20! times slower than 3.3.4

[EugeneDraitsev]

TypeScript Version: 3.4.1

Search Terms:

tsc, slow, typecheck, 3.4.1, styled-components

Code

I have simple typecheck script in my package.json:

"typecheck": "tsc --project tsconfig.json --noEmit --skipLibCheck",

It work 20 times slower on 3.4.1, than on 3.3.4000 (91s vs 4.5s)

It's almost impossible to work with that, because IDE almost can't analyse anything in this conditions. I have same behaviour on MacOS 10.14.3 and on Windows 10

My tsconfig file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

EDIT: I found the reason of this slowness - styled-components, so faster way to reproduce this issue: (also online demo added below)

yarn create react-app my-app --typescript
cd my-app
yarn add styled-components @types/styled-components 

add to src/index.tsx:

import styled from 'styled-components'
const Styled = styled.div``

add in package json tsc script in scripts section:

"tsc": "tsc"

run yarn tsc

if you'll downgrade typescript version to 3.3.4000 or comment 2 lines of code in src/index.tsx it will work 20 times faster

Expected behavior:

It should works with same acceptable time

Actual behavior:

It works 20 times slower

Playground Link:

I will try to create reproducible example, but I have pretty simple react CRA 2.0 application.

EDIT: Reproducible demo here: https://repl.it/@EugeneDraitsev/slow-tsc-341

3.3.4000:

3.4.1:

Related Issues:

[ulrichb]

Same here. I also got some significant performance hit in my front-end build (and I'm also using styled-components).

[jazzfog]

Same here, rollback to TypeScript 3.3.x temporary fixed the problem.

[quolpr]

Same issue here, switched back to 3.3.x

[ulrichb]

Maybe related: #29949 and #30449

[denis-sokolov]

I have investigated this with TypeScript 3.4.1, and the issue does not show up (for me) with @types/styled-components v4.1.10, but does happen with @types/styled-components v4.1.11. The change between these two versions is related to distributing over union types. Perhaps this helps figure it out.

[dsabanin]

I tried downgrading to @types/styled-components v4.1.10, but still see unbelievable slowdown on TS versions >= 3.4.0.

It's a big project, with lots of dependencies so it's hard to pinpoint what exactly is triggering it, but right now compilation is so slow that development is nearly impossible – 80 seconds for every compile, 75 secs in type checking. WebStorm can't even recompile the code because of the timeouts. Fans are spinning like crazy on i7, 4x2 HT cores, 42 GB RAM, 4GB node heap iMac. I don't think we can wait until 3.5.0 for the fix, it would just mean that we would just need to skip 3.4.0 entirely. Disabling strict function type checking is a very radical decision for a complex project.

[ulrichb]

I can confirm that a downgrade to @types/[email protected] seems to solve the perf issue.

@weswigham So could you maybe revert the concerned commit (probably 6605356e) in the styled-components typings to workaround this issue?

[EugeneDraitsev]

@ulrichb I checked downgrade seanario to @types/[email protected] and it still works slower with TypeScript 3.4, but at least not 20times slower, only 2.5 times:

@types/[email protected] and [email protected]:

@types/[email protected] and [email protected]:

[ulrichb]

My observations of the front-end build times (react-scripts build) in a mid-size project:

• TS 3.4.4000: ~ 2 min 20 sec
• TS 3.4.1 and @types/styled-components 4.1.12: ~ 3 min 40 sec (+ 1 min 20 sec)
• TS 3.4.1 and @types/styled-components 4.1.10: ~ 2 min 40 sec (+ 20 sec)

@ TS Team: Note that my problem is not really the additional ~1 min 20 sec in the build script, but that my IDE (WebStorm) time-outs during type-checking => so I don't get any red squiggles in TSX modules containing styled-components (which concerns almost my whole front-end code base) :/ A downgrade to styled-components 4.1.10 solves/workarounds this issue.

[EugeneDraitsev]

@ulrichb you compared build time, but not tsc time. The main problem here right now, that typecheking with IDE or by cli works significantly slower, or 2-2.5 times slower if you will use @types/styled-components 4.1.10. On mid-size project I have ~4s vs ~12s on @types/styled-components 4.1.10. This timings are still kind of workable, but it should be the same as on 3.3.4000 (or at least +5-20% of it)

[voliva]

Yesterday, without looking for the issue in this repo, I opened this issue in @types/styled-components https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34391.

@michsa saw that the performance change was done between the builds [email protected] (working normally) and 3.4.0-dev.20190226 (taking a long time)

Maybe it's worth to cross the info on both threads to find down the root of this issue.

[eps1lon]

That's really unfortunate. The fix likely responsible for the performance regression was applied before 3.4 was released. We couldn't detect major performance regressions so it seemed fine.

The same fix was also applied to react-router (withRouter), @emotion/styled and @material-ui/core@next (withStyles). Can somebody who uses those packages confirm if 3.4.1 has the same performance issues with those packages?

[weswigham]

FYI, I've done some preliminary investigation, and the performance impact is caused by a large union of types (eg, the union of all possible jsx components) being pushed thru multiple layers of distributive conditionals with nested infer types (the constraints on the generics within @types/styled-components do this by pushing keyof JSX.IntrinsicElements thru React.ComponentPropsWithRef and then using it a bunch). The distribution has a multiplicative effect on work done. I'm still researching a performance fix in the compiler itself; however at least within @types/styled-components, I believe you can prevent the perf regression from triggering by removing PickU (using Pick instead), and explicitly writing a _single_ distributive conditional around StyledComponentProps (rather than sprinkling extra distributions in _everywhere_).

[qmcree]

I am also experiencing a significant slow-down after upgrading TypeScript from 3.3.4000 to 3.4.1. As a result, live IDE type checking is almost inoperable. Also have [email protected] and @types/[email protected] installed.

[mrGibi]

Yeah, count me in too.
I have tested earlier versions of TS (3.4.0-dev*) and for me last version that didnt make VSCode inoperable was [email protected], but I reverted back to [email protected] (metioned by @voliva) as its seems to be faster than 20190327 (faster in terms of working with typescript in VSCode: lookups, highlighting errors, etc.).

[kapral18]

Same here with "typescript" => "3.4.1" and "styled-components" => "4.2.0", my vscode hint popups just hang up while trying to infer any types for minutes.

[Veetaha]

Affiliated issue here, I am experiencing compile-time heap overflow

[ScreamZ]

Catastrophic since new VsCode release which ship with 3.4.1 by default, It took me hours to figure out that 3.4.1 was the issue.

[eps1lon]

typescript-bot (TypeScript Bot) 2 minutes ago
I just published @types/[email protected] to npm.

-- https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34499#issuecomment-480225465

[weswigham]

Hey, anyone on the old version of @types/styled-components, based on my own testing, it seems like #30637 actually is what fixed this on master - meaning the _current_ typescript@next _already_ contains a fix. Would love some feedback on if that's true for your projects which are more complex than a just-initialized CRA template. But in other, more important news: #30637 is a breaking change (though we don't think it should _actually_ unduly affect anyone unless it's pointing out real bugs!), meaning we will _not_ be backporting it to 3.4 (😲), at least as-is. So if your @types/styled-components version is locked to the version with bad perf in 3.4, you'll want to try to use the TS nightly, at least for now. Likewise, if your TS is locked to 3.4, you'll want to either downgrade to an older version of @types/styled-components, or upgrade to a newer version of @types/styled-components that was pushed today that has the types which triggered bad perf on 3.4 removed.

[eps1lon]

@weswigham Will the perf fix be included in the next release? Would like to re-introduce the change in @types/styled-components if only 3.4.1 has bad perf with it.

[stramel]

@weswigham I checked out next and it seems like it significantly sped up the build times (1.67 mins to 9.72s). Maybe some others can chime in with their results too?

[weswigham]

@weswigham Will the perf fix be included in the next release?

3.5, yes. 3.4 series, no. #30637 isn't a bugfix level change, even though it does fix this - it has other major typesystem effects which we're not comfortable publishing as a patch.

[cbdeveloper]

EDIT: Installing @types/styled-component didn't solve my problem. But I downgraded VSCode from 1.33 to 1.32 and now it's fixed.

---

I was having problem with slow intellisense on VScode on my JS (React) project. I am also using styled-components v^4.1.3.

Not sure if this is going to help, but I can confirm that all issues are now fixed, since I've installed @types/styled-components v^4.1.14 (I installed the latest). The intellisense now is perfectly responsive and very fast. I don't have typescriptinstalled globally or locally.

Not sure, but I think this issue began when updated to VScode 1.33. Auto-updates are on, though, and as it slowly started to bother me, it might have been happening since an earlier version, but not too long ago.

Version:          Code 1.33.0 (0dd516dd412d42323fc3464531b1c715d51c4c1a, 2019-04-04T15:14:28.026Z)
OS Version:       Windows_NT x64 10.0.17763
CPUs:             Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz (4 x 3000)
Memory (System):  7.96GB (2.88GB free)
VM:               0%
Screen Reader:    no
Process Argv:
GPU Status:       2d_canvas:                    enabled
                  checker_imaging:              disabled_off
                  flash_3d:                     enabled
                  flash_stage3d:                enabled
                  flash_stage3d_baseline:       enabled
                  gpu_compositing:              enabled
                  multiple_raster_threads:      enabled_on
                  native_gpu_memory_buffers:    disabled_software
                  rasterization:                enabled
                  surface_synchronization:      enabled_on
                  video_decode:                 enabled
                  webgl:                        enabled
                  webgl2:                       enabled

CPU %   Mem MB     PID  Process
    2       84   10412  code main
    0       66    4036     shared-process
    3       97   15368     gpu-process
    0      187   16180     window (undefined)
    3      247   17476     window (ΓùÅ AddProductPage.js - myProject - Visual Studio Code)
    0        9    6456       winpty-process
    0       72    4176         C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe
    0        8   13552           C:\WINDOWS\system32\cmd.exe /c ""C:\Users\MAINUSER\AppData\Local\Programs\Microsoft VS Code\bin\code.cmd" --status"
    0       36   15276             electron_node cli.js
    1       56   17520               "C:\Users\MAINUSER\AppData\Local\Programs\Microsoft VS Code\Code.exe" --status
    0       13    6220         console-window-host (Windows internal process)
    0       11    6828       watcherService
    0       14    6896         console-window-host (Windows internal process)
    0       15   13864       electron-crash-reporter
    0       94   16468       extensionHost
    0      214    6792         electron_node tsserver.js
    0       47   15296           electron_node typingsInstaller.js typesMap.js
    0       35   12680         "C:\Users\MAINUSER\AppData\Local\Programs\Microsoft VS Code\Code.exe" "c:\Users\MAINUSER\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\json-language-features\server\dist\jsonServerMain" --node-ipc --clientProcessId=16468    0       65   14308         electron_node eslintServer.js

Workspace Stats:
|  Window (ΓùÅ AddProductPage.js - myProject - Visual Studio Code)
|    Folder (myProject): 190 files
|      File types: js(158) json(9) otf(4) png(3) html(3) ico(2) gitignore(2)
|                  rules(2) css(2) editorconfig(1)
|      Conf files: package.json(2) jsconfig.json(1)

[qmcree]

Although performance was improved in the newer versions, there is still a significant slowdown running tsc. Benchmarks:

[email protected] and @types/[email protected]: ~7.5 seconds
[email protected] and @types/[email protected]: ~3 seconds

[stramel]

@cbdeveloper @qmcree The main fix should be released in 3.5, you can try the next tag for now to see if it works better.

That's the one I tested on and it was a huge improvement.

[EugeneDraitsev]

Same ~x2 time slowdown for me too:

[email protected] and @types/[email protected]: ~8.80s.
[email protected] and @types/[email protected]: ~18.01s
typescript@next and @types/[email protected]: ~15.40s.

@weswigham Should we reopen this issue or open another one?

[weswigham]

I think https://github.com/Microsoft/TypeScript/issues/30819 should already cover the lesser perf regression.

[pie6k]

Autcomplete was so slow it was very hard to work on anything

Changing ts version for vs code helped.

[natew]

Is there a ticket to track for the "second" fix that should make this work?

Having to choose between incremental builds or slow type checks is tough! Would be interested in following progress.

[jewseppi]

I have tried all the above solutions and a few other version combinations all with the same result; either my system crashes or I get a very slow build process.

yarn start takes about 5 min and my production build takes almost 1 hour; it's quite consistent.

Currently on the following versions.
"@types/styled-components": "4.1.10",
"react-scripts": "3.0.0",
"typescript": "3.3.4000",

[weswigham]

@jewseppi can you get better performance with typescript@next?

[deftomat]

@jewseppi Is it an issue with tsc or just with create-react-app as you mentioned in https://github.com/facebook/create-react-app/issues/7003 ?

[jewseppi]

@deftomat this is related to the same issue; sorry after I realized this issue was closed I created #7003

[jewseppi]

@weswigham would I have to eject to get access to a babel.rc

[weswigham]

Maybe? If you're using CRA,I don't think so - you should just be able to update the version of what you've installed.

[getsaf]

@jewseppi can you get better performance with typescript@next?

I tried typescript@next which pulled down [email protected] and this does resolve the performance issue. Guess we'll wait for the 3.5 release before we upgrade TypeScript.

[fabb]

Do we know a rough timeframe for 3.5 release?

[MartinJohns]

@fabb: May 2019, as per roadmap.

[FishOrBear]

I am using [email protected]

tsc --noEmit

Still a memory leak and crash.

[weswigham]

Still a memory leak and crash

You have a repro you can share?

[FishOrBear]

@weswigham
test.zip

I think it may be a similar problem.

https://github.com/microsoft/TypeScript/issues/31227

[weswigham]

@FishOrBear Your crash is fixed in the latest nightlies and the rc.

[FishOrBear]

@weswigham
Thank you, I have tried the latest package, now there is no problem.

[wilcoxmd]

Hi there, I'm trying to fix this issue myself and having a hard time understanding which versions of @types/styled-components, etc. to use to solve the problem. I'm currently using:

[email protected]
@types/styled-components@^4.1.14
styled-components@^4.2.0
typescript@^3.5.1

I'm using VS Code and still having some noticeable delays for things like underlining type errors in files that use styled-components. Commenting out any styled components removes the delay. Am I missing a package upgrade somewhere?

[wilcoxmd]

Actually I just figured it out. My VS Code workspace was still using 3.4.5. Changing the workspace to use 3.5.1 fixed the problem.

[cyrus-za]

Having a similar issue. See https://github.com/facebook/create-react-app/issues/7003

[weswigham]

If you're still on an older version of TS that has the problem, you're still going to have the issue ❤️

I'm going to lock this issue - anyone with a perf problem on the _latest_ version of TS has a distinct and different problem and should open a new thread. Anyone finding this from google search results and is looking for a solution - try using TS 3.5+ (and then if your problem persists, let us know in a new issue), or try downgrading your @types/styled-components version to 4.1.14 (if you must stay on an older version of TS), thanks~