Configure Type Declarations

[00:00:00]
>> Anjana Vakil: All right, so back to our TypeScript code And I'm just going to make sure, yes, I did uncomment out the bases, so let's, I'm just going to run tsc and make sure, OK, got a bunch of errors Let us start fixing that Um, how about we begin in events.ts So one thing that we might notice if we're just, if we're going from top to bottom, is this first line here where we're importing this icons.js has TypeScript complaining

[00:00:41]
And it's complaining about not being able to find a declaration file So we remember when we were looking at those emitting options, those output options earlier about source maps and declaration and declaration maps So we said those declaration files, those .d.ts, those are really useful for letting TypeScript know information about types that might exist

[00:01:13]
In principle, even if we are only looking at a .js file, which does not itself allow any kind of type information So those declaration files are a way for TypeScript to essentially give us type information for regular JavaScript code Right now we're talking about our own module that's here So we are going to approach a different way but in a little bit we're going to look at why and how it's relevant to be outputting or emitting these declaration files so that TypeScript can get some information because right now it has no idea what kind of stuff is going to get exported by this icons module and so it says that it hasn't any type and it has no idea what kinds of stuff we're expecting to work with here

[00:02:12]
Now, since this is our codebase, we control it, we can rename icons to .ts And go back into our components file and either delete the extension entirely or we can type it out verbatim and change it to a .ts file, but you can just delete it And now it is complaining about totally different stuff, so I think I actually do need the, so now It doesn't look like it because it looks like we've created more problems for ourselves

[00:02:54]
And that is, uh, by the way, a huge part of the TypeScript developer workflow in my experience is there's kind of like a, like it gets worse before it gets better sometimes But that's what we want We want TypeScript to be complaining to us if it doesn't know what we're talking about And here's another thing it was complaining about in events.ts It was saying like, I don't know what you're, what this import.meta thing is or what this, like that's

[00:03:26]
I have no idea what's going on or what this env doesn't exist It's an any And this is, this would have been something that like you would, it would be magical if you had figured out how to fix this without leaning on some other resources like Google or DuckDuckGo or me telling you stuff This is something that is kind of a Vite, a Vite thing And again, this isn't a Vite course, we're not talking about Vite a lot

[00:03:58]
But if we look up, so Vite's documentation is at vite.dev and again there's all kinds of good material on Frontend Masters, on the interwebs about Vite and what it's doing, and it is doing a lot As I mentioned, it's doing a lot to kind of like rewrite our JavaScript to wrap it up and it's doing a lot of work under the hood for us And one of the things it's doing is it has this system of sort of exposing information that's specific to the environment where it's running

[00:04:32]
So maybe you have like a dev environment and a production environment, let's say, and it does that with this import.meta.env thing And it also does some other fancy fancy things like asset handling, allowing us to import SVG strings and a whole bunch of other stuff that is not obvious So if we search in this page for TypeScript If we want TypeScript to know what we're talking about so that IntelliSense and the type hints and the autocomplete and all of that stuff

[00:05:15]
Vite provides type definitions for the things it's expecting like variables on this import.meta.env in vite/client.d.ts Huh, that's a familiar extension Now, maybe And so, if we remember, we briefly looked at some .d.ts outputs from our compile me script earlier, and this is another example of one that is, well, a lot longer than ours were, but this is another way that packages from the ecosystem can provide type information

[00:06:02]
It's just sometimes you have to know where to look for it And so now we, because we googled or DuckDuckGo'd, now we know where this type of information is It's in vite/client But TypeScript doesn't know that yet So we need to tell it So just ignore that for a moment So if we go back to our tsconfig.json There is a types option that we can provide, which we can pass in an array of extra types that TypeScript or tsc might not automatically be able to figure out where to find

[00:06:52]
But for example, because we have Vite installed here as a dev dependency, if we point types to vite/client And I guess we can put a comma there in case we want to add more stuff later, hopefully We have no longer a squiggle under this line because now TypeScript knows that we are using these client-side Vite concepts including global stuff like import.meta and

[00:07:41]
And if we notice our previously red oops, icons file Had a bunch of squiggles because this, what's happening here, we're just, we're importing some SVG kind of directly and that's a cool thing that Vite lets us do And again, this is not a normal TypeScript or JavaScript thing, so TypeScript didn't know what we were talking about, but now that it knows that we are dealing with a Vite client-side codebase here, and we pointed it to where it can find the type declarations for all of that stuff

[00:08:16]
Now it's happier and hopefully our number of errors went down a bit, yay OK So that's just some kind of magical incantation stuff and this is a little bit Vite specific, but occasionally you will run into things like this where you need to know the tools you're working with And it might be that you've been dropped into somebody else's codebase and there's all kinds of magic happening and it takes a little while to poke through the dependencies and poke through the types and poke through what tsconfig is looking at and seeing and looking at the config and understanding all these options, and sometimes you need to just know how these libraries are structured, where their types are, that sort of thing

[00:09:04]
So this types array here is something that you'll see in many projects and we'll also take a look at it a bit later when we move into the backend.