genType VS zod

I don't really use ts-belt to be certain, but by looking at the source, it seems that it's using genType, which can generate TS types from ReScript values, and that makes interop work really well.

They discuss this in their docs.

https://rescript-lang.org/docs/manual/latest/introduction#di...

Seems like a type system for Javascript, built with a differing set of opinions than Typescript.

Looks like they also offer some form of TS interop:

https://rescript-lang.org/docs/gentype/latest/introduction

TS Belt has been built with ReScript (and its Belt stdlib). ReScript generates highly performant JavaScript code, and with genType it also automatically generates TypeScript types. Moreover, I've added a few codemods to the building process to provide even more code optimizations and cleaner TypeScript signatures.

To interoperate with TypeScript with proper type information you’ll use third-party genType. Add it as a devDependency and annotate the module export you want to generate with @genType (in previous versions you’d surround annotations with square brackets).

Author here: This specific example is a perfect case of the thing the post calls out! API boundaries are one of the most important places where we need to maintain invariants about our code base, one of the most important places that it is important not to have to worry about “keeping things in sync” as you say.

In the TypeScript world, there are a number of libraries that can handle creating types from deserialization logic: Zod [1], Superstruct [2], Typebox [3], etc. – and Typebox specifically does what you are looking to do with MyPy. I do not know the Python ecosystem at all anymore (it has been a decade!) but I would be surprised if nothing like that exists. If it does, there is a good chance it is associated with the functional programming enthusiast corner of the Python community, so you might look there!

[1]: https://github.com/colinhacks/zod

This means if you want to actually have reliable type-checking in typescript, you need to use a runtime schema framework like zod to verify that data coming in from the outside world is what you think it is.

Forms are a big part of full-stack projects. In our experience, Zod and React Hook Form work great together and provide all the functionality one might need to create forms. In this combo, Zod provides schema validation (types, min/max bounds, lengths, enums, etc.) while React Hook Form gives a flexible API to interact with the form. With these two libraries, one can nest components that interact with the same form, perform different complex validations, and update the data on the fly. They make working with forms seem too easy.

For the examples, I'll be using zod for both React and Svelte, but won't be using libraries for the sake of showing the differences. You should be able to use any other validation libraries you want with no problem, but since I'm more familiar with zod, that's what I'm goin to be using. It's good to know that I'll only handle validations on the server-side, that's why it's useless for us to save some variables state in Svelte.

The tRPC router contains basic validation using Zod.

Zod - schema validation for client and server

This is my main component for the thread creation UI. You can see some imports and predefined prompt for OpenAI. Your prompt should be concise but to-the-point for best results. I have a few states I'm using to handle input changes. Once someone selects all inputs and then clicks on the Generate button. the whole input gets validated against a Zod schema and then is fed to the API route we created in the previous step. The generated response is being split into separate tweets and is then shown in the UI as a thread.

For this we will need to create a schema that we can compare and validate our object against, this is the perfect use case for Zod! Zod is a TypeScript-first schema validation library that allows us to create schemas and validate our objects against them. Let's install it by running npm install --save zod.