Master enterprise-grade TypeScript development with type-safe patterns, modern tooling, and framework integration. This skill provides comprehensive guidance for TypeScript 5.9+, covering type system fundamentals (generics, mapped types, conditional types, satisfies operator), enterprise patterns (error handling, validation with Zod), React integration for type-safe frontends, NestJS for scalable APIs, and LangChain.js for AI applications. Use when building type-safe applications, migrating JavaScript codebases, configuring modern toolchains (Vite 7, pnpm, ESLint, Vitest), implementing advanced type patterns, or comparing TypeScript with Java/Python approaches.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
Datei-Explorer
11 Dateien
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
name
mastering-typescript
description
Master enterprise-grade TypeScript development with type-safe patterns, modern tooling, and framework integration. This skill provides comprehensive guidance for TypeScript 5.9+, covering type system fundamentals (generics, mapped types, conditional types, satisfies operator), enterprise patterns (error handling, validation with Zod), React integration for type-safe frontends, NestJS for scalable APIs, and LangChain.js for AI applications. Use when building type-safe applications, migrating JavaScript codebases, configuring modern toolchains (Vite 7, pnpm, ESLint, Vitest), implementing advanced type patterns, or comparing TypeScript with Java/Python approaches.
Building type-safe React, NestJS, or Node.js applications
Migrating JavaScript codebases to TypeScript
Implementing advanced type patterns (generics, mapped types, conditional types)
Configuring modern TypeScript toolchains (Vite, pnpm, ESLint)
Designing type-safe API contracts with Zod validation
Comparing TypeScript approaches with Java or Python
Project Setup Checklist
Before starting any TypeScript project:
- [ ] Use pnpm for package management (faster, disk-efficient)
- [ ] Configure ESM-first (type: "module" in package.json)
- [ ] Enable strict mode in tsconfig.json
- [ ] Set up ESLint with @typescript-eslint
- [ ] Add Prettier for consistent formatting
- [ ] Configure Vitest for testing
Type System Quick Reference
Primitive Types
constname: string = ;
: = ;
: = ;
: = ;
: = ();
"Alice"
const
age
number
30
const
active
boolean
true
const
id
bigint
9007199254740991n
const
key
symbol
Symbol
"unique"
Union and Intersection Types
// Union: value can be one of several typestypeStatus = "pending" | "approved" | "rejected";
// Intersection: value must satisfy all typestypeEmployee = Person & { employeeId: string };
// Discriminated union for type-safe handlingtypeResult<T> =
| { success: true; data: T }
| { success: false; error: string };
function handleResult<T>(result: Result<T>): T | null {
if (result.success) {
return result.data; // TypeScript knows data exists here
}
console.error(result.error);
returnnull;
}
Type Guards
// typeof guardfunctionprocess(value: string | number): string {
if (typeof value === "string") {
return value.toUpperCase();
}
return value.toFixed(2);
}
// Custom type guardinterfaceUser { type: "user"; name: string }
interfaceAdmin { type: "admin"; permissions: string[] }
functionisAdmin(person: User | Admin): person is Admin {
return person.type === "admin";
}
The satisfies Operator (TS 5.0+)
Validate type conformance while preserving inference:
// Problem: Type assertion loses specific type infoconst colors1 = {
red: "#ff0000",
green: "#00ff00"
} asRecord<string, string>;
colors1.red.toUpperCase(); // OK, but red could be undefined// Solution: satisfies preserves literal typesconst colors2 = {
red: "#ff0000",
green: "#00ff00"
} satisfiesRecord<string, string>;
colors2.red.toUpperCase(); // OK, and TypeScript knows red exists
Generics Patterns
Basic Generic Function
function first<T>(items: T[]): T | undefined {
return items[0];
}
const num = first([1, 2, 3]); // number | undefinedconst str = first(["a", "b"]); // string | undefined
Constrained Generics
interfaceHasLength {
length: number;
}
function logLength<T extendsHasLength>(item: T): T {
console.log(item.length);
return item;
}
logLength("hello"); // OK: string has lengthlogLength([1, 2, 3]); // OK: array has lengthlogLength(42); // Error: number has no length
Add allowJs: true and checkJs: false to tsconfig.json
Rename files from .js to .ts one at a time
Add type annotations gradually
Enable stricter options incrementally
JSDoc for Gradual Typing
// Before full migration, use JSDoc/**
* @param {string} name
* @param {number} age
* @returns {User}
*/functioncreateUser(name, age) {
return { name, age };
}
