Does typescript increase the bundle size of a project?

#help

Top comments (6)

it depends on how it's used
optional chaining will have some effect,
if you don't use tslib, there could be significant duplication of code across a large project
also typescript prefers certain constructs like typeguard functions, which a javascript developer wouldn't necessarily have written

edit: that being said, typescript can do some work in types which javascript would have had to do at run time, so there could be some byte-savings there, if conscientiously applied

EricGeek • Sep 24 '20 • Edited

Very much so if you're doing a small project and your target doesn't match the features you're using. One of the first things I had to figure out was why typescript was transpiling async/await and all other post-ES5 code into ES5 compatible code even though my project file was specifying a target of es2020, and for a small project, that was tripling the size of the necessary JavaScript.

In case anyone is curious, the problem turned out to be a very old version of typescript installed as part of a MS Dev SDK that had been refusing to uninstall and was winding up in the path ahead of the 4.0.3 version I had installed myself. It didn't know about projects, so was ignoring my tsconfig.json.

For the most part, as long as the actual Typescript you write doesn't use features that your target ES version doesn't support, then the resulting JavaScript will be about the same size as hand written JavaScript doing the same thing using the same features. There are options you can set that can balloon the size of the bundle (inline source maps, anyone?), but for the most part, you have to turn them on yourself. You can also set a few options that could make the bundle a little smaller if you're not minimizing the bundle somewhere else, but I can't think of any that would actually make the bundle smaller than a minimized native-JS bundle.