この記事について
TypeScriptの関数で最低限知っておきたいポイントを駆け足でまとめてみました。各種深掘りはしないので予めご了承ください。
レストパラメーター
型安全な可変長引数を引数として受け取る場合に使用します。
Rest parameters are treated as a boundless number of optional parameters. When passing arguments for a rest parameter, you can use as many as you want; you can even pass none. The compiler will build an array of the arguments passed in with the name given after the ellipsis (...), allowing you to use it in your function.
参考文献：「Rest Parameters」
function getTotal(...numbers: number[]): number {
let total = 0;
numbers.forEach((num) => total += num);
return total;
}
console.log(getTotal()); // 0
console.log(getTotal(10, 20)); // 30
console.log(getTotal(10, 20, 30)); // 60
注意点としては1つの関数につき最大1つまでしかレストパラメーターは使えません。（呼び出し元の構文から推測できると思いますが）
thisの型付け
JavaScriptにおいてcallメソッドを使ってメソッドに引数を渡す場合、thisがメソッド側が期待するオブジェクトでなかった時に実行時エラーを起こしてしてしまうというリスクが存在します。
function fancyDate(){
return `${this.getMonth() + 1}/${this.getDate()}/${this.getFullYear()}`
}
console.log(fancyDate.call(new Date)) // "8/30/2021"
TypeScriptではcallメソッドなどで渡すthisの型を指定することが可能で、要求するthisをbindしなかった場合は型エラーを起こしてくれます。
function fancyDate(this:Date){
return `${this.getMonth() + 1}/${this.getDate()}}/${this.getFullYear()}`
}
fancyDate.call(new Date)
// lib.es5.d.ts(342, 67): An argument for 'thisArg' was not provided.
fancyDate.call()
ジェネレーター
function *という構文を使うとジェネレーター関数を生成することができます。
function * is the syntax used to create a generator function. Calling a generator function returns a generator object. The generator object just follows the iterator interface (i.e. the next, return and throw functions).
参考文献：「Generators」
ジェネレーター内部でyeildで戻り値を指定することが可能で次の呼び出しまで実行は休止されるので、一見無限ループしそうなコードも呼び出し毎にループさせることができます。（nextメソッドを呼ぶことで1ループさせることができます）
function* infiniteSequence() {
var i = 0;
while(true) {
yield i++;
}
}
var iterator = infiniteSequence();
while (true) {
console.log(iterator.next()); // { value: xxxx, done: false } forever and ever
}
イテレーター
イテレーターは一連の値を利用するための方法、反復可能なオブジェクトです。またにオブジェクト指向言語におけるデザインパターンの一種でもあります。
Iterator itself is not a TypeScript or ES6 feature, Iterator is a Behavioral Design Pattern common for Object oriented programming languages.
参考文献：「Iterators」
ここでいう反復可能なオブジェクトとは以下のinterfaceを実装するオブジェクトです。
interface Iterator<T> {
next(value?: any): IteratorResult<T>;
return?(value?: any): IteratorResult<T>;
throw?(e?: any): IteratorResult<T>;
}
以下のコードは「TypeScript Deep Dive」に記載されていたフィボナッチ計算のプログラムです。
class Fib implements IterableIterator<number> {
protected fn1 = 0;
protected fn2 = 1;
constructor(protected maxValue?: number) {}
public next(): IteratorResult<number> {
var current = this.fn1;
this.fn1 = this.fn2;
this.fn2 = current + this.fn1;
if (this.maxValue != null && current >= this.maxValue) {
return {
done: true,
value: null
}
}
return {
done: false,
value: current
}
}
[Symbol.iterator](): IterableIterator<number> {
return this;
}
}
let fib = new Fib();
fib.next() //{ done: false, value: 0 }
fib.next() //{ done: false, value: 1 }
fib.next() //{ done: false, value: 1 }
fib.next() //{ done: false, value: 2 }
fib.next() //{ done: false, value: 3 }
fib.next() //{ done: false, value: 5 }
let fibMax50 = new Fib(50);
console.log(Array.from(fibMax50)); // [ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ]
let fibMax21 = new Fib(21);
for(let num of fibMax21) {
console.log(num); //Prints fibonacci sequence 0 to 21
}
IterableIteratorのinterfaceは次のように定義されていますのでnext(value?: any): IteratorResult<T>と[Symbol.iterator](): IterableIterator<T>を実装しなくてはいけません。
interface IterableIterator<T> extends Iterator<T> {
[Symbol.iterator](): IterableIterator<T>;
}
呼び出しシグネチャ
呼び出しシグネチャを使用すると呼び出し可能なプロパティを定義することができます。
In JavaScript, functions can have properties in addition to being callable. However, the function type expression syntax doesn’t allow for declaring properties. If we want to describe something callable with properties, we can write a call signature in an object type:
参考文献：「Call Signatures」
type DescribableFunction = {
description: string;
(someArg: number): boolean;
};
function doSomething(fn: DescribableFunction) {
console.log(fn.description + " returned " + fn(6));
}
オーバーロードされた関数の型
オーバーロードを行うと関数に対して、複数の型を定義することができます。次のコードは「TypeScript Deep Dive」に掲載されていたサンプルコードで、オーバーロードを使うと次のようにpickCardに対して2パターンの引数・戻り値の型を定義することができます。
let suits = ["hearts", "spades", "clubs", "diamonds"];
function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x: any): any {
if (typeof x == "object") {
let pickedCard = Math.floor(Math.random() * x.length);
return pickedCard;
}
else if (typeof x == "number") {
let pickedSuit = Math.floor(x / 13);
return { suit: suits[pickedSuit], card: x % 13 };
}
}
let myDeck = [
{ suit: "diamonds", card: 2 },
{ suit: "spades", card: 10 },
{ suit: "hearts", card: 4 },
];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
注意しなければいけない部分としてfunction pickCard(x): anyはオーバーロードに該当しないので上のコードでは2つのオーバーロードが存在するといった形になります。
オーバーロードリストに含まれないstringをpickCardの引数として渡すとコンパイルエラーになります。
// No overload matches this call.
// Overload 1 of 2, '(x: { suit: string; card: number; }[]): number', gave the following error.
// Argument of type 'string' is not assignable to parameter of type '{ suit: string; card: number; }[]'.
// Overload 2 of 2, '(x: number): { suit: string; card: number; }', gave the following error.
// Argument of type 'string' is not assignable to parameter of type 'number'.(2769)
let pickedCard2 = pickCard("i");
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
参考文献：
O'Reilly Japan - プログラミングTypeScript
TypeScript Rest Parameters
Generators
Rest Parameters
Call Signatures
Iterator
