이 저장소는 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent