Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@unhurried

TypeScript REST APIクライアント

TypeScript (WebpackもしくはNode.js) で利用できるREST APIクライアントライブラリを調査した。

まとめ

  • axiostyped-rest-clientがユーザー数が多く、開発も安定している。
    • 2019年11月時点ではaxiosの方が人気があるが、typed-rest-clientはTypeScript本家のMicrosoftがメンテしているため、デファクトになっていく可能性あり。
  • Web標準的にはFetch APIだが、現時点ではブラウザサポートが不完全であり、TypeScriptで型を利用する部分は自力で実装する必要がある。
  • Open API(Swagger)形式の仕様書がある場合はOpenAPI GeneratorでクライアントSDKを生成すると効率がよい。

ライブラリの利用例

OpenAPI Generator

クライアントSDK生成

CLIツールはNPMやDockerイメージなど多様な形式でインストールできる。(参考:CLI Installation

フレームワークに依存しないGeneratorには、axiosとfetchを使うものがあったが、上述の理由から前者のtypescript-axiosを選択した。以下のコマンドでプロジェクトのsrcディレクトリにクライアントSDKを出力する。

openapi-generator-cli generate -g typescript-axios -i ./openapi.yaml -o ./src/client-axios
SDKを利用したAPI呼び出し

OpenAPI仕様書に記載されるURLと実際の接続先が異なる場合は、コンストラクタのbasePathパラメータにベースURLを指定すればよい。

import { DefaultApi } from '@/client-axios';

const baseUrl = 'https://jsonplaceholder.typicode.com';
new DefaultApi({ basePath: baseUrl }).getToDo(1).then((res) => {
  console.log(res.data);
})

なお、出力コードがプロジェクトのLint設定と合わない場合は、検証対象外に入れておく。

# .eslintignore
src/client-axios

また、出力コード中でNode.jsのurlモジュールが使われているため、Webpack環境で型定義を webpack-env に限定している場合は、Node.jsモジュールの型定義も参照できるようにする必要がある。(参考:TypeScript設定リファレンス

// tsconfig.json
{
  "compilerOptions": {
    "types": ["webpack-env", "node"]
  }
}

axios

レスポンスボディの型をinterfaceとして定義して型パラメータに指定すればよい。

interface Todo {
  userId: number,
  id: number,
  title: string,
  completed: boolean,
}
import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/todos/1';
axios.get<Todo>(url).then((res) => {
  console.log(res.data);
});

参考

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?