Don't put your types in .d.ts files

there is a thing that a lot of app developers do that I do not understand and I want them to stop it's to do with how app developers use declaration files in typescript I'm going to show you what they do and why the typescript team themselves absolutely hate it if you don't know in typescript there are two ways that you can declare your types you can either put them in a DOT TS file or a DOT d.ts file a DOT d.ts file is what's called a declaration file and a DOT TS or a TSX file is just what we'd call a normal module let's say that we're inside a project here where we've got my code here which is just a function that takes in an input of my code input we've got some runtime code here and we've got some type code here so you might think it's kind of normal just to separate the two we can take our type here create a new file called types.ts export it and then re-import it in index.ts you notice I'm using a DOT TS file for the types here that's because types is just another module like any other module but this is where so many developers go wrong instead of making a DOT TS file they'll often make a DOT D dot TS file and this on the surface looks like it behaves exactly the same we can still Import and Export in fact it even looks like we can add runtime code to this too that's great so it looks like on the surface the d.ts file is behaving just like a normal module but it's not dot d dot TS files are not supposed to be used for this purpose let me show you exactly why they're so bad first let's take a look at the TS config file we've got an option here called skip lib check true which is one that I recommend you turn on and this skips type checking on all.d.ts files if we disable skip lib check true then we'll actually start to see the errors inside Dot d.ts and we're seeing here that we can't add runtime features into this space even if we add something relatively typescript native like an enum it's still going to yell at us so this means that the only thing that can be in dot d.ts files are types so what are declaration files actually used for they can't contain runtime features they can only contain types what's the point of them well typescript uses them alongside JavaScript files to under understand and type those JavaScript files I've just installed a package called xstate and inside node modules you can see that here xdate inside lib has all of the JS files but all of the dot d.ts files just next to them this means on one side we've got the actual JavaScript and on the other side we've got the typescript that describes it if we were to put these in just normal.ts files it wouldn't work they have to be.d.ts files and by the way this is why we have skip lib check true is that we don't want to spend time actually checking all of the types in these node modules and side note that's actually my number one typescript performance tip is turning on skip lib check true declaration files also have some really surprising behavior that you might not be aware of if I declare like a maybe type here which is going to be null or undefined then this actually ends up being available in all other files in my project it puts things into the global scope so I can say type example equals maybe and that maybe is coming from my types.d.ts file this is what d dot TS files are for putting things into the a global scope making Global alterations to interfaces they're not modules they're not for putting your types in in fact the typescript team has specifically written about this and I'll link it in the description below I asked on Twitter if people do this and about 40 of all the developers who replied which was nearly 10 000 devs said yes this is what I do and honestly I cannot believe that because I just don't understand why you wouldn't put your types in a normal module like everything else if you do want to do Global alterations to scope them by all means user.d.ts files but don't use them for your regular modules I have another video you can watch just here and a little face that you can subscribe to here I've been that Poco you should check out total typescript.com which is where I put all of my typescript learnings all the stuff I've been researching and finding out and I put them in articles in tips and free tutorials as well you can also buy my course if you want to use up your education budget on something and I will see you very soon

Channel: Matt Pocock

Views: 131,201

Keywords: typescript, web development, advanced typescript

Id: zu-EgnbmcLY

Length: 3min 54sec (234 seconds)

Published: Fri Jul 07 2023