Belajar ElysiaJS - Eden Treaty: End-to-End Type Safety

#Pendahuluan

Setelah di episode 8 kita mengintegrasikan Drizzle ORM, pada episode ini kita akan memahami fitur paling powerful dari ElysiaJS: Eden Treaty — lapisan client yang memungkinkan type safety end-to-end tanpa code generation.

#Mengapa Eden Treaty Penting

Masalah utama dalam pengembangan full-stack TypeScript adalah gap antara tipe di server dan client. Dengan REST API tradisional, kalian harus mendefinisikan ulang tipe di client secara manual — atau menggunakan code generation yang menambah step dan menjaga sinkronisasi menjadi beban.

Eden Treaty menyelesaikan masalah ini dengan mengimpor tipe langsung dari server. Ketika kalian mengupdate tipe route di server, client otomatis mendapat update tanpa regenerasi apapun.

#Setup Eden Client

Setup Eden Treaty client

// server.ts
import { Elysia, t } from 'elysia'
 
const app = new Elysia()
  .get('/user/:id', ({ params }) => ({
    id: Number(params.id),
    name: 'John',
  }), {
    params: t.Object({ id: t.String() }),
    response: t.Object({
      id: t.Number(),
      name: t.String(),
    })
  })
  .listen(3000)
 
export type app = typeof app

Client: mengimpor tipe dari server

// client.ts
import { treaty } from '@elysiajs/eden'
import type { app } from './server'
 
const client = treaty(app)

#Type Inference di Client

#Autocomplete di IDE

Ketika kalian menulis kode client, IDE akan memberikan autocomplete untuk semua route, params, query, dan body — langsung dari tipe server:

Autocomplete otomatis di client

// IDE akan suggest: /user/:id, /user, dll.
const { data } = await client.user.get({
  params: { id: '123' }
})
// data otomatis typed: { id: number, name: string }

#Error Jika Akses Property Salah

Jika kalian mencoba mengakses property yang tidak ada di response type, TypeScript akan error di compile time:

TypeScript error untuk property salah

const { data } = await client.user.get({ params: { id: '123' } })
console.log(data.email) // Error: Property 'email' does not exist

#Update Server → Client Otomatis Update

Ketika kalian menambahkan field baru ke response di server, client otomatis mendapat field tersebut tanpa perubahan kode client.

#Request dan Response di Eden

Berbagai jenis request dengan Eden

// GET dengan query
const { data } = await client.search.get({ query: { q: 'hello' } })
 
// POST dengan body
const { data } = await client.user.post({
  name: 'John',
  email: 'john@example.com',
})
 
// PUT dengan params dan body
const { data } = await client.user.put({
  params: { id: '123' },
  body: { name: 'Jane' },
})

#Kapan Pakai Eden vs REST Client

Aspek	Eden Treaty	REST Client
Type safety	End-to-end	Manual/code gen
Setup	Minimal	Perlu schema export
Multi-runtime	TypeScript only	Semua bahasa
Public API	Tidak cocok	Sangat cocok
Full-stack TS	Ideal	Overhead

Note

Eden Treaty adalah pilihan ideal untuk full-stack TypeScript projects di mana server dan client menggunakan TypeScript. Untuk public API atau projects multi-bahasa, REST dengan OpenAPI documentation tetap lebih fleksibel.

#Penutup

Pada episode 9 ini, kalian telah memahami Eden Treaty — fitur yang membedakan ElysiaJS dari framework lain.

Inti yang harus dibawa pulang:

Eden Treaty mengimpor tipe langsung dari server ke client tanpa code generation.
Autocomplete, type checking, dan error detection otomatis di IDE.
Update tipe di server → client otomatis update.
Ideal untuk full-stack TypeScript, kurang cocok untuk public API multi-bahasa.

Di episode 10 selanjutnya kita akan memahami static files, serve, dan serialization — menyajikan file statis, custom serializer, file upload, dan streaming response. Sampai jumpa di episode 10!