TypeScript 완전 가이드 — 타입 레벨 프로그래밍·Generics·Zod·tRPC·TanStack (Season 2 Ep 4, 2025)

interface Duck { quack: () => void }
const obj = { quack: () => console.log('quack') };
const d: Duck = obj; // OK — 구조적 호환

// 컴파일 전
function greet<T extends string>(name: T): T { return name; }

// 컴파일 후 (JS)
function greet(name) { return name; }

type Hello = <const T>(x: T) => T;
const result = Hello(['a', 'b']); // readonly ['a', 'b']

function logged(target: any, ctx: ClassMethodDecoratorContext) {
  return function (this: any, ...args: any[]) {
    console.log(`calling ${String(ctx.name)}`);
    return target.apply(this, args);
  };
}

class Foo {
  @logged
  bar() {}
}

{
  using file = await fs.open('log');
  // 스코프 벗어나면 자동으로 [Symbol.dispose]() 호출
}

const config = {
  port: 3000,
  host: 'localhost',
} satisfies Record<string, string | number>;

// config.port는 여전히 number로 좁혀짐
// satisfies는 검증만, 타입 넓히지 않음

type Concat<T extends any[], U extends any[]> = [...T, ...U];
type Result = Concat<[1, 2], [3, 4]>; // [1, 2, 3, 4]

type Event = `on${Capitalize<'click' | 'hover'>}`; // 'onClick' | 'onHover'
type Route = `/users/${string}`;

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type Result =
  | { ok: true; value: string }
  | { ok: false; error: Error };

function handle(r: Result) {
  if (r.ok) { r.value } // 타입 좁혀짐
  else { r.error }
}

const Color = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Color[keyof typeof Color]; // 'red' | 'blue'

function createStreetLight<C extends string>(
  colors: C[],
  default_?: NoInfer<C>,
): void {}

createStreetLight(['red', 'yellow'], 'red'); // OK
createStreetLight(['red', 'yellow'], 'blue'); // Error — NoInfer로 막힘

function identity<T>(x: T): T { return x; }
const a = identity(42);       // a: number
const b = identity('hello');  // b: string

function getLength<T extends { length: number }>(x: T): number {
  return x.length;
}

type Ref<T = string> = { current: T };
const r: Ref = { current: 'hi' };

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
const name = pluck({ name: 'Alice', age: 30 }, 'name'); // name: string

type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Partial<T> = { [K in keyof T]?: T[K] };
type Pick<T, K extends keyof T> = { [P in K]: T[P] };

type IsString<T> = T extends string ? true : false;
type A = IsString<'hello'>; // true
type B = IsString<42>;       // false

type ToArray<T> = T extends any ? T[] : never;
type X = ToArray<string | number>; // string[] | number[]

type First<T extends any[]> = T extends [infer H, ...any[]] ? H : never;
type Last<T extends any[]> = T extends [...any[], infer L] ? L : never;

type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;

type Brand<T, B> = T & { __brand: B };
type UserID = Brand<string, 'UserID'>;
type OrderID = Brand<string, 'OrderID'>;

function fetchUser(id: UserID) {}
const uid = 'u_123' as UserID;
fetchUser(uid); // OK
// fetchUser('raw string'); // Error

type CamelCase<S extends string> =
  S extends `${infer Head}_${infer Tail}`
    ? `${Head}${Capitalize<CamelCase<Tail>>}`
    : S;

type A = CamelCase<'user_name_age'>; // 'userNameAge'

type ExtractParams<S extends string> =
  S extends `${string}:${infer Param}/${infer Rest}`
    ? Param | ExtractParams<`/${Rest}`>
    : S extends `${string}:${infer Param}`
    ? Param
    : never;

type R = ExtractParams<'/users/:id/posts/:postId'>;
// 'id' | 'postId'

type ParseSelect<S extends string> =
  S extends `SELECT ${infer Cols} FROM ${string}`
    ? Cols extends `${infer First}, ${infer Rest}`
      ? First | ParseSelect<`SELECT ${Rest} FROM X`>
      : Cols
    : never;

import { z } from 'zod';

const UserSchema = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
  age: z.number().int().positive(),
  role: z.enum(['admin', 'user']),
});

type User = z.infer<typeof UserSchema>; // 자동 타입 추론

// 검증
const user = UserSchema.parse(untrustedData);
// 실패 시 ZodError throw, 또는 .safeParse()로 result 반환

const PostSchema = z.object({
  title: z.string().min(1).max(100),
  tags: z.array(z.string()).min(1).max(5),
  publishedAt: z.coerce.date(), // string -> Date 자동 변환
  author: UserSchema,           // 중첩
}).strict(); // 추가 필드 금지

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

const t = initTRPC.create();

export const appRouter = t.router({
  userById: t.procedure
    .input(z.object({ id: z.string() }))
    .query(async ({ input }) => {
      return await db.user.findUnique({ where: { id: input.id } });
    }),

  createUser: t.procedure
    .input(z.object({ email: z.string().email() }))
    .mutation(async ({ input }) => {
      return await db.user.create({ data: input });
    }),
});

export type AppRouter = typeof appRouter;

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';

export const trpc = createTRPCReact<AppRouter>();

// 컴포넌트
const { data, isLoading } = trpc.userById.useQuery({ id: 'u_1' });
// data 타입이 서버 return 타입으로 자동 추론됨

const { data, isLoading, error } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  staleTime: 5 * 60 * 1000,
  refetchOnWindowFocus: true,
});

const rootRoute = createRootRoute();
const usersRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/users/$userId',
  component: UserComponent,
  loader: ({ params }) => fetchUser(params.userId),
});

// URL → 파라미터 → 컴포넌트 props까지 타입 안전

bun install
bun run dev
bun test
bun build ./src/index.ts

deno run --allow-net main.ts
deno task dev

// turbo.json
{
  "tasks": {
    "build": { "dependsOn": ["^build"], "outputs": [".next/**"] },
    "test": { "dependsOn": ["build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

bunx @biomejs/biome init
bunx @biomejs/biome check --write ./src

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const result = await streamText({
  model: openai('gpt-4o'),
  messages,
  tools: {
    weather: {
      description: 'Get weather',
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => fetchWeather(city),
    },
  },
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}