TypeScript：tsconfigと厳格モード

解答 == B

TypeScript の設定を意味するファイル名。

B

プロジェクトのルートに置く。このファイルがあると、tsc コマンドが自動的に設定を読み込む。

解答 == B

strict は複数の設定をまとめたもの。

B

noImplicitAny・strictNullChecks など7つ以上の設定が一度に有効になる。個別に書く必要がなく、新規プロジェクトではこれ1つで十分。

出力 == 42

引数の型を省略すると noImplicitAny でエラーになる。

function double(n: number): number {
  return n * 2;
}

console.log(double(21));

引数の型を書くのは noImplicitAny のため（TS05）。この設定を切れば省略できるが、型チェックの意味が失われる。

解答 == B

この設定が null と型を区別している。

B

TS06・TS08で学んだ null 安全がすべて失われる。s.length が実行時に落ちるまで気づけなくなる。

解答 == B

変換先のJavaScriptに関する設定。

B

古いブラウザ向けなら ES5、モダンな環境なら ES2020 以上を指定する。新しい書き方が使えるかどうかに影響する。

出力 == 該当なし

戻り値の型を string | null にし、?? で既定値を指定する。

function find(id: number): string | null {
  return id === 1 ? "ノートPC" : null;
}

console.log(find(99) ?? "該当なし");

strictNullChecks があるから、この確認を強制される。無効なら find(99).length と書けてしまい、実行時に落ちる。

解答 == B

unused は「使われていない」という意味。

B

消し忘れたコードや、書きかけの変数を見つけてくれる。コードの掃除に役立つが、開発中は煩わしいこともあるので、プロジェクトによって判断が分かれる。

解答 == B

いきなり全部有効にすると何が起きるか。

B

いきなり strict にすると数千件のエラーが出ることもある。noImplicitAny から始めて1つずつ潰していくのが現実的な移行手順。

出力2行。合格 / 不合格

if の中だけで return すると、else の経路で return が無くなる。

function judge(score: number): string {
  if (score >= 60) {
    return "合格";
  }
  return "不合格";
}

console.log(judge(80));
console.log(judge(50));

すべての経路で値を返している。if の中だけに return を書くと、条件を満たさない場合に undefined が返り、TS04で学んだエラーになる。

出力 == 処理に失敗しました

catch (e) の e は unknown。instanceof Error で確認する（TS14）。

try {
  throw new Error("処理に失敗しました");
} catch (e) {
  console.log(e instanceof Error ? e.message : "不明なエラー");
}

useUnknownInCatchVariables という設定によるもの。strict に含まれており、これが無ければ e は any になって確認せずに使えてしまう。

出力2行。18000 / 20000

割引率が null かどうかを確認してから計算する。

function calcTotal(price: number, rate: number | null): number {
  if (rate === null) {
    return price;
  }
  return Math.round(price * (1 - rate));
}

console.log(calcTotal(20000, 0.1));
console.log(calcTotal(20000, null));

3つの厳格チェックをすべて満たしている。引数に型があり、両方の経路で return し、null を確認してから計算に使っている。

出力2行が完全一致

find の結果は undefined になりうる。?? や条件分岐で対処する。

type Product = { name: string; price: number };

const items: Product[] = [{ name: "ノートPC", price: 128000 }];

function describe(name: string): string {
  const found = items.find((i) => i.name === name);

  if (!found) {
    return "該当なし";
  }

  return `${found.name}：${found.price.toLocaleString()}円`;
}

console.log(describe("ノートPC"));
console.log(describe("存在しない商品"));

strictNullChecks があるので、found の確認を省略できない。この設定が無ければ found.name と直接書けてしまい、実行時に落ちる。

出力 == 3件・合計139,700円

引数の型は Product[]、戻り値は string。reduce のコールバックの引数は推論されるので省略可。

type Product = { name: string; price: number };

function summarize(items: Product[]): string {
  const total: number = items.reduce((sum, i) => sum + i.price, 0);
  return `${items.length}件・合計${total.toLocaleString()}円`;
}

const products: Product[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
  { name: "キーボード", price: 8500 },
];

console.log(summarize(products));

reduce の中の sum と i は推論されるので型注釈は不要。関数の入口と出口だけ型を明示すれば、内部は推論に任せられる（TS05）。

出力2行。ノートPC / 不正なデータ

TS15で学んだ型ガードを使う。any を1つも使わずに書く。

type Product = { name: string; price: number };

function parse(v: unknown): Product | null {
  if (typeof v !== "object" || v === null) {
    return null;
  }

  const o = v as Record<string, unknown>;

  if (typeof o.name !== "string" || typeof o.price !== "number") {
    return null;
  }

  return { name: o.name, price: o.price };
}

for (const input of [{ name: "ノートPC", price: 128000 }, { name: 123 }]) {
  const p = parse(input);
  console.log(p ? p.name : "不正なデータ");
}

any を1つも使わずに外部データを扱えている。厳格モードは「any を書かせない」ための設定であり、代わりに unknown と型ガードで安全性を担保する。

出力3行。発送済 / 配達完了 / 完了

switch で分岐し、default に never チェックを入れる（TS16）。

type Status = "未発送" | "発送済" | "配達完了";

function nextStatus(current: Status): string {
  switch (current) {
    case "未発送":
      return "発送済";
    case "発送済":
      return "配達完了";
    case "配達完了":
      return "完了";
    default: {
      const exhaustive: never = current;
      return exhaustive;
    }
  }
}

for (const s of ["未発送", "発送済", "配達完了"] as Status[]) {
  console.log(nextStatus(s));
}

noImplicitReturns と never チェックが両方効いている。すべての経路で return し、かつすべてのステータスを処理していることが、二重に保証されている。