Back to Skills

typescript

LobeHub TypeScript style and type-safety guide. Use when editing TS/TSX/MTS, fixing types, choosing interface vs type, avoiding any/object, import type, async flow, or ts-expect-error.

81,267stars15,766forksUpdated 8/5/2026

Security Assessment

Safe(96/100)
Security Score96/100

About typescript

This skill is LobeHub's internal TypeScript style and type-safety guide, applied when editing TS/TSX/MTS files in the lobe-chat codebase. It solves the problem of keeping a large project's TypeScript consistent and type-safe by codifying conventions for typing, async patterns, imports, code structure, UI/theming, and logging. It is a non-user-invocable reference document with no executable code.

The guide's type-safety rules favor inference over explicit annotations, accurate types (`Record<PropertyKey, unknown>` over `object`/`any`), `interface` for object shapes versus `type` for unions, `as const satisfies` patterns, and a preference order of `@ts-expect-error` over `@ts-ignore` over `as any`. It advocates ES module augmentation over `namespace`, and local, mergeable extensibility over centralized registries. The async section pushes an async-first approach for IO, explaining the asymmetric cost of function coloring and the narrow cases where `*Sync` is acceptable. Import rules enforce separate type imports and alphabetical sorting via the project's lint tooling. Code-structure guidance covers destructuring, named exports over default exports (with framework-required exceptions), reusing helpers from `packages/utils`, and replacing magic values with constants. UI guidance mandates `@lobehub/ui`/Ant Design components, dark-mode and mobile responsiveness, and the antd-style token system. A logging section warns never to log private information such as API keys and to always log errors in catch blocks.

Target users are contributors to lobe-chat (and, as a reference, TypeScript developers seeking a rigorous house style). Use cases include fixing types, choosing interface versus type, resolving import ordering, and writing new IO or UI code that matches the codebase.

FAQ

Who is this skill for?

It is primarily for contributors to the LobeHub lobe-chat codebase; it is marked user-invocable: false and encodes that project's house style. Other TypeScript developers can still read it as a rigorous style reference.

What are the key type-safety rules?

Avoid implicit `any`, prefer `Record<PropertyKey, unknown>` over `object`/`any`, use `interface` for object shapes and `type` for unions, prefer `as const satisfies`, and prefer `@ts-expect-error` over `@ts-ignore` over `as any`.

What is the async guidance?

New IO code must use async APIs at its boundaries (for example `fs/promises`), never `*Sync` by default, because sync-to-async migration forces rewriting every caller. `*Sync` is only acceptable inside an existing synchronous contract you do not control.

How should imports be written?

Use `import type { ... }` for type-only imports (not inline `import { type ... }`), keep separate type and value import statements, and sort specifiers alphabetically, matching the project's simple-import-sort and consistent-type-imports config.

Does it address security or logging?

Yes. It instructs never to log user-private information such as API keys, to use `console.error` in catch blocks, and to always log errors in `.catch()` callbacks rather than silently swallowing failures.

Install typescript

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill