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/styled-components@4.1.10 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/styled-components@4.1.10 and it still works slower with TypeScript 3.4, but at least not 20times slower, only 2.5 times:

@types/styled-components@4.1.10 and typescript@3.3.4000:

@types/styled-components@4.1.10 and typescript@3.4.1:

[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 DefinitelyTyped/DefinitelyTyped#34391.

@michsa saw that the performance change was done between the builds typescript@3.4.0-dev.20190223 (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 styled-components@4.2.0 and @types/styled-components@4.1.12 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 typescript@3.4.0-dev.20190327, but I reverted back to typescript@3.4.0-dev.20190223 (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

[deftomat]

@jewseppi Is it an issue with tsc or just with create-react-app as you mentioned in facebook/create-react-app#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 typescript@3.5.0-dev.20190509 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 typescript@3.5.0-dev.20190512

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.

#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:

react-scripts@3.0.1
@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 facebook/create-react-app#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~