Required<T> - オプショナルが多用されている型のうち関心のあるプロパティーだけの型を再定義して使いやすくする

筆者はaxiosではなくwindow.fetch()を常用するため、そのfetch()に渡す設定パラメータ群の扱いについて考慮を求められがちです。

サンプルコードではRequestInit型として定義されています。この型はlib.dom.d.tsにて定義されているため、import文なしにいきなり使うことができます。

このRequestInit型を一部引用します。

code:lib.dom.d.ts

interface RequestInit {

body?: BodyInit | null;

cache?: RequestCache;

credentials?: RequestCredentials;

headers?: HeadersInit;

//

}

このように、すべてのプロパティがOptional扱いとなっています。これはwindow.fetch()の提供されたインタフェースとしては正しいです。しかし、makeRequestWithPost()関数がPOST処理の共通化を図るためのものであるという立場上、ここでは「method: 'POST'があってもなくてもよい」とはいえません。こういった状況でRequired<T>が役に立ちます。

code:memo.ts

export function makeRequestWithPost<T extends object>(

body: T,

idempotencyKey: string

): Required<Pick<RequestInit, 'method' | 'headers' | 'body'>> {

return {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify(body),

};

}