TypeScript API Docs

이 저장소는 TypeScript에서 타입 안전한 API fetcher를 생성하고 사용하는 방법에 대한 예제를 제공합니다. 자세한 설명과 블로그 게시물을 보려면 블로그를 방문하세요.

개요

이 프로젝트는 JSONPlaceholder와 GitHub API와 같은 다양한 서비스에 대한 API fetcher를 TypeScript로 생성하는 예제를 포함합니다. 이 fetcher들은 타입 안전성을 보장하고, API와 상호 작용하는 깔끔하고 유지보수 가능한 방법을 제공합니다.

type GitHubApiSpec =
  | ApiEndpoint<'GET', '/repos/:owner/:repo', { repo: string }, RepoDto>
  | ApiEndpoint<'GET', '/users/:username', { username: string }, UserDto>
  | ApiEndpoint<'POST', '/repos/:owner/:repo/issues', { owner: string }, IssueDto[]>;

export const GitHubApi = createFetcher<GitHubApiSpec>('https://api.github.com');

type JSONPlaceholderApiSpec =
  | ApiEndpoint<'GET', '/todos', void, TodoDto[]>
  | ApiEndpoint<'GET', '/todos/:id', void, TodoDto>
  | ApiEndpoint<'POST', '/todos', { title: string; userId: number; completed: boolean }, TodoDto>
  | ApiEndpoint<'GET', '/comments', void, CommentDto[]>
  | ApiEndpoint<'GET', '/comments/:id', void, CommentDto>
  | ApiEndpoint<'POST', '/comments', { name: string; email: string; body: string; postId: number }, CommentDto>;

export const JsonPlaceHolderApi = createFetcher<JSONPlaceholderApiSpec>('https://jsonplaceholder.typicode.com');

테스트

API fetcher에 대한 테스트가 포함되어 있습니다. 테스트를 실행하려면 다음 명령어를 사용합니다

pnpm install
pnpm test

# ✓ test/github-api.test.ts (2)
# ✓ test/json-place-holder-api.test.ts (6) 1267ms
#   Test Files  2 passed (2)
#        Tests  8 passed (8)

프로젝트 구조

.
├── src
│   ├── api-docs.d.ts
│   └── example
│       ├── github-example.api.ts
│       ├── helper
│       │   └── create-fetcher.ts
│       └── json-placeholder-example.api.ts
├── test
│   ├── github-api.test.ts
│   └── json-place-holder-api.test.ts