Use when adding new error messages to React, or seeing "unknown error code" warnings.
npx skills add autohandai/community-skills --skill "typescript-refactoring-patterns"
Install specific skill from multi-skill repository
# Description
Expert TypeScript refactoring patterns for cleaner, type-safe code
# SKILL.md
name: typescript-refactoring-patterns
description: Expert TypeScript refactoring patterns for cleaner, type-safe code
license: MIT
compatibility: typescript 5.0+
allowed-tools: read_file write_file apply_patch search_with_context
TypeScript Refactoring Patterns
Core Principles
- Type Narrowing Over Type Assertions - Use type guards and discriminated unions instead of
ascasts - Const Assertions for Literals - Use
as constfor immutable literal types - Generic Constraints - Prefer
extendsconstraints overany - Branded Types - Use branded types for domain-specific validation
Refactoring Patterns
Extract Discriminated Union
When you see multiple boolean flags, refactor to discriminated union:
// Before
interface User {
isAdmin: boolean;
isGuest: boolean;
permissions?: string[];
}
// After
type User =
| { role: 'admin'; permissions: string[] }
| { role: 'guest' }
| { role: 'member'; permissions: string[] };
Replace Conditional with Polymorphism
When you see switch statements on type, use the strategy pattern:
// Before
function process(item: Item) {
switch (item.type) {
case 'a': return processA(item);
case 'b': return processB(item);
}
}
// After
const processors: Record<ItemType, (item: Item) => Result> = {
a: processA,
b: processB,
};
const process = (item: Item) => processors[item.type](item);
Extract Type Guard
When narrowing types, create reusable type guards:
function isNonNullable<T>(value: T): value is NonNullable<T> {
return value !== null && value !== undefined;
}
// Usage
const items = array.filter(isNonNullable);
Use Branded Types for Validation
Prevent primitive obsession with branded types:
type UserId = string & { readonly brand: unique symbol };
type Email = string & { readonly brand: unique symbol };
function createUserId(id: string): UserId {
if (!isValidUuid(id)) throw new Error('Invalid user ID');
return id as UserId;
}
Code Smell Detectors
Watch for these patterns and refactor:
- any types (replace with unknown + type guards)
- Non-null assertions ! (add proper checks)
- Type assertions as (use type guards)
- Optional chaining abuse ?.?.?. (restructure data)
- Index signatures without validation
Quick Wins
- Enable
strict: truein tsconfig - Use
satisfiesfor type checking without widening - Prefer
readonlyarrays and objects - Use
unknownfor external data, validate at boundaries
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.