カテゴリー「TypeScript」に関連するページ一覧 1ページ目

TypeScriptのプロジェクトでAPIをコールする際に使用するfetchの処理をエラーハンドリングなども含めて共通処理として実装します。まずはAPIからのレスポンスの共通の型を定義します。「正常時...

TypeScript fetchの共通処理を実装するでfetchの共通処理を作成しましたが、これはAPIからのレスポンスの形式があっている前提で処理を行っています。例えば以下はAPIのレスポンスの型は...

i18nextでステータスに応じた文言を表示する場合、翻訳キーを動的に切り替えることがあります。ただし、実行時に正しく表示できることと、翻訳キーの抽出ツールが使用箇所を検出できることは別です。今回は、...

fetchは、サーバーが400や500を返してもPromiseをrejectしません。そのため、HTTPステータスを確認し、レスポンスの形式を検証してから、画面で扱いやすいエラーへ変換する必要がありま...

APIから受け取るデータには、値が存在しない項目が含まれることがあります。TypeScriptでは、オプショナルチェーンの?.とNull合体演算子の??を使用すると、nullやundefinedを安全...

TypeScriptでは、typeとinterfaceのどちらでもオブジェクトの形を定義できます。似ている部分が多いため、最初はどちらを使えばよいか迷うことがあります。今回は基本的な書き方と、分かりや...

mapとfilterは、配列から新しい配列を作るメソッドです。どちらも元の配列を変更しませんが、役割は異なります。要素数を保ったまま各値を変換するならmap、条件に合う要素だけへ減らすならfilter...

unknownは、どのような値が入っているか分からないことを表す型です。外部から受け取ったJSONやcatchした値を、確認せず操作したくない場合に使います。anyは型チェックを無効にしますが、unk...

APIの結果が成功または失敗のどちらかになる場合、両方の項目を任意にした1つの型へ詰め込むと、存在しない値を読みやすくなります。Union型なら、あり得る状態を別々に表せます。statusはどの型かを...

関数へ配列を渡すと、その関数からpushやsortで元の配列を書き換えられます。読み取りだけをする関数では、引数をreadonlyにして意図を型で表します。totalの中でprices.push(40...