定義方法の基本
関数の定義時に引数、戻り値の型の指定を行う。
//引数、戻り値に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は定義されていないのでエラーになる