Fixing TypeScript's Blindspot: Runtime Typechecking
HTML-код
- Опубликовано: 27 июл 2024
- TypeScript only checks types at compile time. And that means that, invalid data, that doesn't have the fields we think are required, can still break our applications. Learn how to use Zod, Yup, and Joi to fix this problem and go even further to check the contents of the fields at runtime.
Code: github.com/jherr/runtime-type...
Zod: github.com/colinhacks/zod
Yup: github.com/jquense/yup
Joi: joi.dev/api/?v=17.4.2
00:00 Introduction
00:40 Project setup
03:32 The runtime problem
05:35 Programming defensively
06:14 Using Zod
10:25 Using Yup
12:15 Using Joi
15:00 Outroduction
👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 More Typescript videos: • JavaScript to TypeScri...
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#typescript #joi #yup #zod 
Наука
This is the most underrated channel in tech. Thank you so much for your videos!
Hi Jack,
I just wanted to take a moment to express my appreciation for the amazing content you create on your RUclips channel. Your videos are not only informative and insightful but also engaging and entertaining.
What I love most about your channel is your ability to break down complex topics into easily understandable concepts. Your attention to detail and charismatic presentation style make your videos both accessible and informative for a broad audience.
It's clear that you have a real passion for technology and programming, and your enthusiasm is infectious. Every time I watch one of your videos, I come away feeling inspired and excited to learn more.
Thank you for all the hard work you put into your channel. You are truly one of the best RUclipsrs out there, and I'm grateful to have the opportunity to learn from you.
Keep up the great work!
Wow! Thank you so much!
Thanks, Jack! You are an amazing teacher - making me fall more in love with TS with each new video :)
@Jack Herrington just got your new book and saw my comment on the reviews page! Absolutely honored. What an incredible way to begin reading!
I love channels that are like this. Straight to the core points. Thanks for the this, Jack.
You are my new favorite coder to learn from as I keep watching these and find them valuable every time.
Thank you!
I really liked this video, this is a daily issue. You went beyond zod and show yup and joi use causes. Thank for the video.
We have a custom entity framework configured with Json schema. It does validation, state management, and events. There are 2 kinds of validation: run time type checking and dirty validation - violated rules are kept in a validation state property of the entity.
Looking forward to seeing your take on this!
I recently saw you on CodingTech channel's Solid.js intro... Damn! This channel is one of those hidden gems on RUclips. I will do my best to spread the word... I do have a request for a solid.js course please!
Wow. Jack. You just filled the gap of knowledge that I had! Thank you!
Today we can add Valibot to the list of schema validation. It is new and not that popular as its counterparts but build with tree shaking in mind what gives drastically smaller bundle size.
I'm relatively new to the topic so for now I can say that schemas could be used for form validations and now you gave the idea that it could be used for component library that potentially might be used in JS project. Thanks!
This was a great video, clear and concise! Thank you!
Great explanation, just what I was looking for.
Thank your for the awesome videos. I used to use yup, since I’ve switched NestJS, class-validator and class-transformer are way easier and faster using decorators.
Great intro to runtime typechecking. I would love to know more in-depth information on _how_ these runtime libraries work, though 🤔
Thank you, excelent content. Very useful ! 👍
Awesome one and nicely explained
Learned Formik for work so I'm a real big fan of Yup!
This is so educational. Thanks :-)
Nice engaging and insightful video
Nice job! Thanks for the material.
Do you have a video with your setup like Terminal, VS Code extensions used daily? Thanks again for sharing, started watching your videos and find out every time something new.
nice Job Jack, I`m starting a side projec using next 13.4 + TS + Tailwind... and definitely I`m gonna use zod as well in theses situations!! tkss
That's becoming a popular pattern. Theo has the zact library out there that adds Zod to 13.4 server actions.
@jherr tks Jack ...Holly Molly .... Theo can't stop shipping new things ! You guys are such an inspiration 💛
That json to types conversion was mad !!
Fantastic video Jack! Which of these three libraries do you use the most? I know Zod got pretty popular recently.
Thanks for this Tech-monitoring and benchmark video, a great time saving as always !
Damn dude, This video is sooo amazing, you deserve a like and a subscribe. Thank you
tanks for your nice tutorials
Hi, Jack! Watching your RUclips videos inspired me to use TypeScript decorators with Closures for creating a caching mechanism to avoid redundant API calls. Could you please make a video about cache invalidation for the mentioned approach?
Thanks for all the quality videos!
Cache invalidation within a closure; fascinating topic.
Returning an array of functions [getter, setter, resetter], working with that closures inner state in the manner you showed us in the TS tuples video would do the cache reset trick, I think. It gets more interesting when we work with TS decorators (defining a @Cache(options?:CacheOptions) decorator that can be applied to any method) and want to dynamically reset the "cache" inside the Closure. A video with your approach would be of much interest. Thanks!!!
Thanks for awesome video 👍. might want to check superstruct, it is 70% smaller (3.3 kb) compare to zod (10.8 kb) ☺️
Oooooo! Nice! I might do another video on validation tooling and if I do I will check this out!
That really reminds me PropTypes for React. I remember vividly the moment then I have found that you can't prop-type check for null, cos creator did not wanted to provide this functionality, so I've switched to typescript and never look back again!
Yeah, in our first React project we used Flow and Prop-Types, then we quickly switched over to TypeScript, which is the most powerful still elegant language I ever worked with. When we had an experimental project with Flutter/Dart we didn't understand why the hell Google hadn't picked TypeScript for Flutter? Anyhow. Take care.
Jack, started watching your videos about a week ago and can't stop. Excelent content! Noticed you haven't covered performance aspects of the different runtime validation libraries. How heavy do you think those checks are?
Interesting question. I'm sure it's just a function of data set size. I doubt that there are tremendous speed differences between the libraries, but hey, you never know, it could be the case.
Thanks Jack.
I prefer to add default fallback values, so any of my array methods would still work. Also forces me to incorporate the default state (or empty state), and state with data UI.
Hi jack what extension you use to convert json to ts interface?
JSON2ts - marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
Thank you man.
Thank you for the comment! Love you user name. :)
Can these tools be used to check the shape of incoming data in a javascript application without typescript?
Yeah, no problem.
In my opinion, we shall use the data validation when we are getting data from 3rd party APIs most of the time. Do you think we should add data validation for APIs built in-house?
Yes. Two reasons. First, as companies or teams grow the frontend and backend teams split and often deploy on a different cadence so you can run into API version mismatch issues. And secondly, this kind of validation is pretty cheap time wise but can result in much better error messages to the client. As opposed to just getting a 400, now you are getting detail on what exactly was bad about the request, and that speeds development.
Io-ts npm package does runtime checking I believe?
In my opinion checking data received by the lib just to give a hint in dev is really nice but not in production
I agree. It just adds more clutter to your code and confusion for new devs being onboarded. Nice idea, but not worth all the extra effort. Just use ? And your code works and doesn’t wast near as much cpu, build time, and actual coding.
Where is this convert JSON clipboard to typescript interfaces from? Is it native to vscode or an extension? At around 2:02
Hi jack, sorry OOT question, what theme does your zsh used?
robbyrussell?
can we replace schema JSON validators such as AVJ schema validator with Zod?
You could I suppose, but AVJ runs a lot faster.
you could also just use classes instead of interfaces and do Assertions in the constructor (like being talked about in the tactical Domain Driven Design patterns)
I think the key point here was that when you have the declarative schema definitions, these tools provided you both static/compile time as well as automatic runtime data validations with meaningful messages. Brutally great tools. They are must for business applications.
Around the 8:45 mark, what exactly did you do to surround your selection with quotation marks?
I literally just hit double quotes with that text selected. Hopefully that works for you.
Ha! So obvious in hindsight... Thanks!
Legend
Nice! I've been using class-transformer with decorators in the frontend to conform my types to my form data (backend doesn't handle it). I guess like zod safeParse.
I wouldn't recommend class-transformer on the frontend only because it's hard to get the decorators working.
import { plainToClass } from "class-transformer";
import { IsNumber } from "class-validator";
import "reflect-metadata";
export class LovelyObject {
@IsNumber()
//@ts-ignore
public shouldBeANumber: number;
}
const converted = plainToClass(
LovelyObject,
{ shouldBeANumber: "234" },
{ enableImplicitConversion: true }
);
How would you transform form data in the front end to booleans, numbers etc by a class definition in typescript @Jack ?
I'm not familiar with class-transformer or what it's doing here.
@@jherr I'll continue the thread in your discord. Hard to look at unhighlighted code 😹
io-ts could also be added to the list of validation library's.
I'll check that out!
The typedefinitions in zod is inspired by the API of io-ts i read somewhere when I was checking out which library to use.
@@davidtoska7791 They come out really clean!
😜😂 the problem with io-ts is that is not a three letter library 😂😂
@@Norfeldt hehe... Good point..:)
hey whats that theme? so cool
How do you remove that extra code in production build?
process.env.NODE_ENV check would remove if from the bundle if that's the way you want to go. Honestly, I would use this type of code sparingly and at the edges of your system where you accept the external input. Once it's validated then subsequent calls should not re-validate the input.
@@jherr I fully agree, I'd never ever remove data validation on system boundaries. Within the system a meticulously elaborated static compile time type system is perfectly enough, but on the boundaries, no way I'd allow my team to remove the safety belts. In our project currently we have three subcontractors, as SA, I told them that I don't want to see null pointer exceptions, that would be an enormous shame on that team.
Zod is great but I don't understand how you did this 07:52. Is that an extension?
That's just VS Code. And the only thing I've added beyond that baked in TypeScript support is the "TypeScript Essentials" package of plugins. The keystrokes are Cmd+K then Cmd+I, which does "Debug: Show Hover". And that command might be bound to some other keys for you.
Oh, I see, it's a shortcut for hovering. I thought you found a way to preview computed types in vscode 😔. Sometimes when I hover I just get the name of the type/interface
Could you do a video on nx workspaces and your opinion on it?
ruclips.net/video/WOfL5q2HznI/видео.html and ruclips.net/video/Bw_tmWEaaIU/видео.html
@@jherr Thanks! You are the best at replying, I really appreciate it
I am shocked at how many people think typescript does runtime typechecking.... I have had to correct at least 20 professionals in the field on this point. Terrifying really.
There is definitely a lot of misconception around that. I think folks need to use TypeScript Playground a little bit to see just how little the tsc compiler does to the JavaScript.
No one may ever see this, but if anyone can tell me if there it is still necessary to use the nullable ? when using zod, that would be very helpful to know.
Can you give a time reference in the video?
Why do you have to infer the type from the zod schema, why can't you infer the zod schema from a type? And why isn't this built in to typescript? (I'm not saying every time, I'm just saying they should add a isType() function which will compile into something like zod). The way it is now zod has basically reimplemented typescript types in another syntax and ts developers now have to learn both (not that it seems that hard but still)
kneel before Zod just killed me :D
That's why in my opinion other languages with runtime type checking should be used on the backend rather than TS/JS
This are good options., But i feels like poor man's Graphql? I see the point though.
I see your point, but not everything is going to go through GraphQL, and this provides some options for non-GraphQL based data validations. And pretty intense validations at that, not just types, but ranges, regexes, type conversions, etc. You could use this mechanism to declaratively implement the Adapter pattern from the GoF Design Patterns book.
@@jherr yeap! I totally get it, and i see even a use case for me at work. We don't use Graphql (i have in other projects) and we have the types and interfaces in the client code, everything looks good, but when you get data from the CMS, well, it does not always look like what we want 🤣. My approach is to create a Interface that matches the data and wrap it with Optional and then use a lot of optional chaining. It works but it is kind of a hassle. In this case something light weight as zod to have a schema validation could be an option. I will have a look into it. I wonder how much size would that add to the bundle though.
Its a bit surprising to me that TypeScript doesn't offer this on its own... A validate function / operator is practically common sense... MS!! Do it!
The only language that I know of that had support this kind of thing built in was Ada with it's preconditions and postconditions. But even then, you actually had to validate the input yourself. You were just given the opportunity to.
Strongly typed languages like C/C++, Java, C#, all expect you to interpret the input properly. For example, if you are reading a file as binary and storing as integers you are just telling the compiler to trust you that the file actually has data formatted as integers in it. It's the same thing here. The compiler is trusting you that you understand the whole data chain and can guarantee that the data is structured as you say it is.
IMHO, it's too much to expect the compiler to write this kind of code for you. There are too many options with it. These validation libraries are not small, even when you pair them down to just the kind of checks that TypeScript enforces at compile time.
@@jherr my argument here is I think only typescript guys can provide a clean implementation for validating interfaces... All other libraries must create their own techniques to make schemas and then that can be translated to TS but in what we really want it some way to get a validator from our TS types...
And yes I'm aware TS by principle is compile time only and is designed to not add any runtime overhead from its features... But as the Lang matures, I think runtime functions can be added... Atleast as extensions...
@@GhanashyamSateesh Some what to add compiler-agnostic extensions would be very cool.
Or just use C#
你家在树林里面。。。
是的。我们喜欢这里。
No modern languages have runtime typechecking? WTF?
I don’t know about a categorical “none” but the languages I know type check at compile time.