← 解説「関数型の書き方 — (x: number) => string」に戻る

サンプルコードで身につける: 関数型の書き方 — (x: number) => string

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1関数型を持つ変数

変数の型注釈に (input: number) => number という関数型を書く、最も基本の形です。「number を受け取り number を返す関数」だけがこの変数に入れられる、という制約を確かめます。

TypeScript

// doubleValue の型は「number を受け取り number を返す関数」
const doubleValue: (input: number) => number = function (input) {
  return input * 2;
};

console.log(doubleValue(10));
console.log(doubleValue(50));

2同じ関数型に別の実装を入れる

関数型さえ一致していれば、変数の中身の関数は差し替えられます。「円表記」から「ドル表記」へフォーマット処理を切り替えるような、実装の入れ替えを型が安全に支える例です。

TypeScript

// 「number を受け取り string を返す関数」が入る変数
let formatAmount: (amount: number) => string;

formatAmount = function (amount) {
  return amount + "円";
};
console.log(formatAmount(480));

// 型が同じ関数なら差し替えられる
formatAmount = function (amount) {
  return "$" + (amount / 100).toFixed(2);
};
console.log(formatAmount(480));

3関数を引数として受け取る

関数型が最も活躍する、コールバックを受け取る関数の例です。引数 operation の型を関数型で宣言しておけば、形の違う関数を渡した時点でエラーになり、取り違えを防げます。

TypeScript

// 第2引数は「number を受け取り number を返す関数」に限定される
function applyTwice(startValue: number, operation: (input: number) => number): number {
  return operation(operation(startValue));
}

const addTen: (input: number) => number = function (input) {
  return input + 10;
};

console.log(applyTwice(5, addTen)); // 5 → 15 → 25
console.log(applyTwice(3, function (input) {
  return input * input;
})); // 3 → 9 → 81

4変換関数を渡して配列を処理

配列と変換関数を受け取り、全要素を変換して返す自作の汎用関数です。map と同じ発想を自分で書いてみることで、「処理の本体を関数として外から渡す」設計の意味がつかめます。

TypeScript

function convertAll(sourceValues: number[], convert: (input: number) => string): string[] {
  const results: string[] = [];
  for (const sourceValue of sourceValues) {
    results.push(convert(sourceValue));
  }
  return results;
}

console.log(convertAll([480, 1200], function (input) {
  return input + "円";
}));
console.log(convertAll([480, 1200], function (input) {
  return (input * 1.1).toFixed(0) + "円(税込)";
}));

5バリデーション関数を差し替える

入力一覧と検証ルールの関数を受け取り、ルール違反の件数を数える実務寄りの例です。フォーム検証のように「ルールだけ差し替えたい」場面では、(input: string) => boolean のような関数型が共通の窓口になります。

TypeScript

function countInvalid(inputTexts: string[], isValid: (input: string) => boolean): number {
  let invalidCount = 0;
  for (const inputText of inputTexts) {
    if (!isValid(inputText)) {
      invalidCount = invalidCount + 1;
    }
  }
  return invalidCount;
}

const inputEntries: string[] = ["taro", "", "hanako", "veryverylongname"];

// ルール1: 空文字でないこと
console.log(countInvalid(inputEntries, function (input) {
  return input.length > 0;
}));
// ルール2: 8文字以内であること
console.log(countInvalid(inputEntries, function (input) {
  return input.length <= 8;
}));