MCPInstall

typescript-advanced

Advanced TypeScript patterns including generics, conditional types, mapped types, template literals, and type guards

Installs
192
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/rohitg00/awesome-claude-code-toolkit --skill typescript-advanced
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads typescript-advanced automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

TypeScript Advanced

Generics with Constraints

interface HasId {
  id: string;
}

function findById<T extends HasId>(items: T[], id: string): T | undefined {
  return items.find(item => item.id === id);
}

function groupBy<T, K extends string | number>(
  items: T[],
  keyFn: (item: T) => K
): Record<K, T[]> {
  return items.reduce((acc, item) => {
    const key = keyFn(item);
    (acc[key] ??= []).push(item);
    return acc;
  }, {} as Record<K, T[]>);
}

type ApiResponse<T> = {
  data: T;
  meta: { page: number; total: number };
};

async function fetchApi<T>(url: string): Promise<ApiResponse<T>> {
  const res = await fetch(url);
  return res.json();
}

Conditional Types

type IsString<T> = T extends string ? true : false;

type Flatten<T> = T extends Array<infer U> ? U : T;

type UnwrapPromise<T> = T extends Promise<infer U> ? UnwrapPromise<U> : T;

type FunctionReturn<T> = T extends (...args: any[]) => infer R ? R : never;

type ExtractRouteParams<T extends string> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? Param | ExtractRouteParams<Rest>
    : T extends `${string}:${infer Param}`
      ? Param
      : never;

type Params = ExtractRouteParams<"/users/:userId/posts/:postId">;

Mapped Types

type Readonly<T> = { readonly [K in keyof T]: T[K] };

type Optional<T> = { [K in keyof T]?: T[K] };

type Nullable<T> = { [K in keyof T]: T[K] | null };

type PickByType<T, V> = {
  [K in keyof T as T[K] extends V ? K : never]: T[K];
};

interface User {
  id: string;
  name: string;
  age: number;
  active: boolean;
}

type StringFields = PickByType<User, string>;

type EventMap<T> = {
  [K in keyof T as `on${Capitalize<string & K>}`]: (value: T[K]) => void;
};

type UserEvents = EventMap<{ login: User; logout: string }>;

Discriminated Unions

type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) return { ok: false, error: "Division by zero" };
  return { ok: true, value: a / b };
}

const result = divide(10, 2);
if (result.ok) {
  console.log(result.value);
} else {
  console.error(result.error);
}

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rect"; width: number; height: number }
  | { kind: "triangle"; base: number; height: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle": return Math.PI * shape.radius ** 2;
    case "rect": return shape.width * shape.height;
    case "triangle": return 0.5 * shape.base * shape.height;
  }
}

Type Guards

function isNonNull<T>(value: T | null | undefined): value is T {
  return value != null;
}

function hasProperty<K extends string>(
  obj: unknown,
  key: K
): obj is Record<K, unknown> {
  return typeof obj === "object" && obj !== null && key in obj;
}

const values = [1, null, 2, undefined, 3].filter(isNonNull);

function assertNever(value: never): never {
  throw new Error(`Unexpected value: ${value}`);
}

Utility Type Combinations

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

type StrictOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &
  { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys];

type UpdateUserInput = RequireAtLeastOne<{ name: string; email: string; age: number }>;

Anti-Patterns

  • Using any instead of unknown for values of uncertain type
  • Type assertions (as) when a type guard would be safer
  • Overly complex generic signatures that reduce readability
  • Not using discriminated unions for state machines or result types
  • Using enum when a union of string literals suffices
  • Ignoring strictNullChecks in tsconfig

Checklist

  • strict: true enabled in tsconfig
  • unknown used instead of any for external data
  • Type guards validate runtime types safely
  • Discriminated unions model state with exhaustive switches
  • Generic constraints (extends) prevent misuse
  • Mapped types used to derive related types from a source
  • Utility types (Pick, Omit, Partial) preferred over manual retyping
  • Template literal types used for string pattern enforcement

FAQ

What does the typescript-advanced skill do?

Advanced TypeScript patterns including generics, conditional types, mapped types, template literals, and type guards

How do I install typescript-advanced?

Run npx skills add https://github.com/rohitg00/awesome-claude-code-toolkit --skill typescript-advanced in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/typescript-advanced/ (personal) or .claude/skills/typescript-advanced/ (project).

Which AI agents can use typescript-advanced?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is typescript-advanced safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains typescript-advanced?

It is published by rohitg00 in rohitg00/awesome-claude-code-toolkit. It has 192 recorded installs.

More from rohitg00/awesome-claude-code-toolkit

View all →

devops-automation

rohitg00/awesome-claude-code-toolkit

CI/CD pipeline design with GitHub Actions, Docker, Kubernetes, Helm, and GitOps patterns

DevOps & Cloud267 installs

accessibility-wcag

rohitg00/awesome-claude-code-toolkit

Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing

Frontend & Design225 installs

database-optimization

rohitg00/awesome-claude-code-toolkit

Query optimization, indexing strategies, and database performance tuning for PostgreSQL and MySQL

Data & Databases211 installs

react-patterns

rohitg00/awesome-claude-code-toolkit

React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition

Frontend & Design211 installs

websocket-realtime

rohitg00/awesome-claude-code-toolkit

Real-time communication patterns with WebSocket, Socket.io, Server-Sent Events, and scaling strategies

Backend & APIs210 installs

python-best-practices

rohitg00/awesome-claude-code-toolkit

Pythonic code with modern type hints, dataclasses, async patterns, packaging, and testing

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.