Page 6 - TypeScript

Anyone who writes React props without clear types relies on convention instead of the compiler. TypeScript turns silent assumptions about props into explicit contracts: which values are required, which are optional, what shape children may take, and which extra HTML attributes a component should pass through. This article shows how to type React props from the first interface definition all the way to extended, reusable components.

A single import from a poorly structured TypeScript library can pull several hundred kilobytes of unused code into the consumer bundle, despite modern bundlers. Tree shaking is not automatic bundler magic, it depends decisively on how the library itself was built, exported and declared in the sideEffects field.

tsconfig.json is the central control panel of every TypeScript project and determines compatibility, strictness, and build speed. This article walks through the most impactful options such as target, module, strict, esModuleInterop, and skipLibCheck, provides a sensible baseline configuration for a new project, and shows how extends lets teams share configuration cleanly across a monorepo.

Disabling a submit button in a deeply nested form component while the form is submitting has traditionally required prop drilling or external state. useFormStatus makes this state accessible without either.

Top-level await was one of the most requested features for JavaScript modules: waiting for asynchronous initialization directly in module scope, without wrapping the entire module in an async function. Few developers understand its effect on the module graph and the potential for deadlocks, this guide explains both.

Alpine.js keeps x-data deliberately untyped, which is fine for small snippets but quickly turns into silent bugs, mistyped property names and hard to maintain code once Hyva components grow larger. This article walks through typed factory functions, JSDoc based typing without a build step and a lightweight TypeScript pattern that stays CSP compliant, respects Hyva's no-build philosophy and still delivers real type safety for teams and complex components.

Maintaining a separate hand-written interface for every variant of a TypeScript type eventually causes drift between the original and its copies. Mapped types systematically transform existing types with the K in keyof T syntax, apply and strip readonly and optional modifiers on demand, and rename keys with as, all without duplicating a single field.

The raw TypeScript Compiler API is powerful but unnecessarily cumbersome for everyday code generation. ts-morph puts an object oriented, readable layer on top of it and turns ten lines of AST traversal into a single understandable method call, without losing type information or precision.

Data tables in React fail in two ways: either you build everything by hand and sink weeks into sorting, filtering and pagination, or you pick a high-level library and end up fighting its lock-in. TanStack Table v8 is the third path: a headless table engine that supplies all the logic and leaves the UI entirely in your hands.

Pulling in an untyped JavaScript library costs you autocomplete and type safety across the whole project. Declaration files close that gap without touching the library's own code. This guide covers when DefinitelyTyped already has you covered, when you actually need your own types, and how to safely extend the global Window object.