moai-lang-typescript

Original source / Raw SKILL.md

---
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.
version: 1.0.0
category: language
tags:
  - typescript
  - react
  - nextjs
  - frontend
  - fullstack
updated: 2025-12-07
status: active
---

## Quick Reference (30 seconds)

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

Auto-Triggers: `.ts`, `.tsx`, `.mts`, `.cts` files, TypeScript configurations, React/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:
```bash
# Create Next.js 16 project
npx create-next-app@latest --typescript --tailwind --app

# Install type-safe API stack
npm install @trpc/server @trpc/client @trpc/react-query zod @tanstack/react-query

# Install testing stack
npm install -D vitest @testing-library/react @playwright/test
```

---

## Implementation Guide (5 minutes)

### TypeScript 5.9 Key Features

Satisfies Operator - Type checking without widening:
```typescript
type Colors = "red" | "green" | "blue";
const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255],
} satisfies Record<Colors, string | number[]>;

palette.red.map((n) => n * 2); // Works - red is number[]
palette.green.toUpperCase();   // Works - green is string
```

Deferred Module Evaluation:
```typescript
import defer * as analytics from "./heavy-analytics";
function trackEvent(name: string) {
  analytics.track(name); // Loads module on first use
}
```

Modern Decorators (Stage 3):
```typescript
function logged<T extends (...args: any[]) => any>(
  target: T,
  context: ClassMethodDecoratorContext
) {
  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
    console.log(`Calling ${String(context.name)}`);
    return target.apply(this, args);
  };
}

class API {
  @logged
  async fetchUser(id: string) { return fetch(`/api/users/${id}`); }
}
```

### React 19 Patterns

Server Components (Default in App Router):
```typescript
// app/users/[id]/page.tsx - Server Component
interface PageProps { params: Promise<{ id: string }>; }

export default async function UserPage({ params }: PageProps) {
  const { id } = await params;
  const user = await db.user.findUnique({ where: { id } });
  if (!user) notFound();
  return <main><h1>{user.name}</h1></main>;
}
```

use() Hook - Unwrap Promises and Context:
```typescript
"use client";
import { use } from "react";

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // Suspends until resolved
  return <div>{user.name}</div>;
}
```

Actions - Form Handling with Server Functions:
```typescript
// app/actions.ts
"use server";
import { revalidatePath } from "next/cache";
import { z } from "zod";

const CreateUserSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
});

export async function createUser(formData: FormData) {
  const validated = CreateUserSchema.parse({
    name: formData.get("name"),
    email: formData.get("email"),
  });
  await db.user.create({ data: validated });
  revalidatePath("/users");
}
```

useActionState for Form Status:
```typescript
"use client";
import { useActionState } from "react";

export function CreateUserForm() {
  const [state, action, isPending] = useActionState(createUser, null);
  return (
    <form action={action}>
      <input name="name" disabled={isPending} />
      <button disabled={isPending}>{isPending ? "Creating..." : "Create"}</button>
      {state?.error && <p className="error">{state.error}</p>}
    </form>
  );
}
```

### Next.js 16 App Router

Route Structure:
```
app/
  layout.tsx          # Root layout
  page.tsx            # Home page (/)
  loading.tsx         # Loading UI
  error.tsx           # Error boundary
  api/route.ts        # API route (/api)
  users/
    page.tsx          # /users
    [id]/page.tsx     # /users/:id
  (marketing)/about/page.tsx  # /about (route group)
```

Metadata API:
```typescript
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: { default: "My App", template: "%s | My App" },
  description: "Modern TypeScript application",
};

export async function generateMetadata({ params }): Promise<Metadata> {
  const { id } = await params;
  const user = await getUser(id);
  return { title: user.name };
}
```

Server Actions with Validation:
```typescript
"use server";
import { z } from "zod";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

const UpdateUserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(2).max(100),
  email: z.string().email(),
});

export async function updateUser(prevState: any, formData: FormData) {
  const result = UpdateUserSchema.safeParse(Object.fromEntries(formData));
  if (!result.success) {
    return { errors: result.error.flatten().fieldErrors };
  }
  await db.user.update({ where: { id: result.data.id }, data: result.data });
  revalidatePath(`/users/${result.data.id}`);
  redirect(`/users/${result.data.id}`);
}
```

### Type-Safe APIs with tRPC

Server Setup:
```typescript
// server/trpc.ts
import { initTRPC, TRPCError } from "@trpc/server";

const t = initTRPC.context<Context>().create();

export const router = t.router;
export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(async ({ ctx, next }) => {
  if (!ctx.session?.user) throw new TRPCError({ code: "UNAUTHORIZED" });
  return next({ ctx: { ...ctx, user: ctx.session.user } });
});
```

Router Definition:
```typescript
import { z } from "zod";
import { router, publicProcedure, protectedProcedure } from "../trpc";

export const userRouter = router({
  getById: publicProcedure
    .input(z.object({ id: z.string().uuid() }))
    .query(({ input, ctx }) => ctx.db.user.findUnique({ where: { id: input.id } })),

  create: protectedProcedure
    .input(z.object({ name: z.string().min(2), email: z.string().email() }))
    .mutation(({ input, ctx }) => ctx.db.user.create({ data: input })),
});
```

Client Usage:
```typescript
"use client";
export function UserList() {
  const { data, isLoading } = trpc.user.list.useQuery({ page: 1 });
  const createUser = trpc.user.create.useMutation();
  if (isLoading) return <div>Loading...</div>;
  return <ul>{data?.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}
```

### Zod Schema Patterns

Complex Validation:
```typescript
import { z } from "zod";

const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(2).max(100),
  email: z.string().email(),
  role: z.enum(["admin", "user", "guest"]),
  createdAt: z.coerce.date(),
}).strict();

type User = z.infer<typeof UserSchema>;

const CreateUserSchema = UserSchema.omit({ id: true, createdAt: true })
  .extend({ password: z.string().min(8), confirmPassword: z.string() })
  .refine((d) => d.password === d.confirmPassword, {
    message: "Passwords don't match", path: ["confirmPassword"],
  });
```

### State Management

Zustand for Client State:
```typescript
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";

interface AuthState {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  devtools(persist((set) => ({
    user: null,
    login: (user) => set({ user }),
    logout: () => set({ user: null }),
  }), { name: "auth-storage" }))
);
```

Jotai for Atomic State:
```typescript
import { atom } from "jotai";
import { atomWithStorage } from "jotai/utils";

const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2);
const themeAtom = atomWithStorage<"light" | "dark">("theme", "light");
```

---

## Advanced Patterns

For comprehensive documentation including advanced TypeScript patterns, performance optimization, testing strategies, and deployment configurations, see:

- [reference.md](reference.md) - Complete API reference, Context7 library mappings, advanced type patterns
- [examples.md](examples.md) - Production-ready code examples, full-stack patterns, testing templates

### Context7 Integration

```typescript
// TypeScript - mcp__context7__get_library_docs("/microsoft/TypeScript", "decorators satisfies", 1)
// React 19 - mcp__context7__get_library_docs("/facebook/react", "server-components use-hook", 1)
// Next.js 16 - mcp__context7__get_library_docs("/vercel/next.js", "app-router server-actions", 1)
// tRPC - mcp__context7__get_library_docs("/trpc/trpc", "procedures middleware", 1)
// Zod - mcp__context7__get_library_docs("/colinhacks/zod", "schema validation", 1)
```

---

## Works Well With

- `moai-domain-frontend` - UI components, styling patterns
- `moai-domain-backend` - API design, database integration
- `moai-library-shadcn` - Component library integration
- `moai-workflow-testing` - Testing strategies and patterns
- `moai-foundation-quality` - Code quality standards
- `moai-essentials-debug` - Debugging TypeScript applications

---

## Quick Troubleshooting

TypeScript Errors:
```bash
npx tsc --noEmit                    # Type check only
npx tsc --generateTrace ./trace     # Performance trace
```

React/Next.js Issues:
```bash
npm run build                       # Check for build errors
npx next lint                       # ESLint check
rm -rf .next && npm run dev         # Clear cache
```

Type Safety:
```typescript
// Exhaustive check
function assertNever(x: never): never { throw new Error(`Unexpected: ${x}`); }

// Type guard
function isUser(v: unknown): v is User {
  return typeof v === "object" && v !== null && "id" in v;
}
```

---

Version: 1.0.0
Last Updated: 2025-12-07
Status: Production Ready