Frontend Typescript Standards

Frontend Typescript Standards

When to use this skill

• Setting up TypeScript in a new project
• Establishing coding standards
• Code reviews for TypeScript quality

Workflow

• Enable strict mode in tsconfig.json
• Use interfaces for object shapes
• Prefer type for unions and intersections
• Always type function parameters and returns
• Avoid any, use unknown instead

Instructions

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

Naming Conventions

• Interfaces: PascalCase with I prefix optional
• Types: PascalCase
• Enums: PascalCase
• Generics: Single capital letter or PascalCase

Type vs Interface

// Use interface for object shapes
interface User {
  id: string;
  name: string;
}

// Use type for unions, intersections
type Status = 'pending' | 'active' | 'inactive';
type Admin = User & { role: 'admin' };

Resources

• Enable all strict flags
• Type everything explicitly
• Use utility types (Partial, Pick, Omit)