TypeScript Patterns

Type safety patterns and naming conventions.

Quick Reference

Type declarations:

Interfaces for object shapes (supports declaration merging)
Types for unions, function signatures, utility types
Enums for fixed sets of values (never string literals)
Never any (use unknown + refinement)

Naming:

PascalCase: Types, interfaces, enums
camelCase: Variables, functions
UPPER_SNAKE_CASE: Constants
Affirmative booleans: isEnabled, hasPermission, canEdit

Interfaces vs Types

Use Interfaces for Objects

Benefits:

Supports declaration merging
Better error messages
Communicates extensibility

Use Types for Unions

Enums Over String Literals

Narrowing External Data

Discriminated Unions

Use kind discriminator with enum for exhaustiveness checking:

With GraphQL

Never Use any

Augmenting External Libraries

Naming Conventions

Generic Patterns

Constrained Generics

Type Assertions

Use sparingly and with caution:

Shared Schemas

Share types between client and server:

JavaScript Patterns - Async/await and error handling
Forms - Zod schema validation

Reference Files

For more detailed technical guidance, see these reference files:

typescript-style SKILL.md

Performance / Re-render Optimization

Code quality / JavaScript Patterns

On this page

Quick Reference

Interfaces vs Types

Use Interfaces for Objects

Use Types for Unions

Enums Over String Literals

Narrowing External Data

Discriminated Unions

With GraphQL

Never Use any

Augmenting External Libraries

TypeScript Patterns

Type safety patterns and naming conventions.

Quick Reference

Type declarations:

Interfaces for object shapes (supports declaration merging)
Types for unions, function signatures, utility types
Enums for fixed sets of values (never string literals)
Never any (use unknown + refinement)

Naming:

PascalCase: Types, interfaces, enums
camelCase: Variables, functions
UPPER_SNAKE_CASE: Constants
Affirmative booleans: isEnabled, hasPermission, canEdit

Interfaces vs Types

Use Interfaces for Objects

Benefits:

Supports declaration merging
Better error messages
Communicates extensibility

Use Types for Unions

Enums Over String Literals

Narrowing External Data

Discriminated Unions

Use kind discriminator with enum for exhaustiveness checking:

With GraphQL

Never Use any

Augmenting External Libraries

Naming Conventions

Generic Patterns

Constrained Generics

Type Assertions

Use sparingly and with caution:

Shared Schemas

Share types between client and server:

JavaScript Patterns - Async/await and error handling
Forms - Zod schema validation

Reference Files

For more detailed technical guidance, see these reference files:

typescript-style SKILL.md

Performance / Re-render Optimization

Code quality / JavaScript Patterns

On this page

Quick Reference

Interfaces vs Types

Use Interfaces for Objects

Use Types for Unions

Enums Over String Literals

Narrowing External Data

Discriminated Unions

With GraphQL

Never Use any

Augmenting External Libraries