End-to-End Type Safety & Additional Tools

[00:00:00]
>> Anjana Vakil: When we talk about TypeScript, you often hear this phrase type-safe, type safety And what we just did is we kind of broke a little bit of the safety that TypeScript guarantees us by forcing it to consider types that it didn't really believe we're going to be that type And so what are we talking about when we talk about type safety Well, essentially we're saying that this is the kind of code that is not going to give me a runtime type error, cannot read properties of undefined, or what have you

[00:00:36]
That this is code where, yeah, there might be other problems I might still have bugs like we saw before, but types ain't one of them We got 99 problems, but a type ain't one The idea of type safety is that we can be sure that as data flows through our program, the types of data are all checking out And so again there might be problems, there might be other network issues or data that's got the wrong value even though it's the right type of value, that sort of thing

[00:01:17]
But it is a way of making our code a little bit more predictable, a little bit less buggy and a little bit more safe So that is what we are talking about We talk about type safety and you'll also hear this phrase a lot in the web community of like end-to-end type safety in our new AI generated full-stack blah blah blah blah And you might need to do the Jeff Goldblum rapid blink, if you're like me and you're like end-to-end type safety, what are we talking about

[00:01:52]
Well, if you've heard of this phrase like end-to-end before, maybe in, for example, like end-to-end tests, we're usually referring to something that doesn't just give us type safety through a piece of code, a module or a single project, but we're talking about something where we have type-safe interactions from the front-end, the user sees all the way back to the back-end and maybe even the database that we're working with

[00:02:22]
And so a lot of the time you'll hear this touted as like a really cool thing That we can have end-to-end type safety where we know that we're not going to be giving our users undefined values or things like that and we know that we're not going to be inserting undefined in our database because we are sharing type information between the front-end and the back-end, so all the way through our application

[00:02:51]
So similarly to how you might have an end-to-end test that checks that everything really works out, not just that that function worked over here and this database transaction worked over there, but that everything works as expected Similarly, we can have that same kind of notion, all of the types are checking out all the way through our full-stack application And that is something that is out of scope for this course, but is covered a lot in other courses on the platform

[00:03:25]
Yeah, definitely check out Steve Kinney's full-stack TypeScript, dives into kind of both configuring TypeScript for client and server projects and also focuses a lot on Zod, which is a schema validation framework Are you psychic What So, something that's very useful and you'll see, I feel like more and more I see this around and Steve Kinney covers it, and now we're starting to think about the wider ecosystem of like all of the cool stuff that we can now do with the power of TypeScript

[00:04:05]
And one of those things is we can actually validate data even at runtime like in our actual JavaScript code using information that can also be given to TypeScript as types, so that it can ensure that all of our code is going to be working with the right types of data, and JavaScript can ensure that our front-end is working with the right type of data or our backend is as well So, you'll see, you know, a lot of jargony words, TypeScript first schema validation with static type inference, but essentially what things like this do is there's, I think a couple of alternatives, but Zod seems to be far and away the darling at the moment

[00:04:53]
What we do is it is essentially a library that has objects that are real JavaScript objects that exist at runtime, but they also have very explicit, like there's a lot of type declarations happening There's a ton of generics, there's so many angle brackets, you'll see But what that does is that the object itself lets us ensure at in JavaScript, on the JavaScript level that the data we're working with when the code is actually running, has a certain shape

[00:05:28]
And then it also lets TypeScript know what that shape is So that TypeScript, as I'm developing my code can be checking that I am handling all of that data correctly before the code gets run And so you can learn way more about this from Steve Kinney, but you might see things like this in TypeScript projects that you find around the web, and essentially what it's doing is allowing us to kind of bridge the gap between the runtime object that has a certain shape and the type that has a certain shape

[00:06:03]
So here if I have a user, there's something like a parse method that Zod gives us that allows us to check the schema of an object against what we defined, and then we can also get a type out of that which we can then use across our TypeScript codebase now We're not going to worry about it too much You can go check out Zod.dev You can go check out Steve Kinney's course full-stack TypeScript, is that what it's called

[00:06:32]
Yes, full-stack TypeScript and learn way more about that But suffice it to say that this is where now we're getting into like the wide world of things you can do once you have a stronger notion of types than JavaScript provides us In its bless its heart in its runtime And this is just like one of many, many things that we can be doing So for example, Vitest which we looked at before, that was another kind of ecosystem thing that you'll see in many projects that also has a way for us to even look at types in our tests and ensure that those are working

[00:07:16]
And there's a whole bunch of other stuff out there, including other things that allow us to work with, like, for example, we were starting to see that like at the database level our type information was kind of starting to break down There are typed, there's something called like TypeORM if you're used to working with ORMs or object relational mappings, that essentially is a way for you to understand, like for you to make sure that the database data and the data as it's running through your program are sharing the same schemas and things like that

[00:07:54]
So there's like a ton of type aware tools out there, and there are some cool lists like awesome TypeScript You might have seen the awesome whatever, awesome this, awesome that So there's a whole bunch of resources there also like other things you can learn about TypeScript but also a whole bunch of other tools So poke around if you are like, oh I really wish there was a TypeScript-y way to work with blah

[00:08:23]
There probably is, and if there's not, you can make it and publish it open source and be part of the magical journey that is the evolution of the TypeScript community and all of its many, many open source projects.