skills/typescript-patterns/SKILL.md
TypeScript type system patterns, generics, utility types, and strict mode best practices. Use when writing or reviewing TypeScript code.
npx skillsauth add sabahattinkalkan/antigravity-fullstack-hq typescript-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
"strict": true)any — use unknown for dynamic valuesconst over let, never var// ✅ Interface for objects/classes (extensible)
interface User {
id: string
email: string
name: string
}
// ✅ Type for unions, primitives, computed
type Status = 'active' | 'inactive' | 'pending'
type UserOrAdmin = User | Admin
type ReadonlyUser = Readonly<User>
// ✅ Reusable generic types
type ApiResponse<T> = {
data: T
error: string | null
status: number
}
type PaginatedResponse<T> = {
items: T[]
total: number
page: number
limit: number
}
// ✅ Generic functions
const findById = <T extends { id: string }>(items: T[], id: string): T | undefined =>
items.find(item => item.id === id)
// Pick specific fields
type UserPreview = Pick<User, 'id' | 'name'>
// Omit sensitive fields
type PublicUser = Omit<User, 'password' | 'salt'>
// Make all optional (for partial updates)
type UpdateUserDto = Partial<User>
// Make all required
type RequiredUser = Required<User>
// Make all readonly
type FrozenUser = Readonly<User>
// Extract from union
type ActiveStatus = Extract<Status, 'active' | 'pending'>
// Record type
type UserMap = Record<string, User>
// ✅ Type-safe error handling
type Result<T> =
| { success: true; data: T }
| { success: false; error: string }
const processUser = (id: string): Result<User> => {
try {
return { success: true, data: fetchUser(id) }
} catch (e) {
return { success: false, error: 'User not found' }
}
}
// Usage — TypeScript knows the type
const result = processUser('123')
if (result.success) {
console.log(result.data.name) // User
} else {
console.log(result.error) // string
}
// ✅ Custom type guards
const isUser = (value: unknown): value is User =>
typeof value === 'object' &&
value !== null &&
'id' in value &&
'email' in value
// ✅ Assertion functions
const assertDefined = <T>(value: T | null | undefined): T => {
if (value == null) throw new Error('Value is null or undefined')
return value
}
// ✅ Always type async return values
const fetchUser = async (id: string): Promise<User> => {
const res = await fetch(`/api/users/${id}`)
if (!res.ok) throw new Error('Failed to fetch user')
return res.json() as Promise<User>
}
// ✅ Error handling with unknown
try {
await fetchUser(id)
} catch (error) {
if (error instanceof Error) {
console.error(error.message)
}
}
// ❌ Never
const data: any = fetchData()
function process(x) { return x } // implicit any
const obj = {} as User // unsafe assertion
// @ts-ignore // suppressing errors
testing
Generating Excel files with xlsx/exceljs in Node.js. Use when generating .xlsx reports, data exports, dashboards, or spreadsheets from database data.
development
Playwright E2E patterns, Testing Library component tests, test selectors. Use when writing browser tests, component tests, or setting up an E2E testing pipeline for a Next.js or React app.
development
Web design best practices, accessibility, responsive layout, color contrast. Use when auditing a UI for a11y compliance, designing responsive layouts, or establishing design standards across a web app.
development
TDD red-green-refactor cycle, test structure, mocking patterns for Vitest/Jest. Use when starting a new feature, fixing a bug, or refactoring — write the test first, then the implementation.