パラメーターを使用する

5 分

TypeScript コンパイラの場合、関数で定義されているすべてのパラメーターは必須であると既定で想定されます。関数が呼び出されると、TypeScript コンパイラによって次のことが検証されます。

各パラメーターの値が指定されている。
関数に必要なパラメーターだけが渡されている。
関数で定義されている順序でパラメーターが渡されている。

これらの要件は JavaScript とは異なります。 JavaScript では、すべてのパラメーターは省略可能であると想定され、定義されている数より多くの (または少ない) 引数を関数に渡すことができます。

必須のパラメーターに加えて、省略可能、既定、rest の各パラメーター、および分解オブジェクトパラメーターを使用して、関数を定義できます。

必須のパラメーター

関数のすべてのパラメーターは、特に指定がない限り必須です。また、関数に渡される引数の数は、関数に必要なパラメーターの数と一致している必要があります。

この例では、すべてのパラメーターが必須です。

function addNumbers (x: number, y: number): number {
   return x + y;
}

addNumbers(1, 2); // Returns 3
addNumbers(1);    // Returns an error

省略可能なパラメーター

パラメーター名の末尾に疑問符 (?) を追加することにより、省略可能なパラメーターを定義することもできます。

この例では、x は必須で、y は省略可能です。省略可能なパラメーターは、パラメーターリストの必須パラメーターの後に来る必要があります。また、この関数で正しい値が返されるようにするには、y が未定義として渡される可能性に対処する必要もあります。

function addNumbers (x: number, y?: number): number {
    if (y === undefined) {
        return x;
    } else {
        return x + y;
    }
}

addNumbers(1, 2); // Returns 3
addNumbers(1);    // Returns 1

既定のパラメーター

省略可能なパラメーターに既定値を割り当てることもできます。省略可能なパラメーターに値が引数として渡されると、その値が割り当てられます。それ以外の場合は、既定値が割り当てられます。省略可能なパラメーターと同様に、既定のパラメーターはパラメーターリストで必須パラメーターより後に指定する必要があります。

この例では、x は必須で、y は省略可能です。 y に値が渡されない場合、既定値は 25 になります。

function addNumbers (x: number, y = 25): number {
   return x + y;
}

addNumbers(1, 2);  // Returns 3
addNumbers(1);     // Returns 26

rest パラメーター

複数のパラメーターを 1 つのグループとして扱いたい場合 (たとえば、配列でそれらを渡す)。または、最終的に関数が受け取るパラメーターの数がわからない場合。 rest パラメーターを使用できます。 rest パラメーターは、数が限定されていない省略可能パラメーターとして扱われます。省略することも、必要なだけ指定することもできます。

この例には、1 つの必須パラメーターと、任意の数の追加の数値を受け入れることができる restOfNumbers という省略可能パラメーターがあります。 restOfNumbers の前の省略記号 (...) は、関数に渡された引数の配列を作成し、関数内で使用できるようにその後で指定されている名前を割り当てるよう、コンパイラに指示します。

let addAllNumbers = (firstNumber: number, ...restOfNumbers: number[]): number => {
   let total: number =  firstNumber;
   for(let counter = 0; counter < restOfNumbers.length; counter++) {
      if(isNaN(restOfNumbers[counter])){
         continue;
      }
      total += Number(restOfNumbers[counter]);
   }
   return total;
}

関数は、1 つまたは複数の値を受け取り、結果を返すようになります。

addAllNumbers(1, 2, 3, 4, 5, 6, 7);  // returns 28
addAllNumbers(2);                    // returns 2
addAllNumbers(2, 3, "three");        // flags error due to data type at design time, returns 5

分解オブジェクトパラメーター

関数のパラメーターは位置指定であり、関数で定義されている順序で渡す必要があります。位置指定パラメーターを使うと、省略可能な、または同じデータ型の複数のパラメーターを持つ関数を呼び出す場合、コードが読みにくくなる可能性があります。

名前付きパラメーターを使用できるようにするには、分解オブジェクトパラメーターと呼ばれる手法を使用できます。この手法により、位置指定ではなく定義された名前を持つパラメーターへのインターフェイスを関数で使用できます。

次の例では、2 つのプロパティが定義された Message という名前のインターフェイスが定義されています。 displayMessage 関数では、Message オブジェクトがパラメーターとして渡され、通常のパラメーターと同じようにプロパティへのアクセスが提供されます。

interface Message {
   text: string;
   sender: string;
}

function displayMessage({text, sender}: Message) {
    console.log(`Message from ${sender}: ${text}`);
}

displayMessage({sender: 'Christopher', text: 'hello, world'});

続行

必須のパラメーター

省略可能なパラメーター

既定のパラメーター

rest パラメーター

分解オブジェクト パラメーター

フィードバック

分解オブジェクトパラメーター