moai-lang-typescript

name	moai-lang-typescript
description	TypeScript 5.9+ development specialist covering React 19, Next.js 16 App Router, type-safe APIs with tRPC, Zod validation, and modern TypeScript patterns. Use when developing TypeScript applications, React components, Next.js pages, or type-safe APIs.
license	Apache-2.0
compatibility	Designed for Claude Code
allowed-tools	Read Grep Glob mcp__context7__resolve-library-id mcp__context7__get-library-docs
user-invocable	false
metadata	{"version":"1.1.0","category":"language","status":"active","updated":"2026-01-11","modularized":"false","tags":"typescript, react, nextjs, frontend, fullstack"}
progressive_disclosure	{"enabled":true,"level1_tokens":100,"level2_tokens":5000}
triggers	{"keywords":["TypeScript","React","Next.js","tRPC","Zod",".ts",".tsx","tsconfig.json"],"languages":["typescript","tsx"]}

Quick Reference (30 seconds)

TypeScript 5.9+ Development Specialist - Modern TypeScript with React 19, Next.js 16, and type-safe API patterns.

Auto-Triggers: Files with .ts, .tsx, .mts, or .cts extensions, TypeScript configurations, React or Next.js projects

Core Stack:

• TypeScript 5.9: Deferred module evaluation, decorators, satisfies operator
• React 19: Server Components, use hook, Actions, concurrent features
• Next.js 16: App Router, Server Actions, middleware, ISR/SSG/SSR
• Type-Safe APIs: tRPC 11, Zod 3.23, tanstack-query
• Testing: Vitest, React Testing Library, Playwright

Quick Commands:

Create Next.js 16 project using npx create-next-app with latest, typescript, tailwind, and app flags. Install type-safe API stack with npm install for trpc server, client, react-query, zod, and tanstack react-query. Install testing stack with npm install D flag for vitest, testing-library react, and playwright test.

---

Implementation Guide (5 minutes)

TypeScript 5.9 Key Features

Satisfies Operator for Type Checking Without Widening:

Define Colors type as union of red, green, and blue string literals. Create palette object with red as number array, green as hex string, and blue as number array. Apply satisfies operator with Record of Colors to string or number array. Now palette.red can use map method because it is inferred as number array, and palette.green can use toUpperCase because it is inferred as string.

Deferred Module Evaluation:

Use import defer with asterisk as namespace from heavy module path. In function that needs the module, access namespace property which loads module on first use.

Modern Decorators Stage 3:

Create logged function decorator that takes target function and ClassMethodDecoratorContext. Return function that logs method name then calls target with apply. Apply logged decorator to class method that fetches data.

React 19 Patterns

Server Components Default in App Router:

For page component in app/users/[id]/page.tsx, define PageProps interface with params as Promise of object containing id string. Create async default function that awaits params, queries database for user, calls notFound if not found, and returns main element with user name.

use Hook for Unwrapping Promises and Context:

In client component marked with use client directive, import use from react. Create UserProfile component that takes userPromise prop as Promise of User type. Call use hook with the promise to suspend until resolved. Return div with user name.

Actions for Form Handling with Server Functions:

In server actions file marked with use server directive, import revalidatePath. Define CreateUserSchema with zod for name and email validation. Create async createUser function that takes FormData, parses with schema, creates user in database, and revalidates path.