3 great Typescript libraries to speed up your full stack development

I have been hard at work turning my Instagram clone project from a front-end mock to a full stack application. It’s still a ways off but I wanted to share new libraries I picked up:

• React Hook Form
• Zod
• Prisma

They’re very popular and I must say their popularity is well deserved. They provide amazing developer experience and type-safety, which reduces my mental overhead and enforces good code structure. I will always have these libraries in my tech stack from now on until better ones come along.

React Hook Form - client-side validation that reduces boilerplate code

Forms require lot of boilerplate - validation, error state, submitting state, default values. This makes writing forms very error-prone, especially as the number of inputs increases. This library handles all of it for you. It can validate the input values without causing un-necessary re-renders. If an input value is invalid or missing, trying to submit the form will put focus on to the input.

Additionally, you can extract form state from the useForm hook to render error messages or disable the submission button when the form is executing its onSubmit function.

If you’re interested in trying it out, here’s a great tutorial by ByteGrad, who demonstrates the reduction in boilerplate thanks to React Hook Form.

Zod - schema validation for client and server

However, what if you need more complex validation than just checking if a value is string or number? Zod is a schema declaration and validation library. Here’s a code I’ve written for a sign up form for new users.

All the required inputs here are strings, which could have been reinforced with regular TypeScript types. But Zod can also reinforce regex pattern matching, minimum and maximum character requirement. An error message can be provided for each requirement as well. And a TypeScript type can be generated with the z.infer method.

Now all you need to do is change the schema and the type will change automatically.

Define the generic type and pass in the schema with a zodResolver - a package that integrated Zod and React Hook Form. Now errors will update with the error messages I provided. Also, Intellisense provides autocompletion!

Update the input and the form will only re-render when input is valid (or invalid again), not on every input change. It does this with Proxies, which allows subscribing to value changes.

Here’s what’s really great about Zod: you can use the same schema on the server. Which is great because you should always validate on both the client and the server! Who knows what malicious actor will bypass your client-side validation. Use the parse or safeParse method in your API endpoint.

One source of truth. Less error-prone, type safe, elegant.

Prisma - TypeScript ORM

Unlike RHF and Zod, Prisma is a very big library and it’s hard to go over everything in detail. To be concise, I’ll tell you what I used Prisma for.

I created a database schema with Prisma’s own syntax. I installed their official VS Code extension to enable Intellisense, which provided errors for constraints and relationships. It also warned me to add an index for a foreign key field to improve performance.

Then I generated Prisma client and TypeScript types for all the models with npx prisma generate. In the example below, I queried the Post table to return 100 posts and join it with other tables. Autocomplete prevents me from making mistakes with my query.

TypeScript knows the shape of the query object. I don’t need to validate the query response anymore.

I connected Prisma to a database of my choosing and pushed the schema to the database, which is Supabase. With Prisma’s CLI command npx prisma db push, it generated all the tables for me.

I realized I neglected to add certain fields required for an entity. No worry, I just update the Prisma schema file, re-run npx prisma generate and npx prisma db push. Supabase is updated for me. If any table must be cleared of its data, Prisma will warn me and ask if I want to proceed.

Supabase has a visual database but if it didn’t like most CLI apps, I would run npx prisma studio and it would provide one for me on a localhost port.

Prisma has accelerated my backend development. I don’t have to write complex and long SQL strings that are error prone. I have autocompletion and type-safety to prevent me from making mistakes.

Conclusion

I hope I convinced you to add these 3 libraries to your stack. These libraries work at any scale and helps you write clean code that is self-documenting.

Comments

[Rajae Robinson]

Thanks for sharing!

I recently wrote an article compiling some of the best Typescript tools and libraries, you can let me know what you think about the list.

[Acid Coder]

dirzzle/kysely > prisma

zod is basically staple now

[Junsu Park]

I heard about Drizzle and am planning to check it out. I haven't heard about Kysely, thanks for sharing it with me!

[Jake Lundberg]

Great recommendations! I love Zod and Prisma, such amazing tools!

[Mitch Chimwemwe Chanza]

Instead of screnshots you would have used code formating backtick

like this ```

javascript
Sample code 

[Junsu Park]

I wanted to show the Intellisense features for the libraries and decided it would be visually inconsistent to do both screenshots and code blocks. In my other posts, I use code blocks.

[Mitch Chimwemwe Chanza]

awesome