TypeScript：型推論とany

出力 == 140800

const price = 128000; だけで number と推論される。

const price = 128000;
const taxed = Math.round(price * 1.1);

console.log(taxed);

型注釈が無くても型は付いている。price は number と推論され、文字列を代入しようとすればエラーになる。

解答 == B

引数には代入される値が無いので、推論の材料が無い。

B

Parameter 'x' implicitly has an 'any' type というエラーになる。関数がどう呼ばれるか分からないため、TypeScriptは推論できない。

出力 == 42

function multiply(a: number, b: number) { return a * b; } と書く。戻り値の型は不要。

function multiply(a: number, b: number) {
  return a * b;
}

console.log(multiply(6, 7));

戻り値の型は中身から推論される。ただし複雑な関数では、明示したほうが意図が伝わる場合もある。

const data: ____ = "こんにちは";

if (typeof data === "string") {
  console.log(data.length);
}

出力 == 5

any より安全な「型が分からない」を表す型。小文字で7文字。

unknown

unknown は確認するまで何もできない。typeof で型を確かめて初めて、その型として扱えるようになる。

解答 == B

any は型チェックを無効にする。

B

any は存在しないプロパティの連鎖まで通してしまう。TypeScriptを使っているのに、JavaScriptと同じ実行時エラーで初めて気づくことになる。

出力 == マウス：3,200円

const product = { name: "マウス", price: 3200 }; だけでよい。

const product = { name: "マウス", price: 3200 };

console.log(`${product.name}：${product.price.toLocaleString()}円`);

オブジェクトの型も自動で推論される。{ name: string; price: number } と書いたのと同じ扱いになるので、product.stock と書けばエラーになる。

function half(n: ____) {
  return n / 2;
}

console.log(half(84));

出力 == 42

数値を表す型。

number

引数の型は必須、戻り値の型は任意——これが基本の使い分け。この関数の戻り値は number と正しく推論される。

解答 == B

const は再代入できないので、値が変わらないことが確定している。

B

const は値が変わらないので、その値そのものが型になる。この性質はTS06のリテラル型で重要な意味を持つ。

出力 == 84

typeof value === "number" で確認する。確認しないと使えない。

const value: unknown = 42;

if (typeof value === "number") {
  console.log(value * 2);
} else {
  console.log("数値ではありません");
}

unknown は確認を強制する。この if を書かずに value * 2 と書くとエラーになるので、検証を忘れることがない。

出力 == 1

filter を使う。配列も推論されるので型注釈は不要。

const prices = [128000, 3200, 8500];
const expensive = prices.filter((p) => p >= 10000);

console.log(expensive.length);

filter の中の引数 p も number と推論される。配列の型が分かっているので、その中身の型も自動的に決まる。

出力 == 合計：131,200円

配列もreduceの結果も推論に任せる。関数を作る場合は引数にだけ型を書く。

const items = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
];

const total = items.reduce((sum, i) => sum + i.price, 0);

console.log(`合計：${total.toLocaleString()}円`);

TS03で書いた同じ処理より、はるかに読みやすい。型は全て推論されているので、安全性は変わらないまま記述量だけが減っている。

出力 == undefined

const data: any = { name: "PC", price: 100 }; のあと data.stock を出力する。

const data: any = { name: "ノートPC", price: 128000 };

console.log(data.stock);

型注釈を書いているのに、まったく守られていない。もし { name: string; price: number } と正しく型を書いていれば、この行は実行前にエラーになっていた。

出力 == 140800

typeof で確認してから Number() で変換する。

const input: unknown = "128000";

if (typeof input === "string") {
  const price = Number(input);
  console.log(Math.round(price * 1.1));
}

外部から来るデータは unknown で受けるのが安全。APIのレスポンスやフォームの入力など、何が来るか分からないものは、確認してから使う。

出力3行。数値：42 / 文字列：あ / 不明な型

引数の型は unknown。typeof で分岐する。戻り値は string。

function describe(value: unknown): string {
  if (typeof value === "number") {
    return `数値：${value}`;
  }

  if (typeof value === "string") {
    return `文字列：${value}`;
  }

  return "不明な型";
}

console.log(describe(42));
console.log(describe("あ"));
console.log(describe(true));

if の中では、その型として扱える。typeof value === "number" を通った先では value は number 型になっている——これを型の絞り込みと呼び、TS09で詳しく扱う。

出力2行が完全一致

平均単価は価格の合計÷件数。toFixed(1) では3桁区切りにならないので、toLocaleString に小数の桁数を指定する方法もあるが、ここでは Number(avg.toFixed(1)).toLocaleString() で対応する。

const items = [
  { name: "ノートPC", price: 128000, stock: 5 },
  { name: "マウス", price: 3200, stock: 42 },
  { name: "キーボード", price: 8500, stock: 18 },
];

const totalValue = items.reduce((sum, i) => sum + i.price * i.stock, 0);
const avgPrice = items.reduce((sum, i) => sum + i.price, 0) / items.length;

console.log(`在庫総額：${totalValue.toLocaleString()}円`);
console.log(`平均単価：${Number(avgPrice.toFixed(1)).toLocaleString()}円`);

型注釈が1つも無いのに、全ての変数に型が付いている。items の構造から i.price の型まで芋づる式に推論されるので、打ち間違いはやはり検出される。