TypeScript Expert Skill

Expert-level TypeScript patterns, ESLint best practices, and strict type handling.

Auto-Detection

This skill activates when:

• Working with .ts , .tsx , .js , .jsx files

• Type errors or ESLint issues detected

• User mentions TypeScript, types, or linting

1. Strict Null Handling

NEVER Use Implicit Truthiness

nullish_patterns[6]{bad,good,why}: if (str),if (str != null && str !== ''),Empty string '' is falsy if (arr),if (arr?.length > 0),Empty array [] is truthy if (num),if (num != null),Zero 0 is falsy but valid if (obj),if (obj != null),Check null not emptiness {count && <X/>},{count > 0 && <X/>},Renders "0" if count=0 value || default,value ?? default,|| treats '' and 0 as falsy

Examples

// ❌ BAD if (userName) { } if (items) { } if (count) { } const val = input || 'default';

// ✅ GOOD if (userName != null && userName !== '') { } if (items != null && items.length > 0) { } if (count != null) { } const val = input ?? 'default';

2. Type Safety Patterns

Strict TypeScript Config

{ "compilerOptions": { "strict": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitThis": true, "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true, "noFallthroughCasesInSwitch": true, "forceConsistentCasingInFileNames": true } }

Type Assertions

// ❌ BAD - Type assertion without validation const user = data as User;

// ✅ GOOD - Type guard with validation function isUser(data: unknown): data is User { return ( typeof data === 'object' && data !== null && 'id' in data && 'name' in data ); }

if (isUser(data)) { // data is typed as User }

// ✅ GOOD - Zod schema validation const UserSchema = z.object({ id: z.string(), name: z.string(), email: z.string().email(), }); const user = UserSchema.parse(data);

Discriminated Unions

// ✅ GOOD - Exhaustive type checking type Result<T> = | { status: 'success'; data: T } | { status: 'error'; error: Error } | { status: 'loading' };

function handleResult<T>(result: Result<T>) { switch (result.status) { case 'success': return result.data; case 'error': throw result.error; case 'loading': return null; default: // Exhaustiveness check const _exhaustive: never = result; return _exhaustive; } }

3. ESLint Best Practices

Recommended Rules

{ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/strict-type-checked", "plugin:@typescript-eslint/stylistic-type-checked" ], "rules": { "@typescript-eslint/strict-boolean-expressions": ["error", { "allowString": false, "allowNumber": false, "allowNullableObject": false }], "@typescript-eslint/no-unnecessary-condition": "error", "@typescript-eslint/prefer-nullish-coalescing": "error", "@typescript-eslint/prefer-optional-chain": "error", "@typescript-eslint/no-floating-promises": "error", "@typescript-eslint/no-misused-promises": "error", "@typescript-eslint/await-thenable": "error", "@typescript-eslint/no-explicit-any": "error", "@typescript-eslint/no-unsafe-assignment": "error", "@typescript-eslint/no-unsafe-member-access": "error", "@typescript-eslint/no-unsafe-call": "error", "@typescript-eslint/no-unsafe-return": "error", "@typescript-eslint/consistent-type-imports": "error", "@typescript-eslint/consistent-type-exports": "error", "no-implicit-coercion": "error", "eqeqeq": ["error", "always", { "null": "ignore" }] } }

4. Modern JavaScript/TypeScript

Required Patterns

modern_patterns[10]{feature,example}: Optional chaining,user?.profile?.name Nullish coalescing,value ?? 'default' Destructuring,const { name, age } = user Arrow functions,items.map(x => x.id) Template literals,Hello ${name} Spread operator,{ ...defaults, ...options } const/let (no var),const x = 1; let y = 2 Object shorthand,{ name, email } async/await,const data = await fetch() Array methods,.map() .filter() .find() .reduce()

Async Patterns

// ❌ BAD - Unhandled promise async function bad() { fetchData(); // Promise ignored }

// ✅ GOOD - Proper async handling async function good() { try { const data = await fetchData(); return data; } catch (error) { if (error instanceof ApiError) { handleApiError(error); } throw error; } }

// ✅ GOOD - Parallel execution const [users, posts] = await Promise.all([ fetchUsers(), fetchPosts(), ]);

5. Error Handling

Typed Errors

// ✅ Define error types class ValidationError extends Error { constructor( message: string, public readonly field: string, public readonly code: string ) { super(message); this.name = 'ValidationError'; } }

class ApiError extends Error { constructor( message: string, public readonly statusCode: number, public readonly response?: unknown ) { super(message); this.name = 'ApiError'; } }

// ✅ Type-safe error handling function handleError(error: unknown): string { if (error instanceof ValidationError) { return Validation failed: ${error.field} - ${error.message}; } if (error instanceof ApiError) { return API error ${error.statusCode}: ${error.message}; } if (error instanceof Error) { return error.message; } return 'Unknown error occurred'; }

6. Function Patterns

Function Overloads

// ✅ GOOD - Clear overloads function parse(input: string): object; function parse(input: string, reviver: (key: string, value: unknown) => unknown): object; function parse(input: string, reviver?: (key: string, value: unknown) => unknown): object { return JSON.parse(input, reviver); }

Generic Constraints

// ✅ GOOD - Constrained generics function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; }

// ✅ GOOD - Default generic type function createState<T = string>(initial: T): [T, (value: T) => void] { let state = initial; return [state, (value: T) => { state = value; }]; }

7. Import/Export Patterns

// ✅ GOOD - Type-only imports import type { User, Post } from './types'; import { fetchUser } from './api';

// ✅ GOOD - Consistent exports export type { User, Post }; export { fetchUser, createUser };

// ❌ BAD - Default exports (hard to refactor) export default function handler() { }

// ✅ GOOD - Named exports export function handler() { }

8. Utility Types Mastery

// Common utility types type UserPartial = Partial<User>; // All optional type UserRequired = Required<User>; // All required type UserReadonly = Readonly<User>; // All readonly type UserPick = Pick<User, 'id' | 'name'>; // Subset type UserOmit = Omit<User, 'password'>; // Exclude type UserRecord = Record<string, User>; // Dictionary

// Advanced patterns type NonNullableUser = NonNullable<User | null>; type UserKeys = keyof User; type UserValues = User[keyof User]; type ExtractStrings = Extract<User[keyof User], string>;

// Conditional types type ApiResponse<T> = T extends Error ? { error: T } : { data: T };

Quick Reference

checklist[8]{check,action}: Implicit truthiness,Use explicit null checks any type,Replace with unknown or proper type Type assertion,Use type guards instead Floating promises,Always await or handle Optional chaining,Use ?. for nested access Nullish coalescing,Use ?? not || Type imports,Use 'import type' for types Error handling,Use typed error classes

Version: 1.3.0