TypeScript型設計：オブジェクト・状態・ジェネリクス

interface、optional property、readonly、union・リテラル型、型ガード、ジェネリクスを扱う全23レッスンの型設計コースです。Profile・Work・ApplicationStateを題材に、APIや画面で扱うデータと状態を壊れにくい型として設計します。既存JavaScriptプロジェクトの移行は次のコースで扱います。

第5章クイズ

クイズ1

次のコードでエラーになるのは、どの行ですか。

TypeScript

let workId: string | number;

workId = "w-001";
workId = 7;
workId = true;

クイズ2

作品カテゴリとして "web" "design" "writing" の 3 つだけを許す型を作りたいとき、正しい書き方はどれですか。

クイズ3

通信状態を型で持つとき、type FetchStatus = "loading" | "success" | "error"; のほうが、isLoading と hasError の 2 つの真偽値で持つより優れているのはなぜですか。

クイズ4

次のコードでエラーになるのはどこですか。

TypeScript

function updatedLabel(updated: string | number): string {
  if (typeof updated === "number") {
    return updated + "日前に更新";
  }
  return updated.toFixed(1);
}

クイズ5

次のコードで "error" の case を書き忘れると、どうなりますか。

TypeScript

type FetchStatus = "loading" | "success" | "error";

function statusMessage(status: FetchStatus): string {
  switch (status) {
    case "loading":
      return "作品を読み込んでいます";
    case "success":
      return "作品を読み込みました";
  }
}

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。

第5章クイズ

クイズ1

次のコードでエラーになるのは、どの行ですか。

TypeScript

let workId: string | number;

workId = "w-001";
workId = 7;
workId = true;

クイズ2

作品カテゴリとして "web" "design" "writing" の 3 つだけを許す型を作りたいとき、正しい書き方はどれですか。

クイズ3

クイズ4

次のコードでエラーになるのはどこですか。

TypeScript

function updatedLabel(updated: string | number): string {
  if (typeof updated === "number") {
    return updated + "日前に更新";
  }
  return updated.toFixed(1);
}

クイズ5

次のコードで "error" の case を書き忘れると、どうなりますか。

TypeScript

type FetchStatus = "loading" | "success" | "error";

function statusMessage(status: FetchStatus): string {
  switch (status) {
    case "loading":
      return "作品を読み込んでいます";
    case "success":
      return "作品を読み込みました";
  }
}

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。