もろもログ

ちょっとした技術メモを忘れないうちに書いていく

TypeScript 関数の定義

2022-01-23

いまさらながらTypeScriptに入門

関数の定義方法

  • functionによる定義
//引数、戻り値に型を指定する
function triangleArea(height:number, bottom:number):number{
  return bottom * height / 2;
}
  • 関数リテラルによる定義
//無名関数で型を指定(triangleAreaにもfunctionの型を指定してみる)
let triangleArea:(height:number, bottom:number) => number  =
function(height:number, bottom:number):number{
  return bottom * height / 2;
}
  • アロー関数による定義
let triangleArea:(height:number, bottom:number) => number  =
(height:number, bottom:number):number => {
  return bottom * height / 2;
}

引数の定義方法あれこれ

  • 引数を省略可能にする

通常引数は必須となっている、引数名の後に「?」をつけると省略可能になる。 省略した引数にはundefinedが渡される。

// mesは省略可能な引数にする
const info = (mes?:string):string => {
  if(mes === undefined){
      mes = '何もなし';
  }
  return `2022/01/23 INFO ${mes}`;

}
console.log(info('何か起きたよ'));
// 2022/01/23 INFO 何か起きたよ
console.log(info());
// 2022/01/23 INFO 何もなし
  • 引数に規定値を設定する

規定値を設定しておくと引数を省略した場合に引数には規定値が代入される。

引数の任意設定「?」とは同時に使用できない。

// mesの規定値に「何もなし」を設定
const info = (mes = '何もなし'):string => {
  return `2022/01/23 INFO ${mes}`;

}
console.log(info('何か起きたよ'));
// 2022/01/23 INFO 何か起きたよ
console.log(info());
// 2022/01/23 INFO 何もなし
  • 可変長引数

引数の前に「…」をつけると配列型として可変長引数として定義できる。

可変長引数は最後の引数にのみ設定可能。

//valは複数の引数を文字列配列で受け取るので配列型「型種類[]」で定義
const test = (...val:string[]) :void=>  {
  console.log(val);
}
test('AAA', 'BBB', 'CCC');
//[ 'AAA', 'BBB', 'CCC' ]

//可変長引数は一番最後に定義する
const test2 = (num:number, ...val:string[]) :void=>  {
  console.log(val[num]);
}
test2(1, 'AAA', 'BBB', 'CCC');
//BBB

/** 可変超引数を最初にするとエラー
const test3 = (...val:string[],num:number) :void=>  {
  console.log(val[num]);
}
*/

関数のオーバーロード

同じ名前で引数または戻り値が異なる関数を定義する。

最初に関数のシグニチャのみを定義し、後からまとめて実装する。

関数実行時にシグネチャで定義した引数以外を指定するとエラーとなる。

//オーバロードする関数を定義(シグネチャ)
function test(val:string):void;
function test(num:number):void;

//関数の内容を実装する（引数の型はany）
function test(value:any):void{
    //引数の型をチェックしそれぞれの処理を記述
    if(typeof value === 'string'){
        console.log('文字列が来た');
    }else if(typeof value === 'string'){
        console.log('数字が来た');
    }
}

test(2);
test('AAA');
// test(true);//booleanは定義されていないのでエラーになる

引数をUnionTypesで定義しても同じことができるけど何か違うのかな？


//引数をUnionTypesで定義してみる
function test(value:string|number):void{
    //引数の型をチェックしそれぞれの処理を記述
    if(typeof value === 'string'){
        console.log('文字列が来た');
    }else if(typeof value === 'string'){
        console.log('数字が来た');
    }
}

test(2);
test('AAA');
// test(true);//booleanは定義されていないのでエラーになる
目次