Converting Components to TypeScript

[00:00:00]
>> Anjana Vakil: And we're going to rename some files So if we—sorry, there should be a components in there, but in our components directory, we have these events, header, and forms modules which are very lightweight ways of composing elements that we want in our web page So let's rename those to .ts And then we can start to go bug hunting

[00:00:36]
So again, it's source components We're going to look at events, form, and header, and we're going to start renaming these ones So let's see how many squiggles we have to contend with here Right now, it finds 16 errors in 3 files And if we wanted to, if you had already included the main .ts, would also work there, but we don't need it right now because that's not part of our problem here

[00:01:14]
And so if we look at these files and the squiggles that are in them, which, you know, we can look at on the command line, but it's probably going to start to be way easier for us to just trust that VS Code is giving us that same information because it's also reading our tsconfig.json And there are a bunch of squiggles, some of them are giving me errors that we've seen before, right

[00:01:48]
Like property does not exist or has an any type And then some of them might be saying other things We got a lot of any types in here We also got some being like, "Could not find a declaration file for this module." So I have no idea what types are in it And this is going to start reminding us of that declaration emitting option where we can start to see the utility of those .d.ts files because they are, for example, if I wanted to have a JavaScript file that still exists in JavaScript, but I want to gradually move this codebase towards more TypeScript, having declaration files alongside that, or somewhere else in my project, can be a useful way to get TypeScript to understand like what a calendar is, for example

[00:02:58]
So for now, we're going to see that this icons thing is showing up a bunch, and we're going to see that a bunch of any errors are showing up a lot If I rename this one, we saw some errors in there as well Again, all kinds of I don't know what these modules do, so we have plenty of squiggles to deal with We also have our Vitest tests to help us out here

[00:03:48]
So let's go back to the terminal where I was running those and see what they're doing So I see some unexpected results, and we're starting to look at this This is a kind of common test harness syntax here where we're like expect blah to be blah, and we're seeing some things like, for example, we're looking for certain values that we're not finding in the output HTML

[00:04:22]
We're looking for them not to be undefined in places where there shouldn't be undefined, and yet there are undefined, and there are values that are unexpected And so what we're going to need is a bunch more types Types that we've been writing in our little mini exercises so far are kind of close, but maybe not cigars to this kind of more fleshed out event management project

[00:04:56]
So we're going to be able to kind of leverage how we were declaring those types and what we were, what structures we were using like interfaces and optional properties and all of that good stuff And we can start, for example, with some of these any errors We know that we want to declare types because we have a no implicit any option set in our compiler

[00:05:34]
So that's responsible for a bunch of these errors So we might not be able to squash all of the errors right away, but we can at least try to start making some headway, thinking about, like, for example, in our events.ts, there's a whole bunch of event objects that we don't know the shape of TypeScript doesn't know the shape of

[00:05:58]
And that is our job as developers is to tell TypeScript what kind of shape these things should have And so in order to figure out exactly what it should look like, you can look at the code, how it's running, you can look at the tests, and you can also look at the backend code because we know that this data is ultimately going to be coming from an API, and that's maybe—we're not going to touch anything in the backend directory yet, but it's maybe a gun on the mantelpiece, as it were, of the fact that at some point we're going to want to know information about the backend API and the frontend, but for now we can just use it as human beings to kind of make some guesses about exactly what properties and things these objects and events and whatever else forms are using here, all of this stuff uses

[00:07:03]
So let us start declaring some types and start getting that number of errors found in, "I found X errors in Y files." Let's see if we can start chipping away at it.