もろもログ

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

TypeScript 関数の定義

2021-11-29

いまさらながらTypeScriptに入門

定義方法の基本

関数の定義時に引数、戻り値の型の指定を行う。

//引数、戻り値にnumber型を指定する
function triangle_area(height:number, bottom:number):number{
  return bottom * height /2;
}
//無名関数で型を指定
let triangle_are2 = function(height:number, bottom:number):number{
  return bottom * height /2;
}
//アロー関数
let triangle_are3 = (height: number, bottom: number):number =>  {
  return bottom * height /2;
}

引数の定義方法いろいろ

  • 引数を省略可能にする

基本は引数必須となっている、引数名の後ろに「?」をつけると省略可能になっている。

省略した引数にはundefinedが渡される。

const log = (mes?:string):string => {
  if(mes === undefined){
      mes = '何もなし';
  }
  return `2021/11/29 INFO ${mes}`;

}
console.log(log('何か起きたよ'));
// 2021/11/29 INFO 何か起きたよ
console.log(log());// 引数を省略して実行
// 2021/11/29 INFO 何もなし
  • 引数に規定値を設定

引数の後ろに規定値をすると引数を省略した場合に、規定値が設定される。

引数の任意指定「?」とは一緒に使用できない。

//それぞれの値に規定値を設定、規定値には式も指定できる(new Date())
const log = (mes:string = '何もなし', time :Date = new Date()):string => {
    return `${time} INFO ${mes}`;
}
console.log(log('何か起きたよ'));
// Mon Nov 29 2021 21:51:38 GMT+0900 (日本標準時) INFO 何か起きたよ
console.log(log());
// Mon Nov 29 2021 21:51:38 GMT+0900 (日本標準時) 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

関数のオーバーロード

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

最初に関数名、引数、戻り値のみを定義（シグネチャ）、後から処理内容を実装する。

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

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

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

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