Javascript

In the previous tutorial, we learned about TypeScript configuration. Now let’s put everything together and build a complete CLI tool — a bookmark manager that stores, searches, and exports bookmarks from your terminal. This is the final project of the TypeScript tutorial series. We will use Commander for argument parsing, Zod for validation, chalk for colors, and TypeScript for type safety throughout. What We Are Building A CLI tool called bm (bookmark manager) with these commands: ...

In the previous tutorial, we learned about advanced TypeScript patterns. Now let’s learn about tsconfig.json — the configuration file that controls how TypeScript compiles your code. By the end of this tutorial, you will know every important compiler option, understand module resolution, set up path aliases, and configure project references for monorepos. What is tsconfig.json? tsconfig.json is a JSON file at the root of your project. It tells the TypeScript compiler: ...

In the previous tutorial, we learned about tRPC for end-to-end type safety. Now let’s learn about advanced patterns — techniques that experienced TypeScript developers use to write safer, more maintainable code. By the end of this tutorial, you will know discriminated unions for state machines, branded types for preventing ID mix-ups, the builder pattern for type-safe object construction, and type-safe event systems. Supporting Types Used in This Tutorial The examples below use a few shared types. Here they are for reference: ...

In the previous tutorial, we learned about Zod for runtime validation. Now let’s learn about tRPC — a library that gives you end-to-end type safety from server to client without writing any API schema. By the end of this tutorial, you will know how to set up tRPC, create procedures, validate input with Zod, use it with Next.js, and understand when tRPC is the right choice. What is tRPC? tRPC lets you call server functions directly from the client with full type safety. No REST endpoints. No GraphQL schemas. No code generation. ...

In the previous tutorial, we learned about testing TypeScript with Vitest. Now let’s learn about Zod — a library that validates data at runtime and generates TypeScript types from schemas. By the end of this tutorial, you will know how to create Zod schemas, validate data, infer types, use transforms, and validate API requests and environment variables. Why Do You Need Zod? TypeScript types only exist at compile time. They disappear when your code runs. This means: ...

In the previous tutorial, we learned about TypeScript with Next.js. Now let’s learn about testing — how to write typed tests, mock dependencies, test async code, and even test your types. By the end of this tutorial, you will know how to set up Vitest, write tests with TypeScript, mock functions and modules, and use expectTypeOf to test types themselves. Why Vitest? Vitest is the modern choice for testing TypeScript projects. It has: ...

In the previous tutorial, we learned about TypeScript with Node.js and Express. Now let’s learn about TypeScript with Next.js — the most popular React framework for building full-stack applications. By the end of this tutorial, you will know how to use TypeScript with the App Router, Server Components, Server Actions, Route Handlers, and typed data fetching. Setting Up Next.js with TypeScript npx create-next-app@latest my-app --typescript cd my-app npm run dev Next.js has built-in TypeScript support. It generates a tsconfig.json automatically and compiles your code without any extra setup. ...

In the previous tutorial, we learned about TypeScript with React. Now let’s move to the backend — TypeScript with Node.js and Express. By the end of this tutorial, you will know how to set up a Node.js + TypeScript project, create typed Express routes, write middleware, handle environment variables, and build a simple REST API. Setting Up the Project Create a new directory and initialize: mkdir notes-api cd notes-api npm init -y Install dependencies: ...

In the previous tutorial, we learned about async/await and Promises. Now let’s learn how to use TypeScript with React — the most popular combination in frontend development. By the end of this tutorial, you will know how to type components, props, hooks, events, context, and build generic components. Setting Up a React + TypeScript Project The fastest way is with Vite: npm create vite@latest my-app -- --template react-ts cd my-app npm install npm run dev This creates a project with TypeScript configured out of the box. All component files use .tsx extension. ...

In the previous tutorial, we learned about error handling patterns. Now let’s learn about async/await and Promises — how to write type-safe asynchronous code in TypeScript. By the end of this tutorial, you will know how to type Promises, async functions, Promise.all, Promise.allSettled, error handling in async code, and how to build a typed fetch wrapper. Promises in TypeScript A Promise represents a value that will be available later. TypeScript adds types to Promises: ...