Step-by-step articles on TypeScript, part of our Frontend collection.
Showing 10 articles
TypeScript is JavaScript with types. The types are checked at build time and then removed, so the code that runs is plain JavaScript. What you gain is autocomplete that knows your data and errors before your users find them. Inference does most of the work let...
Generics let you write code that works with many types while keeping the connection between input and output types. Think of them as function parameters, but for types. The problem function first(items: any[]) { return items[0]; } const n = first([1, 2, 3]); /...
Utility types build new types from existing ones, so you define your data once and derive variations instead of copying fields. interface User { id: number; name: string; email: string; role: 'admin' | 'member'; passwordHash: string; } Partial and Required //...
A type annotation checks a value against a type, but then the variable becomes that type, and you lose the specific details. satisfies checks the value without changing its inferred type. The problem with annotations type Route = { path: string; auth: boolean...
A union type says "this value is one of several shapes". Narrowing is how TypeScript figures out which one you have inside a branch. Built-in narrowing function format(value: string | number | Date) { if (typeof value === 'string') return value.trim(); // stri...
TypeScript checks your code, not your data. A JSON response, a form submission or an environment variable can be anything at runtime. Zod validates data against a schema and gives you the TypeScript type from that same schema. Define once, get both import { z...
For years, running TypeScript in Node.js meant a compile step or a loader like ts-node or tsx. Recent Node.js versions can run .ts files directly by stripping the type annotations. Try it // greet.ts interface Person { name: string } function greet(p: Person):...
tsconfig.json has over a hundred options. These are the ones that matter most for catching bugs in a modern project. { "compilerOptions": { "target": "es2022", "module": "nodenext", "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true,...
Advanced types let you describe APIs precisely: event names, CSS tokens, route parameters. You won't write these every day, but they make library-style code much safer. Template literal types type Size = 'sm' | 'md' | 'lg'; type Side = 'top' | 'bottom'; type M...
These three types sit at the edges of TypeScript's type system and are often confused. Using the right one is the difference between real safety and false confidence. any: switch off checking let data: any = JSON.parse(input); data.user.name.toUpperCase(); //...
