TypeScript：関数の型

出力 == 10

function add(a: number, b: number): number { return a + b; } と書く。

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(3, 7));

引数の型は名前のあと、戻り値の型は丸カッコのあと。この2箇所を書くだけで、関数の使い方が型として固定される。

解答 == B

戻り値の型を number と宣言している。

B

JS08で「なぜか undefined が返る」と悩んだ問題が、書いた時点で分かる。「number を返すと宣言したのに返していない」とTypeScriptが指摘してくれる。

出力 == 42

const double = (n: number): number => n * 2; と書く。

const double = (n: number): number => n * 2;

console.log(double(21));

アロー関数でも型の付け方は同じ。1行で書ける場合は return と波カッコを省略できる（JS08）。

function showMessage(text: string): ____ {
  console.log(text);
}

showMessage("完了しました");

出力 == 完了しました

「何も返さない」を表す型。小文字で4文字。

void

void は「戻り値が無い」ことを明示する型。書かなくても推論されるが、明示すると「この関数は値を返さない」という意図が伝わる。

解答 == B

引数の数も型チェックの対象になる。

B

Expected 2 arguments, but got 1 というエラーになる。JavaScriptなら undefined のまま計算されて NaN になっていた場面。

出力2行。1100 / 1080

既定値は rate: number = 0.1 のように書く。

function withTax(price: number, rate: number = 0.1): number {
  return Math.round(price * (1 + rate));
}

console.log(withTax(1000));
console.log(withTax(1000, 0.08));

既定値を書くと型注釈は省略できるが、明示したほうが読みやすい。よく使う値を既定値にしておくと、呼び出し側が簡潔になる。

function greet(name: string, title____: string): string {
  return title ? `${title} ${name}` : name;
}

console.log(greet("田中"));

出力 == 田中

「あってもなくてもよい」を表す1文字の記号。

?

省略可能な引数は必須引数より後ろに置く。順序を逆にすると「必須の引数は省略可能な引数の後には置けない」というエラーになる。

解答 == B

省略可能な引数を先に書くと、呼び出し側はどう指定すればよいか。

B

もし許されたら f(5) の5がどちらの引数か分からなくなる。だから省略可能な引数は必ず後ろに置く決まりになっている。

出力 == ノートPC：128,000円

引数の型は { name: string; price: number } と書く（TS03）。

function format(item: { name: string; price: number }): string {
  return `${item.name}：${item.price.toLocaleString()}円`;
}

console.log(format({ name: "ノートPC", price: 128000 }));

オブジェクトを引数に取る関数は実務で頻出。型を書いておくと、呼び出し側が渡すべきプロパティが明確になる。

出力 == 60

引数の型は number[]、戻り値は number。reduce を使う（JS09）。

function sum(nums: number[]): number {
  return nums.reduce((total, n) => total + n, 0);
}

console.log(sum([10, 20, 30]));

配列を受け取り、1つの値を返すという形は集計処理の基本。reduce の中の引数の型は、配列の型から自動的に推論される。

出力2行が完全一致

三項演算子で判定する。出力は for...of で2件を回すか、2回書いてもよい。

function shippingFee(price: number): number {
  return price >= 5000 ? 0 : 600;
}

for (const price of [4800, 12000]) {
  console.log(`${price.toLocaleString()}円 → 送料${shippingFee(price)}円`);
}

1つのルールを1つの関数に閉じ込める。送料の基準が変わっても、この関数だけを直せばよい（JS08と同じ考え方）。

出力2行。18000 / 20000

isMember: boolean = false のように既定値を付ける。

function memberPrice(price: number, isMember: boolean = false): number {
  return isMember ? Math.round(price * 0.9) : price;
}

console.log(memberPrice(20000, true));
console.log(memberPrice(20000));

既定値を「安全な側」に設定するのがコツ。会員フラグを渡し忘れても、うっかり割引されることはない。

出力 == ノートPC(128,000円), マウス(3,200円), キーボード(8,500円)

引数は { name: string; price: number }[]、戻り値は string[]。map を使う。

function formatAll(items: { name: string; price: number }[]): string[] {
  return items.map((i) => `${i.name}(${i.price.toLocaleString()}円)`);
}

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

console.log(formatAll(products).join(", "));

配列を受け取り、別の型の配列を返す。{...}[] から string[] へ型が変わることが、戻り値の型注釈から読み取れる。

出力3行。OK / 名前が未入力です / 名前が長すぎます

trim() で前後の空白を除いてから判定する。21文字は "あ".repeat(21) で作れる。

function validateName(name: string): string {
  const trimmed: string = name.trim();

  if (trimmed.length === 0) {
    return "名前が未入力です";
  }

  if (trimmed.length > 20) {
    return "名前が長すぎます";
  }

  return "OK";
}

console.log(validateName("ノートPC"));
console.log(validateName(""));
console.log(validateName("あ".repeat(21)));

すべての分岐で return を書く必要がある。1つでも return を忘れた経路があると、TypeScriptが「値を返さない場合がある」と指摘してくれる。

出力2行。[10,20,30] / [1,4,9] の形式

関数の型は (n: number) => number と書く。applyAll(nums: number[], fn: (n: number) => number): number[] の形。

function applyAll(
  nums: number[],
  fn: (n: number) => number
): number[] {
  return nums.map(fn);
}

console.log(applyAll([1, 2, 3], (n) => n * 10).join(","));
console.log(applyAll([1, 2, 3], (n) => n ** 2).join(","));

関数そのものにも型が付けられる。(n: number) => number は「数値を受け取って数値を返す関数」という型。JS09の高階関数が、型で守られるようになった。