跳到正文
cccskills
免费在 GitHub 公开

typescript-advanced

Use this skill to model complex data and application states with advanced TypeScript types. Examples cover constrained generics, conditional and mapped types, template literal types, discriminated unions, and runtime type guards, along with guidance for safer, clearer typing.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

实测评分 未实测

查看安装方法

适用场景

  • Deriving reusable types from existing data models
  • Modeling API results and application states
  • Checking uncertain external values safely
  • Enforcing patterns in route strings with types

包含的文件(1)

  • SKILL.md4.5 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Use this skill to make web interfaces more accessible. It provides patterns for semantic HTML, ARIA, keyboard navigation, forms, and color contrast, plus a checklist for evaluating WCAG AA accessibility with assistive technology.

中文简介正在准备中。当前显示英语简介。

  • Making menus and tabs keyboard accessible
  • Improving form labels and error announcements
  • Reviewing contrast and screen reader support
rohitg00/awesome-claude-code-toolkit27292026年5月12日 更新

Route broad SEO requests to the relevant platform module, such as LinkedIn, GitHub, or a CV. For work spanning several profiles or assets, it helps establish shared facts first and keeps the task focused on the needed context.

中文简介正在准备中。当前显示英语简介。

  • Choose a module for an unclear SEO request
  • Plan SEO work across LinkedIn and GitHub
  • Prepare shared facts before rewriting profile assets
rohitg00/awesome-claude-code-toolkit27292026年5月12日 更新

Plan REST APIs with consistent resource URLs, HTTP methods, error responses, pagination, filtering, and versioning. It also covers writing an OpenAPI specification, a machine-readable API contract that can guide implementation and validation.

中文简介正在准备中。当前显示英语简介。

  • Choose resource URLs and HTTP methods for an API
  • Plan pagination and filtering for list endpoints
  • Draft an OpenAPI specification before implementation
rohitg00/awesome-claude-code-toolkit27292026年5月12日 更新

Use this skill to plan or implement web authentication and access control. It covers JWT access and refresh tokens, OAuth2 with PKCE, sessions, and role-based permissions, with code examples and a checklist of common security practices.

中文简介正在准备中。当前显示英语简介。

  • Adding JWT access and refresh tokens to a web app
  • Setting up an OAuth2 login flow with PKCE
  • Restricting routes by user role
rohitg00/awesome-claude-code-toolkit27292026年5月12日 更新

Build AWS application infrastructure using patterns for Lambda, DynamoDB, S3, and CDK. The examples cover API handlers, data access design, file event processing, and infrastructure settings, helping you shape cloud resources as code and avoid common setup mistakes.

中文简介正在准备中。当前显示英语简介。

  • Design a Lambda API with DynamoDB
  • Plan DynamoDB keys around query needs
  • Process files uploaded to S3
rohitg00/awesome-claude-code-toolkit27292026年5月12日 更新

Create CI/CD workflows for GitHub Actions or GitLab CI that run validation, tests, builds, and deployments. Examples show job dependencies, caching, matrices, coverage reports, database services, and deployment gates to make automated delivery steps easier to organize.

中文简介正在准备中。当前显示英语简介。

  • Set up lint and test workflow jobs
  • Run tests across operating systems and versions
  • Build and deploy from the main branch
rohitg00/awesome-claude-code-toolkit27292026年5月12日 更新

查看 rohitg00 的全部技能

报告此技能的问题