Zod Goes Where TypeScript Can't

Zod is an incredible validation library for typescript you give it an object with whatever the Hell in it in Zod helps you make sure the object has whatever the hell you expect so a basic example we create a schema in a z dot string and we pass it in the thought parse function tuna and that now validates that tuna is indeed a strain we pass something else like 12 it's going to throw an error super useful because now it can guarantee whatever we did here is real and valid and if we use safe Parts it won't throw an error but it has a success Boolean value and then data or error depending on if it's true or false which makes it trivial to parse something and know that that thing is valid so if you create a user validator object which is a z dot object that takes in a username which is a z dot string you can now user.parse an object and this will throw if it's not a valid object all the different things you might validate like that a string is minimum five characters maximum whatever a specific length that it's an email it's a uuid it's a cuid that it matches a specific regex that it ends with a specific string that you've trimmed the white space from and it's good that it's a date time or not a date time all the things you might want to check on a random pile of data the goal of Zod is to guarantee that your expectations of how this thing is shaped are true sound familiar kinda sounds like typescript the thing about typescript is it's not a guarantee typescript doesn't run on it doesn't run typescript code becomes JavaScript code before it runs so any type enforcement you do in typescript gets lost after it's been compiled so if you have a function that you enforce this takes in a user and a user has a username you compile that typescript and someone calls that function where username is a number instead of a string your code is going to bomb and do a bunch of things it's not supposed to because the typescript can only check what exists within the typescript system at compilation time it has no idea what happens past there the value of Zod is that you can guarantee that the thing being passed is the thing being passed this is great for everything from parsing requests to validating data put into forms to validating data from arbitrary apis that your concern might not be in the right shape the other benefit is the types that get generated when you run validation are really good say we have const sum input equals username hello age 17. and we want to be sure when we process this that that input is valid we might have a schema or uh input schema equals z dot object and this has username Z dot string and has age don't need to put a Min on that I'll do a Min of one for now now we have this input schema now you can do const parse input equals input unknown so at this point we're assuming we don't know what this input is this could come from an apis come from anything in the world and we want to do something with it we can return input schema.parse and now when we call this if I have a const parsed equals parse input sum input we now know the type of this here because this will throw if that type isn't valid which is magical the power of that to guarantee that this is the right shape and to process this correctly is super cool where it gets way cooler though we have this.min here let's say we want to throw a custom error if you're not 18. what I can do here oh look at that copilot's doing its thing I'll put an extra quote at the end that's fine so now if you're not 18 when you pass this in you're going to get an error you must be 18 or older to use the app so this will throw an error when you call it if the input age is less than 18. that is so powerful in the type definition you'll notice here I haven't written any type definitions in this file other than colon unknown nothing else in here is a type definition I can delete this well I guess I have to leave the unknown because I don't know but I can delete that delete this pass empty object here and this is still valid code this is going to throw in production but it's going to throw an error that we don't have a username that's a string super powerful you get types out of it as a result just by returning something parsed it now becomes typed so I have like const untyped equals unknown this unknown thing is unknown but then when I pass it through here we now know the type because this will throw otherwise this would basically be the equivalent of typing like if untyped if no untyped dot username or no or untyped dot user or type of untyped.user name is not equal to string or no untyped is it going to auto complete that for me I'm starting to yeah it's mad because it's unknown but this is basically what Zod does for us it writes a bunch of checks that check if the thing like like each subfield exists so I can do if no untyped or he doesn't know these exists so because typescript is typescript but the point of this here is that you'd normally write a shitload of code to validate all the stuff I did here and the type definitions that come out of this are significantly better but what about yup but what about Joy but what about all these other Solutions none of them know how typescript works the value of Zod is how well it understands the things on both sides of it it's taking in invalid data data that it hasn't been validated and returning you validated data it's a very simple package that does that piece incredibly well has awesome Primitives for everything from URLs to enums and it hooks up to all sorts of things like form libraries like reactive Forum or directly to trpc in fact the creator of Zod Colin actually started trpc originally because he saw the opportunity using what he learned through Zod to make API definitions and iteration simpler it's that deep understanding of typescript and type safety that makes Zod and trpc both so powerful I feel like I haven't given Zod enough credit for the importance that it represents as a package the ability to write a validator one time in one place and then import that on the back end to validate our request and on the front end to validate a form with the exact same errors in both is like mind-bogglingly cool and it has made my life building full stack web applications significantly better if for some reason you haven't already checked out Zod please do it's one of those essential packages that I just I can't live without the web is inherently unsafe you can never truly guarantee that an input is the shape that you expect and something like solid helps you smooth out those rough edges and have a safe experience both in the type sense and in the runtime sense please check it out if you haven't let me know what you think leave a comment below if you letting me know how you feel about Zod and validation in general YouTube thinks you're going to like whatever videos appear in there so give that a watch to you thank you for the time good seeing you nerds peace

Channel: Theo - t3․gg

Views: 55,270

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: o4h8PUVy5J8

Length: 8min 11sec (491 seconds)

Published: Thu Jan 19 2023