Typescript

Write bulletproof TypeScript with strict patterns and zero `any` types

✨ The solution you've been looking for

Verified
Tested and verified by our team
12565 Stars

TypeScript strict patterns and best practices. Trigger: When implementing or refactoring TypeScript in .ts/.tsx (types, interfaces, generics, const maps, type guards, removing any, tightening unknown).

typescript type-safety patterns refactoring strict-mode generics interfaces best-practices
Repository

See It In Action

Interactive preview & real-world examples

Live Demo
Skill Demo Animation

AI Conversation Simulator

See how users interact with this skill

User Prompt

Help me refactor this function that uses `any` types to be type-safe: `function processData(input: any): any { return input.map(item => item.value); }`

Skill Processing

Analyzing request...

Agent Response

Properly typed function using generics and type guards with full type safety

Quick Start (3 Steps)

Get up and running in minutes

1

Install

claude-code skill install typescript

claude-code skill install typescript
2

Config

3

First Trigger

@typescript help

Commands

CommandDescriptionRequired Args
@typescript eliminate-any-types-from-legacy-codebaseTransform unsafe any types into proper TypeScript with unknown, generics, and type guardsNone
@typescript create-type-safe-configuration-objectsBuild const assertion patterns for configuration with derived types and autocompleteNone
@typescript design-clean-interface-hierarchiesStructure complex data models using flat interfaces and proper composition patternsNone

Typical Use Cases

Eliminate any types from legacy codebase

Transform unsafe any types into proper TypeScript with unknown, generics, and type guards

Create type-safe configuration objects

Build const assertion patterns for configuration with derived types and autocomplete

Design clean interface hierarchies

Structure complex data models using flat interfaces and proper composition patterns

Overview

Const Types Pattern (REQUIRED)

 1// ✅ ALWAYS: Create const object first, then extract type
 2const STATUS = {
 3  ACTIVE: "active",
 4  INACTIVE: "inactive",
 5  PENDING: "pending",
 6} as const;
 7
 8type Status = (typeof STATUS)[keyof typeof STATUS];
 9
10// ❌ NEVER: Direct union types
11type Status = "active" | "inactive" | "pending";

Why? Single source of truth, runtime values, autocomplete, easier refactoring.

Flat Interfaces (REQUIRED)

 1// ✅ ALWAYS: One level depth, nested objects → dedicated interface
 2interface UserAddress {
 3  street: string;
 4  city: string;
 5}
 6
 7interface User {
 8  id: string;
 9  name: string;
10  address: UserAddress;  // Reference, not inline
11}
12
13interface Admin extends User {
14  permissions: string[];
15}
16
17// ❌ NEVER: Inline nested objects
18interface User {
19  address: { street: string; city: string };  // NO!
20}

Never Use any

 1// ✅ Use unknown for truly unknown types
 2function parse(input: unknown): User {
 3  if (isUser(input)) return input;
 4  throw new Error("Invalid input");
 5}
 6
 7// ✅ Use generics for flexible types
 8function first<T>(arr: T[]): T | undefined {
 9  return arr[0];
10}
11
12// ❌ NEVER
13function parse(input: any): any { }

Utility Types

 1Pick<User, "id" | "name">     // Select fields
 2Omit<User, "id">              // Exclude fields
 3Partial<User>                 // All optional
 4Required<User>                // All required
 5Readonly<User>                // All readonly
 6Record<string, User>          // Object type
 7Extract<Union, "a" | "b">     // Extract from union
 8Exclude<Union, "a">           // Exclude from union
 9NonNullable<T | null>         // Remove null/undefined
10ReturnType<typeof fn>         // Function return type
11Parameters<typeof fn>         // Function params tuple

Type Guards

1function isUser(value: unknown): value is User {
2  return (
3    typeof value === "object" &&
4    value !== null &&
5    "id" in value &&
6    "name" in value
7  );
8}

Import Types

1import type { User } from "./types";
2import { createUser, type Config } from "./utils";

What Users Are Saying

Real feedback from the community

Environment Matrix

Dependencies

TypeScript 4.5+

Framework Support

React ✓ Vue.js ✓ Angular ✓ Node.js ✓ Express ✓ Next.js ✓ (recommended)

Context Window

Token Usage ~1K-3K tokens for typical refactoring tasks

Security & Privacy

Information

Author
prowler-cloud
Updated
2026-01-30
Category
architecture-patterns