TypeScript Design System
In this page:
export interface ComponentProps {
variant: "optionA" | "optionB";
onClick: () => void;
}Core Concept
A typed design system defines reusable UI component props as TypeScript interfaces, so every consumer of a Button or Card component gets compile-time enforcement of exactly which props are valid and required.
Example: Core Concept
interface ButtonProps {
variant: "primary" | "secondary";
onClick: () => void;
}
const props: ButtonProps = { variant: "primary", onClick: () => console.log("clicked") };
console.log(props);Basic Setup
A basic setup exports each component alongside its typed props interface (export interface ButtonProps { variant: primary | secondary; onClick: () => void }), published as its own versioned package.
Example: Basic Setup
export interface ButtonProps {
variant: "primary" | "secondary";
onClick: () => void;
}
console.log("Component and its typed props interface exported together");Typed Example
A typed example: using a string-literal union like variant: primary | secondary | danger instead of a plain string means passing variant="primry" (a typo) is a compile error, not a silently-unstyled button in production.
Example: Typed Example
type Variant = "primary" | "secondary" | "danger";
function applyVariant(variant: Variant) {
return `btn-${variant}`;
}
console.log(applyVariant("danger"));
// applyVariant("primry") would be a compile error, not a silent style bugProject Usage
In a real project, a design system's typed props are what let dozens of feature teams consume shared components confidently, since the compiler — not a style guide document — enforces correct usage.
Example: Project Usage
interface CardProps {
title: string;
footer?: string;
}
function renderCard(props: CardProps) {
return `${props.title}${props.footer ? " - " + props.footer : ""}`;
}
console.log(renderCard({ title: "Stats" }));Best Practices
Version your design system's typed API deliberately and document breaking prop changes in a changelog, since a prop type change is a breaking change for every consumer even if the runtime behavior looks similar.
Example: Best Practices
// CHANGELOG.md: "v2.0.0: ButtonProps.variant no longer accepts 'default'"
interface ButtonProps {
variant: "primary" | "secondary";
}
console.log("Breaking prop changes documented in a changelog");- Typing
variantasstringinstead of a literal union, so"primry"is accepted. - Not exporting the props interface, so consumers cannot reuse or extend it.
- Making too many props optional, so components can be used in ways that were never designed.
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first:
- Todo App with TypeScript
- REST API with Express + TypeScript
- React Dashboard with TypeScript
- CLI Tool with TypeScript
- Library with TypeScript
- Full Stack TypeScript App
- TypeScript Design System
- TypeScript Monorepo Project
- Authentication System
- Real-time App with Socket.io
- GraphQL API with TypeScript
- Microservices with TypeScript
- TypeScript Best Practices Review
- What to Learn Next