TypeScript 関数

関数は、1つのタスクをまとめて実行する文の集まりです。

コードを異なる関数に分割できます。コードをどのように異なる関数に分割するかはあなた次第ですが、論理的には通常、各関数が特定のタスクを実行するように分割されます。

関数宣言はコンパイラに関数の名前、戻り値の型、引数を示します。関数定義は関数の実際の本体を提供します。

関数定義

関数とは、波括弧で囲まれたコードブロックであり、その前にキーワード function を付けます。

構文は次のとおりです。

function function_name()
{
    // 执行代码
}

例

TypeScript

function () { //関数定義 console.log("関数の呼び出し") }

関数の呼び出し

関数内のコードは、関数を呼び出すことによってのみ実行できます。

構文は次のとおりです。

function_name()

例

TypeScript

function test() { //関数定義 console.log("関数の呼び出し") } test() //関数の呼び出し

関数の戻り値

関数の実行結果を呼び出し元に返したい場合があります。

return 文を使用することで実現できます。

return 文を使用すると、関数は実行を停止し、指定された値を返します。

構文は次のとおりです。

function function_name():return_type { 
    // 语句
    return value; 
}

  • return_type は戻り値の型です。

  • return キーワードの後には、返す結果が続きます。

  • 通常、関数には return 文が1つだけあります。

  • 戻り値の型は、関数定義の戻り値の型（return_type）と一致する必要があります。

例

TypeScript

//関数定義 function greet():string { //文字列を返す return "Hello World" } function caller() { var msg = greet() //greet() 関数を呼び出す console.log(msg) } //関数の呼び出し caller()

  • 例では関数greet()、戻り値の型は string です。

  • greet()関数は return 文によって呼び出し元、つまり変数 msg に値を返し、その後その戻り値を出力します。

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

//関数定義 function greet() { return "Hello World"; } function caller() { var msg = greet(); //greet() 関数を呼び出す console.log(msg); } //関数の呼び出し caller();

引数を持つ関数

関数を呼び出すときに、値を渡すことができます。これらの値は引数と呼ばれます。

これらの引数は関数内で使用できます。

関数には複数の引数を渡すことができます。各引数はカンマで,区切ります：

構文は次のとおりです。

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

  • param1、param2 は引数名です。

  • datatype は引数の型です。

例

TypeScript

function add(x: number, y: number): number { return x + y; } console.log(add(1,2))

  • 例では関数add()、戻り値の型は number です。

  • add()関数内では number 型の引数が2つ定義されており、関数内で2つの引数を加算して返します。

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

function add(x, y) { return x + y; } console.log(add(1, 2));

出力結果は次のとおりです。

3

オプション引数とデフォルト引数

オプション引数

TypeScript の関数では、引数を定義した場合、その引数を渡す必要があります。ただし、引数をオプションとして設定する場合は除きます。オプション引数は疑問符 ？ で識別します。

例

TypeScript

function buildName(firstName: string, lastName: string) { return firstName + " " + lastName; } let result1 = buildName("Bob"); //エラー、引数がありません let result2 = buildName("Bob", "Adams", "Sr."); //エラー、引数が多すぎます let result3 = buildName("Bob", "Adams"); //正しい

次の例では、lastName をオプション引数として設定します。

TypeScript

function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } let result1 = buildName("Bob"); //正しい let result2 = buildName("Bob", "Adams", "Sr."); //エラー、引数が多すぎます let result3 = buildName("Bob", "Adams"); //正しい

オプション引数は必須引数の後ろに置く必要があります。上の例で firstName をオプション、lastName を必須にしたい場合は、それらの位置を調整して firstName を後ろに置く必要があります。

すべてオプション引数であれば問題ありません。

デフォルト引数

引数のデフォルト値を設定することもできます。これにより、関数を呼び出すときにその引数の値を渡さない場合、デフォルト値が使用されます。構文は次のとおりです。

function function_name(param1[:type],param2[:type] = default_value) { 
}
注意：引数をオプションとデフォルトの両方に設定することはできません。

例

次の例では、関数の引数 rate にデフォルト値 0.50 を設定しています。この関数を呼び出すときに引数を渡さない場合、このデフォルト値が使用されます。

TypeScript

function calculate_discount(price:number,rate:number = 0.50) { var discount = price * rate; console.log("計算結果:",discount); } calculate_discount(1000) calculate_discount(1000,0.30)

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

function calculate_discount(price, rate) { if (rate === void 0) { rate = 0.50; } var discount = price * rate; console.log("計算結果:", discount); } calculate_discount(1000); calculate_discount(1000, 0.30);

出力結果は次のとおりです。

计算结果:  500
计算结果:  300

残余引数

関数に渡す引数の数が分からない場合があります。そのような場合は、残余引数を使用して定義できます。

残余引数の構文では、不確定な数の引数を配列として渡すことができます。

TypeScript

function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

関数の最後の名前付き引数 restOfName の前に ... を付けます。これにより、残りの引数からなる配列になります。インデックスは0（含む）から restOfName.length（含まない）までです。

TypeScript

function addNumbers(...nums:number[]) { var i; var sum:number = 0; for(i = 0;i<nums.length;i++) { sum = sum + nums[i]; } console.log("合計は：",sum) } addNumbers(1,2,3) addNumbers(10,10,10,10,10)

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

function addNumbers() { var nums = []; for (var _i = 0; _i < arguments.length; _i++) { nums[_i] = arguments[_i]; } var i; var sum = 0; for (i = 0; i < nums.length; i++) { sum = sum + nums[i]; } console.log("合計は：", sum); } addNumbers(1, 2, 3); addNumbers(10, 10, 10, 10, 10);

出力結果は次のとおりです。

和为： 6
和为： 50

匿名関数

匿名関数とは、関数名を持たない関数です。

匿名関数はプログラムの実行時に動的に宣言されます。関数名がないことを除けば、標準の関数と同じです。

匿名関数は変数に代入できます。このような式は関数式になります。

構文は次のとおりです。

var res = function( [arguments] ) { ... }

例

引数のない匿名関数：

TypeScript

var msg = function() { return "hello world"; } console.log(msg())

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

var msg = function () { return "hello world"; }; console.log(msg());

出力結果は次のとおりです。

hello world

引数を持つ匿名関数：

TypeScript

var res = function(a:number,b:number) { return a*b; }; console.log(res(12,2))

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

var res = function (a, b) { return a * b; }; console.log(res(12, 2));

出力結果は次のとおりです。

24

匿名関数の自己呼び出し

匿名関数を自己呼び出しするには、関数の後に () を使用します：

TypeScript

(function () { var x = "Hello!!"; console.log(x) })()

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

(function () { var x = "Hello!!"; console.log(x) })()

出力結果は次のとおりです。

Hello!!

コンストラクタ

TypeScript は、JavaScript 組み込みのコンストラクタ Function() を使用した関数定義もサポートしています。

構文は次のとおりです。

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

引数の説明：

  • arg1, arg2, ... argN：引数リスト。
  • functionBody：関数定義を含む JavaScript 文を含む文字列。

例

TypeScript

var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x);

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x);

出力結果は次のとおりです。

12

再帰関数

再帰関数とは、関数内で関数自身を呼び出す関数です。

例を挙げます：
昔々、ある山がありました。山の中に寺があり、寺には年老いたと尚さんがいて、小僧さんに物語を語っていました。その物語とは？「昔々、ある山がありました。山の中に寺があり、寺には年老いたと尚さんがいて、小僧さんに物語を語っていました。その物語とは？『昔々、ある山がありました。山の中に寺があり、寺には年老いたと尚さんがいて、小僧さんに物語を語っていました。その物語とは？……』」

例

TypeScript

function factorial(number) { if (number <= 0) { //実行を停止 return 1; } else { return (number * factorial(number - 1)); //自身を呼び出す } }; console.log(factorial(6)); //720 を出力

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

function factorial(number) { if (number <= 0) { //実行を停止 return 1; } else { return (number * factorial(number - 1)); //自身を呼び出す } } ; console.log(factorial(6)); //720 を出力

出力結果は次のとおりです。

720

Lambda 関数

Lambda 関数はアロー関数とも呼ばれます。

アロー関数式の構文は、関数式よりも短くなっています。

関数が1つの文だけの場合：

( [param1, param2,…param n] )=>statement;

例

次の例では、2つの数の和を返す lambda 式関数を宣言しています。

TypeScript

var foo = (x:number)=>10 + x console.log(foo(100)) //出力結果は 110 です

上記のコードをコンパイルすると、次の JavaScript コードが得られます。

JavaScript

var foo = function (x) { return 10 + x; }; console.log(foo(100)); //出力結果は 110 です

出力結果は次のとおりです。

110

関数が文のブロックである場合：

( [param1, param2,…param n] )=> {
 
    // 代码块
}

例

次の例では、2つの数値の和を返すラムダ式関数を宣言しています。

TypeScript

var foo = (x:number)=> { x = 10 + x console.log(x) } foo(100)

上記のコードをコンパイルすると、次のJavaScriptコードが得られます。

JavaScript

var foo = function (x) { x = 10 + x; console.log(x); }; foo(100);

出力結果は次のとおりです。

110
関数のパラメータ型を指定せずに、関数内でパラメータ型を推論できます:

TypeScript

var func = (x)=> { if(typeof x=="number") { console.log(x+"は数値です") } else if(typeof x=="string") { console.log(x+"は文字列です") } } func(12) func("Tom")

上記のコードをコンパイルすると、次のJavaScriptコードが得られます。

JavaScript

var func = function (x) { if (typeof x == "number") { console.log(x + "は数値です"); } else if (typeof x == "string") { console.log(x + "は文字列です"); } }; func(12); func("Tom");

出力結果は次のとおりです。

12 是一个数字
Tom 是一个字符串

単一パラメータ()は省略可能です：

TypeScript

var display = x => { console.log("出力は"+x) } display(12)

上記のコードをコンパイルすると、次のJavaScriptコードが得られます。

JavaScript

var display = function (x) { console.log("出力は" + x); }; display(12);

出力結果は次のとおりです。

输出为 12

パラメータがない場合は空の括弧を設定できます：

TypeScript

var disp =()=> { console.log("Function invoked"); } disp();

上記のコードをコンパイルすると、次のJavaScriptコードが得られます。

JavaScript

var disp = function () { console.log("関数の呼び出し"); }; disp();

出力結果は次のとおりです。

関数を呼び出す

関数のオーバーロード

オーバーロードとは、メソッド名が同じでパラメータが異なり、戻り値の型が同じでも異なってもよいことです。

各オーバーロードメソッド（またはコンストラクタ）には、一意のパラメータ型リストが必要です。

パラメータ型が異なる：

function disp(string):void; 
function disp(number):void;

パラメータ数が異なる：

function disp(n1:number):void; 
function disp(x:number,y:number):void;

パラメータ型の順序が異なる：

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

パラメータ型が異なる場合、パラメータ型は次のように設定する必要がありますany。

パラメータ数が異なる場合は、異なるパラメータを省略可能に設定できます。

例

次の例では、パラメータ型とパラメータ数が異なる場合を定義しています：

TypeScript

function disp(s1:string):void; function disp(n1:number,s1:string):void; function disp(x:any,y?:any):void { console.log(x); console.log(y); } disp("abc") disp(1,"xyz");

上記のコードをコンパイルすると、次のJavaScriptコードが得られます。

JavaScript

function disp(x, y) { console.log(x); console.log(y); } disp("abc"); disp(1, "xyz");

出力結果は次のとおりです。

abc
undefined
1
xyz
その他の拡張