%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/typescript
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/ThomasAribart/json-schema-to-ts")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/ThomasAribart/json-schema-to-ts" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - ThomasAribart/json-schema-to-ts: Infer TS types from JSON schemas š</div>
<div class="nifty-link-card-description">Infer TS types from JSON schemas š. Contribute to ThomasAribart/json-schema-to-ts development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/ThomasAribart/json-schema-to-ts
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/208bd7abf6a7d8c0683c812f6d09e1df0221cf60c23b36da9820376e37a33e37/ThomasAribart/json-schema-to-ts')">
</div>
</div>
</a>
</div>
%% run end %%
## Stop Typing Twice š
āāļø
A lot of projects use JSON schemas for runtime data validation along with TypeScript for static type checking.
Their code may look like this:
```ts
const dogSchema = {
type: "object",
properties: {
name: { type: "string" },
age: { type: "integer" },
hobbies: { type: "array", items: { type: "string" } },
favoriteFood: { enum: ["pizza", "taco", "fries"] },
},
required: ["name", "age"],
};
type Dog = {
name: string;
age: number;
hobbies?: string[];
favoriteFood?: "pizza" | "taco" | "fries";
};
```
Both objects carry similar if not exactly the same information. This is a code duplication that can annoy developers and introduce bugs if not properly maintained.
That's whenĀ `json-schema-to-ts`Ā comes to the rescue šŖ
### [](https://github.com/ThomasAribart/json-schema-to-ts#fromschema)FromSchema
TheĀ `FromSchema`Ā method lets you infer TS types directly from JSON schemas:
```ts
import { FromSchema } from "json-schema-to-ts";
const dogSchema = {
type: "object",
properties: {
name: { type: "string" },
age: { type: "integer" },
hobbies: { type: "array", items: { type: "string" } },
favoriteFood: { enum: ["pizza", "taco", "fries"] },
},
required: ["name", "age"],
} as const;
type Dog = FromSchema<typeof dogSchema>;
// => Will infer the same type as above
```
Schemas can even be nested, as long as you don't forget theĀ `as const`Ā statement:
```ts
const catSchema = { ... } as const;
const petSchema = {
anyOf: [dogSchema, catSchema],
} as const;
type Pet = FromSchema<typeof petSchema>;
// => Will work š
```
TheĀ `as const`Ā statement is used so that TypeScript takes the schema definition to the word (e.g.Ā _true_Ā is interpreted as theĀ _true_Ā constant and not widened asĀ _boolean_). It is pure TypeScript and has zero impact on the compiled code.
If you don't mind impacting the compiled code, you can use theĀ `asConst`Ā util, which simply returns the schema while narrowing its inferred type.
```ts
import { asConst } from "json-schema-to-ts";
const dogSchema = asConst({
type: "object",
...
});
type Dog = FromSchema<typeof dogSchema>;
// => Will work as well š
```
Since TS 4.9, you can also use theĀ `satisfies`Ā operator to benefit from type-checking and autocompletion:
```ts
import type { JSONSchema } from "json-schema-to-ts";
const dogSchema = {
// Type-checked and autocompleted š
type: "object"
...
} as const satisfies JSONSchema
type Dog = FromSchema<typeof dogSchema>
// => Still work š
```
### Json Schema to Zod
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/StefanTerdell/json-schema-to-zod")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/StefanTerdell/json-schema-to-zod" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - StefanTerdell/json-schema-to-zod</div>
<div class="nifty-link-card-description">Contribute to StefanTerdell/json-schema-to-zod development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/StefanTerdell/json-schema-to-zod
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/8ed99ea719f5874a96ddbb7a86f0f6ec58e407214402274e58d1f55a0ca4a91b/StefanTerdell/json-schema-to-zod')">
</div>
</div>
</a>
</div>
%% run end %%
A runtime package and CLI tool to convert JSON schema (draft 4+) objects or files into Zod schemas in the form of JavaScript code.
### Zod to Json Schema
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/StefanTerdell/zod-to-json-schema")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/StefanTerdell/zod-to-json-schema" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - StefanTerdell/zod-to-json-schema: Converts Zod schemas to Json schemas</div>
<div class="nifty-link-card-description">Converts Zod schemas to Json schemas. Contribute to StefanTerdell/zod-to-json-schema development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/StefanTerdell/zod-to-json-schema
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/5389e8b2e76e7c78a9c7828f4e4619ea19e9a76ae9d15d53727458b36415a8a1/StefanTerdell/zod-to-json-schema')">
</div>
</div>
</a>
</div>
%% run end %%