'.js' files in TypeScript - why?!

typescript is making you change the way that you write Imports in JavaScript and it's making you change to I think the more correct way let me tell you about that so imagine that you're writing like an import like this where we have import example from Foo now when you import example from Fu you're super used to this syntax right like this is how bundles have worked for the last few years or so you might get an error and the error you get is going to be relative Import Parts need explicit file extensions in es Imports when module resolution is node 16 on node next so you think okie dokie how on Earth do I get around that so you add because you're importing from a typescript file you're going to add a TS extension to that thing and you say Okay import example from f. TS but you get another error an import path can only end with a TS extension when allow importing TS extensions is enabled so this doesn't feel right the actual solution is to add ajs extension to the path so you're kind of referencing a file that doesn't exist yet that does not seem right at all but yet that makes the error go away so you've gone from a setup that you were kind of used to here import example from just Fu and you understand that means foo.js down to a food. JS explicit reference now there's a couple of reasons for this so the first one is that actually doing it like this means that the thing consuming your code can actually operate a lot faster now this is designed to be run in node right and node it doesn't actually want to bother with these kind of extensions with the just the foo because Fu might it might mean like uh foo.js or it might mean uh Fu index.js and this is something that bundlers do you know like es build and webpack and all those sorts of things but it's actually something that typescript or node doesn't want to care about it just wants to reference a specific file and that means that startup time on node applications can be improved a lot with this so this is why it wants you to write JS extensions but why Notts extensions well if you think about it your compiled code is going to be written in JS right and so if you were to actually like turn on allow importing TS extensions and import a bunch of TS extensions then run that code in node well node is not going to be able to see your TS extensions because they don't exist in the JS world so by doing this typescript is telling you okay you have to focus on your compiled output think about the JS that you're exporting there this is kind of annoying it's kind of a paper cut but I get why they're doing it right and if you don't want to use JS extensions then you should change your TS config.js to instead of module resolution um node next you've got to change it to module resolution bundler then it's going to allow you to add those kind of imports without adding the extension and that's because bundlers like es build s swc they kind of bundle your code in a way that is sort of more powerful than typescript it does a few more Transformations and it does a bit of this Logic for you and yeah that's kind of why you need to add all this stuff here I've got a bit more information on this article which I'll post below and I'll see you very soon

Channel: Matt Pocock

Views: 20,024

Keywords: typescript, web development, advanced typescript

Id: 8ORIzvgNWhU

Length: 3min 15sec (195 seconds)

Published: Tue Oct 10 2023