🎯

typescript-interface-vs-type

🎯Skill

from flpbalada/my-opencode-config

VibeIndex|
What it does

Guides developers on choosing between TypeScript interfaces and type aliases based on specific use cases and performance considerations.

πŸ“¦

Part of

flpbalada/my-opencode-config(40 items)

typescript-interface-vs-type

Installation

πŸ“‹ No install commands found in docs. Showing default command. Check GitHub for actual instructions.
Quick InstallInstall with npx
npx skills add flpbalada/my-opencode-config --skill typescript-interface-vs-type
1Installs
-
AddedFeb 4, 2026

Skill Details

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.

Overview

# TypeScript: Interface vs Type

Core Principle

Use interface until you need features from type.

This is the official TypeScript recommendation from the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html).

When to Use Interface

Use interface for:

  • Object type definitions
  • Extending other object types
  • Class implementations
  • Declaration merging (augmenting existing types)

When to Use Type

Use type only when you need:

  • Union types: type Status = 'pending' | 'approved' | 'rejected'
  • Mapped types: type Readonly = { readonly [K in keyof T]: T[K] }
  • Conditional types: type NonNullable = T extends null | undefined ? never : T
  • Tuple types: type Point = [number, number]
  • Function types (though interface can also work): type Handler = (event: Event) => void

Prefer `interface extends` Over Intersection (`&`)

When extending object types, always prefer interface extends over type intersections.

```typescript

// Preferred

interface User {

name: string;

}

interface Admin extends User {

permissions: string[];

}

// Avoid

type User = {

name: string;

};

type Admin = User & {

permissions: string[];

};

```

Reason 1: Better Error Messages

With interface extends, TypeScript raises errors at the definition when extending with incompatible properties:

```typescript

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:

```typescript

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

```

Reason 2: Better TypeScript Performance

interface extends provides better TypeScript performance:

  • Interfaces are cached by name - TypeScript computes the type once and reuses it
  • Intersections are recomputed every time they're used, which slows down type checking with complex types

See [TypeScript Performance Wiki](https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections) for details.

References

  • [TypeScript Handbook - Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
  • [TypeScript Performance Wiki](https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections)
  • [Total TypeScript - Intersections vs Interface Extends](https://www.totaltypescript.com/books/total-typescript-essentials/objects#intersections-vs-interface-extends)

More from this repository10

🎯
five-whys🎯Skill

Systematically uncovers root causes of problems through iterative questioning, revealing underlying issues beyond surface-level symptoms.

🎯
social-proof-psychology🎯Skill

Optimizes user trust and conversion by strategically displaying social validation through testimonials, user stats, and expert endorsements.

🎯
cognitive-fluency-psychology🎯Skill

Enhances user comprehension and engagement by applying cognitive fluency principles to simplify information processing across content and interfaces.

🎯
hooked-model🎯Skill

Designs habit-forming products by mapping user triggers, actions, rewards, and investments to create engaging, addictive product experiences.

🎯
cognitive-biases🎯Skill

Applies cognitive bias insights to optimize product design, user experiences, and decision-making strategies by leveraging psychological principles.

🎯
typescript-satisfies-operator🎯Skill

Validates TypeScript object types while preserving precise literal types, preventing type widening and catching type-related errors early.

🎯
typescript-best-practices🎯Skill

Enforces TypeScript best practices and coding standards through comprehensive linting and configuration rules for consistent, high-quality code.

🎯
status-quo-bias🎯Skill

Helps design product changes and migrations by understanding users' psychological resistance to change and creating strategies to overcome status quo bias.

🎯
kanban🎯Skill

Visualize and optimize team workflow by creating Kanban boards that track tasks, limit work-in-progress, and improve delivery efficiency.

🎯
theme-epic-story🎯Skill

I apologize, but I cannot generate a description without seeing the actual content or context of the "theme-epic-story" skill from the repository. Could you provide more details about what this spe...