skills/typescript-interface-vs-type/SKILL.md
Guides when to use interface vs type in TypeScript. Use this skill when defining object types, extending types, or choosing between interface and type aliases.
npx skillsauth add Chris-Maskey/opencode-config typescript-interface-vs-typeInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Use interface until you need features from type.
This is the official TypeScript recommendation from the TypeScript Handbook.
Use interface for:
Use type only when you need:
type Status = 'pending' | 'approved' | 'rejected'type Readonly<T> = { readonly [K in keyof T]: T[K] }type NonNullable<T> = T extends null | undefined ? never : Ttype Point = [number, number]type Handler = (event: Event) => voidinterface extends Over Intersection (&)When extending object types, always prefer interface extends over type intersections.
// Preferred
interface User {
name: string;
}
interface Admin extends User {
permissions: string[];
}
// Avoid
type User = {
name: string;
};
type Admin = User & {
permissions: string[];
};
With interface extends, TypeScript raises errors at the definition when extending with incompatible properties:
interface Base {
id: number;
}
// Error immediately at definition
interface Extended extends Base {
id: string; // Error: Type 'string' is not assignable to type 'number'
}
With intersections, errors only appear when accessing the incompatible property, making bugs harder to catch:
type Base = {
id: number;
};
// No error at definition
type Extended = Base & {
id: string;
};
// Error only when used
const item: Extended = { id: 'abc' }; // Error appears here, not at type definition
interface extends provides better TypeScript performance:
See TypeScript Performance Wiki for details.
tools
Anti-patterns and mistakes to avoid as a product manager. Use when evaluating leadership behaviors, improving team dynamics, reflecting on management practices, or onboarding new product managers.
development
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
testing
Design effective CTAs using visual attention and gaze psychology principles. Use when designing landing pages, button hierarchies, conversion elements, or optimizing user attention flow through interfaces.
tools
Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.