# 【超便利】TypeScript & Protractorで関数型返却関数を使いこなしてコードをもっとスマートに

TypeScriptとProtractorにおける関数型プログラミング：関数型返却関数の型

関数型返却関数は、別の関数を返す関数として理解できます。この機能は、再帰、コールバック、デコレータなど、様々な高度なプログラミングパターンを構築する際に役立ちます。

しかし、関数が別の関数を返す場合、その型を適切に定義することが重要になります。型定義を誤ると、実行時エラーや予期しない動作を引き起こす可能性があります。

そこで今回は、TypeScriptとProtractorにおける関数型返却関数の型について、分かりやすく解説します。

関数型返却関数の基本

まず、関数型返却関数の基本的な構文を見てみましょう。

function createAdder(x: number): (y: number) => number {
  return (y: number) => x + y;
}

この例では、createAdder 関数は数値 x を引数とし、別の関数 (y: number) => number を返します。返される関数は、引数 y を受け取り、x と y の和を返します。

では、この関数型返却関数の型をどのように定義すればよいでしょうか？

TypeScriptでは、ジェネリック型を使って型を定義することができます。

function createAdder<T extends number>(x: T): (y: T) => T {
  return (y: number) => x + y;
}

この例では、createAdder 関数の型をジェネリック型 <T extends number> で定義しています。これは、x と y の型がどちらも number であることを意味します。

また、返される関数の型も (y: T) => T と定義しています。これは、返される関数が y という引数を受け取り、T 型の値を返すことを意味します。

Protractorにおける関数型返却関数

Protractorは、AngularおよびSeleniumを使用したWebアプリケーションのテスト自動化フレームワークです。Protractorでは、様々なテストシナリオを記述するために、様々な機能が提供されています。

これらの機能の中には、関数型返却関数を利用したものもあります。例えば、element.all() メソッドは、WebElementの配列を返す関数型返却関数です。

const elements = element.all(by.css('selector'));
elements.forEach(element => {
  // ... 各要素に対して処理を実行
});

この例では、element.all(by.css('selector')) メソッドは、CSSセレクタ selector に一致するすべてのWebElementの配列を返します。そして、forEach メソッドを使って、返された配列の各要素に対して処理を実行しています。

function createAdder(x: number): (y: number) => number {
  return (y: number) => x + y;
}

const addTen = createAdder(10);
const result = addTen(5);
console.log(result); // 15

addTen 変数には、createAdder(10) の結果が代入されます。これは、y にどんな数値を渡しても、常に10を足した値を返す関数です。

そして、result 変数には、addTen(5) の結果が代入されます。これは、addTen 関数に 5 を引数として渡した結果であり、15となります。

const elements = element.all(by.css('selector'));
elements.forEach(element => {
  element.click();
});

この例では、すべての要素に対して click() メソッドを実行していますが、条件に応じて処理を切り替えることもできます。

elements.forEach(element => {
  if (element.getText() === '特定のテキスト') {
    element.click();
  }
});

この例では、各要素のテキスト内容が "特定のテキスト" である場合のみ、click() メソッドを実行しています。

• ユーティリティ関数の作成
• 再帰関数の実装
• コールバック関数の処理
• デコレータの作成

A function type alias is a way to create a new name for an existing function type. This can be useful if you want to use the same function type in multiple places in your code.

type Adder = (x: number) => (y: number) => number;

function createAdder(x: number): Adder {
  return (y: number) => x + y;
}

const addTen: Adder = createAdder(10);
const result = addTen(5);
console.log(result); // 15

In this example, the Adder type alias is defined as a function that takes one number as an argument and returns another function that takes one number as an argument and returns a number. The createAdder function is then defined as a function that takes one number as an argument and returns a function of type Adder. Finally, the addTen variable is assigned the result of calling the createAdder function with the value 10. The result variable is then assigned the result of calling the addTen function with the value 5, which is 15.

Using a generic type

A generic type is a way to define a function type that can take different types of arguments and return different types of values. This can be useful if you want to write a function that can be used with a variety of different data types.

function createAdder<T extends number>(x: T): (y: T) => T {
  return (y: number) => x + y;
}

const addTen = createAdder(10);
const result = addTen(5);
console.log(result); // 15

const addFive = createAdder(5);
const otherResult = addFive(3);
console.log(otherResult); // 8

In this example, the createAdder function is defined as a generic function that takes one type parameter T and returns a function that takes one argument of type T and returns a value of type T. The addTen variable is then assigned the result of calling the createAdder function with the type parameter number and the value 10. The result variable is then assigned the result of calling the addTen function with the value 5, which is 15.

The addFive variable is then assigned the result of calling the createAdder function with the type parameter number and the value 5. The otherResult variable is then assigned the result of calling the addFive function with the value 3, which is 8.

Using an interface

An interface is a way to define a set of properties and methods that a type must implement. This can be useful if you want to enforce a certain structure on your code.

interface Adder<T extends number> {
  (y: T): T;
}

function createAdder<T extends number>(x: T): Adder<T> {
  return (y: number) => x + y;
}

const addTen: Adder<number> = createAdder(10);
const result = addTen(5);
console.log(result); // 15

const addFive: Adder<number> = createAdder(5);
const otherResult = addFive(3);
console.log(otherResult); // 8