TypeScript での Axios レスポンス
- TypeScript で Axios を使用する
- Axios ライブラリの型
- Axios を使用して TypeScript で REST API 呼び出しを行う
-
TypeScript で Axios
Configファイルを作成する
Axios は、バックエンド リソースへのリクエストの作成を管理するための一般的な JavaScript ライブラリです。 TypeScript に対する需要の高まりに伴い、型が Axios ライブラリに追加されました。
このチュートリアルでは、Axios を使用して TypeScript で REST API 呼び出しを行います。
TypeScript で Axios を使用する
最初のステップは、プロジェクトに Axios をインストールすることです。 Axios は NodeJs または React プロジェクトにインストールできます。
npm install axios
// or
yarn install axios
これで、Axios を他のパッケージと共にプロジェクトで使用できるようになりました。
Axios ライブラリの型
Axios Github リポジトリ では、いくつかのビルド済みのタイプを利用できます。 このチュートリアルでは、Axios の重要な型のいくつかに焦点を当てます。
export interface AxiosResponse<T = never> {
data: T;
status: number;
statusText: string;
headers: Record<string, string>;
config: AxiosRequestConfig<T>;
request?: any;
}
AxiosResponse は、GET や POST などの REST API 呼び出しによって Promise として返される応答オブジェクトです。
get<T = never, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;
post<T = never, R = AxiosResponse<T>>(url: string, data?: T, config?: AxiosRequestConfig<T>): Promise<R>;
上記のコードは、Axios の 2つの REST API メソッドとそのタイプを示しています。 AxiosRequestConfig は ここで 定義されたかなり大きなインターフェースです。
インターフェイスの重要なフィールドのいくつかは次のとおりです。
export interface AxiosRequestConfig<T = any> {
url?: string;
method?: Method;
baseURL?: string;
data?: T;
headers?: Record<string, string>;
params?: any;
...
}
したがって、要求の一部として baseURL または完全な URL を入れることができます。 ここで注目すべき重要なことの 1つは、ジェネリック型 T であり、任意の型を受け入れることができる AxiosRequestConfig と AxiosResponse の data フィールドです。
Axios を使用して TypeScript で REST API 呼び出しを行う
上記の型は、TypeScript で型指定された REST API 呼び出しを行うことができます。 電子商取引 Web サイトがバックエンドに REST API 呼び出しを行い、フロントエンドで利用可能なすべての本を表示するとします。
interface Book {
isbn : string;
name : string;
price : number;
author : string;
}
axios.get<Book[]>('/books', {
baseURL : 'https://ecom-backend-example/api/v1',
}).then( response => {
console.log(response.data);
console.log(response.status);
})
React を使用すると、次のような状態で、返されたデータを AxiosResponse の一部として保存することもできます。
const [books, setBooks] = React.useState<Book[]>([]);
axios.get<Book[]>('/books', {
baseURL : 'https://ecom-backend-example/api/v1',
}).then( response => {
setBooks(response.data);
})
TypeScript で Axios Config ファイルを作成する
Axios は多くの便利なタイプを提供し、アプリケーション全体で REST API 呼び出しを行うためにさらに使用できる config ファイルを作成するために使用できます。
interface Book {
isbn : string;
name : string;
price : number;
author : string;
}
const instance = axios.create({
baseURL: 'https://ecom-backend-example/api/v1',
timeout: 15000,
});
const responseBody = (response: AxiosResponse) => response.data;
const bookRequests = {
get: (url: string) => instance.get<Book>(url).then(responseBody),
post: (url: string, body: Book) => instance.post<Book>(url, body).then(responseBody),
delete: (url: string) => instance.delete<Book>(url).then(responseBody),
};
export const Books {
getBooks : () : Promise<Book[]> => bookRequests.get('/books'),
getSingleBook : (isbn : string) : Promise<Book> => bookRequests.get(`/books/${isbn}`),
addBook : (book : Book) : Promise<Book> => bookRequests.post(`/books`, book),
deleteBook : (isbn : string) : Promise<Book> => bookRequests.delete(`/books/${isbn}`)
}
したがって、アプリケーション全体で、config は次のように使用できます。
import Books from './api' // config added in api.ts file
const [books, setBooks] = React.useState<Book[]>([]);
Books.getPosts()
.then((data) => {
setBooks(data);
})
.catch((err) => {
console.log(err);
});
したがって、Axios を使用すると、REST API 呼び出しのクリーンで厳密に型指定された実装を作成できます。
