まくろぐ

TypeScriptの型: 関数を定義する (function)

更新:
作成:

TypeScript の関数定義は JavaScript とほぼ同じですが、各パラメータと戻り値に型アノテーション付けることができます。

簡単な関数

次の indent 関数は、指定したレベルのインデント文字列(レベル数x2 の半角スペース)を返します。 TypeScript の型アノテーションで、number 型のパラメータと、string 型の戻り値を持つことを示しています。

function indent(level: number): string {
  return '  '.repeat(level);
}

console.log(indent(0) + 'AAA');  //=> 'AAA'
console.log(indent(1) + 'BBB');  //=> '  BBB'
console.log(indent(2) + 'CCC');  //=> '    CCC'

関数オブジェクト

名前なしの関数オブジェクトやアロー関数を使用するときも同様に、パラメータや戻り値の型をアノテートできます。

const add = function(a: number, b: number) { return a + b; };
const sub = (a: number, b: number) => { return a - b; };

console.log(add(1, 2));  //=> 3
console.log(sub(1, 2));  //=> -1

関数の実装から戻り値の型を推測できる場合は、上記のように戻り値の型アノテーションを省略できます(この場合は : number が省略されています)。

戻り値を返さないを示す void

関数を抜ける時に、何も値を返さない場合は、戻り値の型を void にします。

function greet(name: string): void {
  console.log(`Hello, ${name}`);
}

greet('Maku');  //=> 'Hello, Maku'

戻り値を持たない関数はよくあるので、void 型のアノテーションは 省略してもよい ことになっています。

function greet(name: string) {
  console.log(`Hello, ${name}`);
}

関数が終わらないことを示す never

戻り値の型として never を指定すると、その関数は終了することがないことを示します。 無限ループはその典型的な例です。

function neverEnding(): never {
  while (true) {
    console.log('Hello');
  }
}

neverEnding();

必ず例外をスローする関数も never でアノテートできます。

function error(msg: string): never {
  throw Error(`My error - ${msg}`);
}

error('Hoge');

オプショナルパラメータとデフォルト引数

オプショナルパラメータ

パラメータ名の末尾に ? を付けると、そのパラメータはオプショナル扱いとなり、関数の呼び出し時に引数を省略することができるようになります。

function greet(name?: string) {
  if (name) {
    console.log(`Hello, ${name}`);
  } else {
    console.log('名を名乗れっ!');
  }
}

greet('まく');  //=> 'Hello, まく'
greet();        //=> '名を名乗れっ!'
greet(undefined);  //=> (同上)
greet('');         //=> (同上)

引数を省略された場合、関数内でその値を参照すると undefined になります。 JavaScript では、undefined を真偽値として評価すると false 扱いとなるので、上記のように if 文で条件分岐させることができます。

ただし、空文字列 ('') も false として評価されることに注意してください。 変数の値が undefined であることを確実にチェックしたいときは、次のように typeof を使って判定してください。

function greet(name?: string) {
  if (typeof name === 'undefined') {
    console.log('名を名乗れっ!');
  } else {
    console.log(`Hello, ${name}`);
  }
}

greet('まく');  //=> 'Hello, まく'
greet();        //=> '名を名乗れっ!'
greet(undefined);  //=> (同上)
greet('');         //=> 'Hello, '

デフォルト引数

引数が省略された場合のデフォルト値を指定したい場合は、次のように デフォルト引数 の仕組みを使用すると簡単です。

function greet(name: string = '名無しさん') {
  console.log(`Hello, ${name}`);
}

greet('まく');  //=> 'Hello, まく'
greet();  //=> 'Hello, 名無しさん'

関連記事

まくろぐ
サイトマップまくへのメッセージ