Use when adding new error messages to React, or seeing "unknown error code" warnings.
npx skills add DonggangChen/antigravity-agentic-skills --skill "typescript_advanced"
Install specific skill from multi-skill repository
# Description
TypeScript 5+ advanced patterns, type utilities and best practices guide.
# SKILL.md
name: typescript_advanced
router_kit: FullStackKit
description: TypeScript 5+ advanced patterns, type utilities and best practices guide.
metadata:
skillport:
category: development
tags: [architecture, automation, best practices, clean code, coding, collaboration, compliance, debugging, design patterns, development, documentation, efficiency, git, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, standards, testing, typescript advanced, utilities, version control, workflow] - patterns
📘 TypeScript Advanced
TypeScript 5+ advanced patterns guide.
📋 Utility Types
// Partial - tüm prop'lar optional
type PartialUser = Partial<User>;
// Required - tüm prop'lar required
type RequiredUser = Required<User>;
// Pick - seçili prop'lar
type UserName = Pick<User, 'id' | 'name'>;
// Omit - prop'ları çıkar
type UserWithoutPassword = Omit<User, 'password'>;
// Record - key-value map
type UserMap = Record<string, User>;
// ReturnType - fonksiyon return tipi
type Result = ReturnType<typeof fetchUser>;
🔧 Advanced Patterns
Discriminated Unions
type Result<T> =
| { success: true; data: T }
| { success: false; error: string };
function handle(result: Result<User>) {
if (result.success) {
console.log(result.data); // User
} else {
console.log(result.error); // string
}
}
Template Literal Types
type EventName = `on${Capitalize<string>}`;
// "onClick", "onHover", etc.
type Route = `/${string}`;
Conditional Types
type NonNullable<T> = T extends null | undefined ? never : T;
type Flatten<T> = T extends Array<infer U> ? U : T;
🎯 Zod Integration
import { z } from 'zod';
const UserSchema = z.object({
id: z.string().uuid(),
email: z.string().email(),
age: z.number().min(0).max(120),
});
type User = z.infer<typeof UserSchema>;
⚡ Best Practices
- Strict mode always on
- Avoid
any- useunknowninstead - Prefer interfaces for objects
- Use const assertions for literals
- Type narrowing over type assertions
🔄 Workflow
Source: TypeScript 5.0 Release Notes & Total TypeScript Best Practices
Phase 1: Type Design & Schema
- [ ] Interface vs Type: Use
interfacefor object structures,typealiases for unions and complex types. - [ ] Zod Validation: Define schemas for runtime security and derive TS types with
z.infer. - [ ] Strict Check: Verify that
strict: truesetting is active intsconfig.json.
Phase 2: Advanced Logic Implementation
- [ ] Type Narrowing: Narrow
unknowntypes usingtype guards(is, in) orasserts. - [ ] Conditional & Mapped Types: Use
T extends U ? X : Ystructures to make repetitive types dynamic. - [ ] Generic Constraints: Increase type safety by constraining generic types with
extends.
Phase 3: Refactoring & Verification
- [ ] Remove
any: Replace allanyusages withunknownor specific union types. - [ ] Performance Audit: Verify that complex recursive types do not affect build time.
- [ ] Documentation: Document advanced types with
@param,@returnsand@typeParamtags.
Checkpoints
| Phase | Verification |
|---|---|
| 1 | Are eslint-plugin-typescript errors cleared? |
| 2 | Are all cases handled with "Discriminated Unions"? |
| 3 | Are type definitions consistent with real runtime data? |
TypeScript Advanced v1.5 - With Workflow
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.