ElysiaJS + Eden Treaty: `typeof` 하나로 서버에서 클라이언트까지 TypeScript 타입 연결하기

// v1.4 이전: 기존 Zod 스키마를 그대로 쓸 수 없어 별도 재작성 필요
const userSchema = z.object({ name: z.string(), email: z.string().email() })
 
// 아래처럼 다시 작성해야 했음
body: t.Object({ name: t.String(), email: t.String({ format: 'email' }) })

import { z } from 'zod'
 
const userSchema = z.object({
  name: z.string(),
  email: z.string().email()
})
 
app.post('/user', ({ body }) => body, { body: userSchema })
// Zod 스키마가 검증과 OpenAPI 문서화에 그대로 활용됨

mkdir my-app && cd my-app
bun init -y
mkdir -p apps/api apps/web packages/shared

{
  "name": "my-app",
  "private": true,
  "workspaces": ["apps/*", "packages/*"]
}

cd apps/api && bun add elysia @elysiajs/swagger

// apps/api/src/app.ts
import { Elysia, t } from 'elysia'
import { swagger } from '@elysiajs/swagger'
 
const userRoutes = new Elysia({ prefix: '/user' })
  .get('/:id', ({ params }) => ({
    id: params.id,
    name: 'Alice',
    createdAt: new Date().toISOString()
  }), {
    params: t.Object({ id: t.String() }),
    detail: { summary: '사용자 조회', tags: ['user'] }
  })
  .post('/', ({ body }) => ({
    // Bun은 Web API crypto를 전역으로 제공하므로 별도 import 없이 사용 가능
    id: crypto.randomUUID(),
    ...body
  }), {
    body: t.Object({
      name: t.String({ minLength: 1 }),
      email: t.String({ format: 'email' })
    }),
    detail: { summary: '사용자 생성', tags: ['user'] }
  })
 
export const app = new Elysia()
  .use(swagger({ path: '/docs' }))
  .use(userRoutes)
 
export type App = typeof app

// apps/api/src/index.ts (진입점 전용)
import { app } from './app'
 
app.listen(3000)
console.log('서버가 http://localhost:3000 에서 실행 중입니다')

// apps/api/package.json
{
  "name": "api",
  "main": "./src/app.ts"
}

// packages/shared/package.json
{
  "name": "shared",
  "version": "0.0.1",
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "dependencies": {
    "api": "workspace:*"
  }
}

// packages/shared/src/index.ts
export type { App } from 'api'

{
  "dependencies": {
    "shared": "workspace:*",
    "@elysiajs/eden": "latest"
  }
}

// apps/web/src/lib/api.ts
import { treaty } from '@elysiajs/eden'
import type { App } from 'shared'
 
export const client = treaty<App>('http://localhost:3000')

// apps/web/src/components/UserProfile.tsx
import { client } from '../lib/api'
 
async function fetchUser(id: string) {
  const { data, error } = await client.user({ id }).get()
  // { id }는 경로 파라미터 /:id에 매핑됨
 
  if (error) {
    // error.status: number, error.value: unknown
    console.error(`에러 ${error.status}:`, error.value)
    return null
  }
 
  // data: { id: string; name: string; createdAt: string }
  // 서버 응답 타입이 그대로 추론됨
  return data
}
 
async function createUser(name: string, email: string) {
  const { data, error } = await client.user.post({ name, email })
  // body 타입이 맞지 않으면 컴파일 에러 발생
  return { data, error }
}

// apps/api/src/plugins/db.ts
import { Elysia } from 'elysia'
import { drizzle } from 'drizzle-orm/bun-sqlite'
import { Database } from 'bun:sqlite'
import * as schema from '../schema'
 
const sqlite = new Database('app.db')
const db = drizzle(sqlite, { schema })
 
export const withDb = new Elysia()
  .decorate('db', db)  // 요청마다 재생성하지 않고 싱글턴 주입

// apps/api/src/routes/user.ts
import { Elysia, t } from 'elysia'
import { withDb } from '../plugins/db'
 
export const userRoutes = new Elysia({ prefix: '/user' })
  .use(withDb)
  .get('/:id', async ({ params, db, error }) => {
    // db: BunSQLiteDatabase 타입 자동 추론
    const user = await db.query.users.findFirst({
      where: (u, { eq }) => eq(u.id, params.id)
    })
    if (!user) return error(404, 'Not Found')
    // error() 헬퍼를 써야 Eden Treaty의 에러 타입 추론이 유지됨
    // new Response(...)를 직접 반환하면 클라이언트의 error 타입 추론이 깨짐
    return user
  }, {
    params: t.Object({ id: t.String() })
  })

// 서버 - app.ts에 추가
export const app = new Elysia()
  .ws('/chat', {
    body: t.Object({ message: t.String() }),
    response: t.Object({ from: t.String(), message: t.String() }),
    message(ws, body) {
      ws.send({ from: 'server', message: body.message })
    }
  })

// 클라이언트
const chat = client.chat.subscribe()
 
chat.send({ message: '안녕하세요' })
// { message: string } 타입 강제
 
chat.on('message', ({ data }) => {
  // data: { from: string; message: string }
  console.log(data.from, data.message)
})

// apps/api/src/app.test.ts
import { describe, it, expect } from 'bun:test'
import { treaty } from '@elysiajs/eden'
import { app } from './app'  // index.ts가 아닌 app.ts — listen 없음
 
const client = treaty(app)
 
describe('User API', () => {
  it('사용자를 생성할 수 있습니다', async () => {
    const { data, error } = await client.user.post({
      name: 'Bob',
      email: 'bob@example.com'
    })
 
    expect(error).toBeNull()
    expect(data?.name).toBe('Bob')
  })
})

// 위험: 런타임 의존성이 클라이언트 번들에 포함될 수 있음
import { app } from 'api'
 
// 안전: 타입만 가져옴
import type { App } from 'api'