Type-Safe API Clients in 30 Lines of TypeScript

The dream

I want to call an endpoint like this:

```

const user = await api.get(’/users/:id’, { params: { id: 42 } })
//     ^? User

```

No casting, no .json() dance, no stringly-typed params.

If I typo the path or forget a required query, the red squiggles save me before I hit save.

Step 1: describe the API in one place

We’ll use a small schema object instead of a swagger file:

```

// apiSchema.ts
export interface ApiSchema {
 ’/users/:id’: {
   get: {
     params: { id: number }
     resp: User
   }
 }
 ’/posts’: {
   get: {
     query: { page?: number }
     resp: Post[]
   }
   post: {
     body: CreatePost
     resp: Post
   }
 }

}

```

That’s it—no code-gen, no extra tooling.

Step 2: 30 lines of pure magic

```

// apiClient.ts
type Method = ’get’ | ’post’ | ’put’ | ’patch’ | ’delete’
 
type PathParams<Path extends string> =
 Path extends `${string}:${infer Param}/${infer Rest}`
   ? { [K in Param | keyof PathParams<Rest>]: string | number }
   : Path extends `${string}:${infer Param}`
   ? { [K in Param]: string | number }
   : never
 
type Endpoint<M extends Method, P extends keyof ApiSchema> =
 ApiSchema[P][M] extends { params: infer Pr }
   ? { params: Pr }
   : ApiSchema[P][M] extends { query: infer Q }
   ? { query: Q }
   : ApiSchema[P][M] extends { body: infer B }
   ? { body: B }
   : {}
 
async function apiCall<M extends Method, P extends keyof ApiSchema>(
 method: M,
 path: P,
 ...[args]: keyof Endpoint<M, P> extends never
   ? []
   : [opts: Endpoint<M, P>]
) {
 let url = path as string
 const opts = (args || {}) as any
 
 // 1. fill path params
 if (opts.params) {
   for (const [k, v] of Object.entries(opts.params)) {
     url = url.replace(`:${k}`, encodeURIComponent(String(v)))
   }
 }
 
 // 2. build fetch options
 const init: RequestInit = { method: method.toUpperCase() }
 if (opts.body) init.body = JSON.stringify(opts.body)
 if (opts.query) {
   url += ’?’ + new URLSearchParams(opts.query as any).toString()
 }
 
 // 3. fetch & validate
 const res = await fetch(url, init)
 if (!res.ok) throw new Error(res.statusText)
 return (await res.json()) as ApiSchema[P][M][’resp’]
}
 
// tiny wrappers for each verb
export const api = {
 get: <P extends keyof ApiSchema>(p: P, ...a: any[]) => apiCall(’get’, p, ...a),
 post: <P extends keyof ApiSchema>(p: P, ...a: any[]) => apiCall(’post’, p, ...a),
 // …add the rest if you need them
}

```

Count the lines—29 without comments.

Drop it in your project and you’re done.

Step 3: use it like a pro

```

// anywhere.ts
const user = await api.get(’/users/:id’, { params: { id: 42 } })
//     ^? User
 
const posts = await api.get(’/posts’, { query: { page: 2 } })
//     ^? Post[]
 
const newPost = await api.post(’/posts’, { body: { title: ’Hello TS’ } })
//     ^? Post

```

Misspell id? TS yells.

Forget the body? TS yells.

Wrong HTTP verb? TS yells.

It’s like GraphQL, minus the schema language.

What about runtime?

Because we still call fetch, everything works in the browser or Node.

Add zod or io-ts inside apiCall if you want runtime validation too—still under 50 lines total.

Ship it

Copy the two files above, adjust ApiSchema to your endpoints, and delete every hand-rolled fetch wrapper cluttering your repo.

Type-safe, zero deps, and you wrote it yourself in the time it took to sip a coffee.

Not bad for 30 lines.