序章

TypeScript は、より優れたコードヒンティング機能とエラーチェック機能を備えた、静的に型付けされた JavaScript のスーパーセットです。TypeScriptでは関数も重要な概念ですが、この記事ではTypeScript関数の定義、呼び出し、パラメータの受け渡し方法を紹介します。

TypeScript 関数を定義する

TypeScript では、関数は JavaScript と同じ方法で定義され、TypeScript 関数は有名字的函数とを作成できます匿名函数。
TypeScript を定義するときは、関数のパラメーターの型と戻り値の型を指定する必要があります。たとえば、2 つの数値引数を受け取り、その合計を返す単純な関数を定義します。
```
function add(num1: number, num2: number): number {
      
      
    return num1 + num2;
}
```
num1: numberこの関数では、2 つのパラメータ (と)の型num2: numberと関数の戻り値の型 ( : number) を指定します。

TypeScript 関数の呼び出し

TypeScript 関数の呼び出しは JavaScript 関数と同じで、関数名とパラメーターを直接使用できます。たとえば、上で定義したadd関数。
```
const result = add(1, 2); // result 将是 3
```
この例では、2 つの数値引数 1 と 2 が渡され、関数はそれらを加算して結果 3 を返します。

関数の種類

関数タイプは、参数类型との2 つの部分で構成されます返回值类型。
完全な関数型を記述する場合は両方の部分が必要です。
パラメータのタイプをパラメータリストとして書き出し、各パラメータの名前とタイプを指定します。(名前は読みやすさのためのものです)。

完全な関数タイプ:

let myAdd: (baseValue: number, increment: number) => number = function(x: number, y: number): number {
      
      
    return x + y;
};

推論型

代入ステートメントの一方の側で型が指定されているが、もう一方の側では型が指定されていない場合、TypeScript コンパイラはその型を自動的に認識します。

// myAdd has the full function type
let myAdd = function(x: number, y: number): number {
      
       return x + y; };

// The parameters `x` and `y` have the type number
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) {
      
       return x + y; };

パラメータの受け渡し

TypeScript では、可选参数、默认参数、剩余参数など、関数パラメータを渡す方法が数多くあります函数重载。

オプションのパラメータ

オプションのパラメーターは、関数の呼び出し時にパラメーターを渡すことができないことを意味します。TypeScript では、パラメーターをオプションとしてマークするために?疑問符が。たとえば、長方形の面積を計算する関数を定義します。
```
function calculateRectangleArea(width: number, height?: number): number {
      
      
    if (height) {
      
      
        return width * height;
    } else {
      
      
        return width * width;
    }
}
```
この関数では、2 番目のパラメーターはオプションのパラメーターとしてマークされていheightます。つまり、関数の呼び出し時にパラメーターを渡すことも、渡さないこともできます。渡された場合はheight長方形の面積を計算して結果を返し、そうでない場合は正方形の面積を辺の長さwidthとして結果を返します。

デフォルトパラメータ

デフォルトパラメーターは、関数の呼び出し時にパラメーターが渡されない場合、指定されたデフォルト値が使用されることを意味します。TypeScript では、等号を使用してパラメータのデフォルト値=を指定します。たとえば、メッセージを出力する関数を定義します。
```
function showMessage(message: string = 'Hello'): void {
      
      
    console.log(message);
}
```
この関数では、パラメータmessageの'Hello'。関数を呼び出すときにパラメータが渡されない場合は、デフォルト値が使用されます。例えば：
```
showMessage(); // 输出 'Hello' showMessage('World'); // 输出 'World'
```

残りのパラメータ

残りのパラメータは、関数を呼び出すときに任意の数のパラメータを渡し、それらを配列に入れることができることを意味します。TypeScript では、パラメーターを残りのパラメーターとして...マークするために。たとえば、いくつかの数値の合計を計算する関数を定義します。
```
function sum(...numbers: number[]): number {
      
      
    let total = 0;
    for (const num of numbers) {
      
      
        total += num;
    }
    return total;
}
```
この関数では、残りの引数を使用して任意の数の数値引数...numbersを受け取り、それらの合計を計算します。

これ

ご存じのとおり、JavaScript では this のポインティングが特に重要ですが難しいのですが、TypeScript では依然として this のポインティングを学習するのに時間を費やす必要があります。しかし、TypoScript で非常に嬉しいことの 1 つは、コンパイル時に TypeScript が開発者にこれが間違って使用されている場所を通知するため、開発者はコードを読むために頭を悩ませる必要がないことです。
JavaScript では、this関数が呼び出されるときに関数の値が指定されます。これは強力で柔軟な機能ですが、開発者は、特に関数を返すときやfunction as パラメータを渡すときに大変になります。
内容のこの部分が理解できない場合は、JavaScript の this の部分を参照してください。JavaScript と TypeScript の this の機能は同じです。

関数のオーバーロード

関数のオーバーロードとは、渡されるパラメーターの型と数に応じて、異なる関数実装が使用されることを意味します。TypeScript では、関数のオーバーロード宣言を使用して、複数の関数の実装を定義できます。たとえば、テキスト処理関数を定義します。

function processText(text: string): string;
function processText(numbers: number[]): number[];
function processText(value: string | number[]): string | number[] {
      
      
    if (typeof value === 'string') {
      
      
        return value.toUpperCase();
    } else {
      
      
        return value.map(num => num * 2);
    }
}

この関数では、2 つの関数実装を定義します。渡されたパラメータが文字列型の場合は大文字に変換して返し、渡されたパラメータが数値配列型の場合はその中のすべての数値を2倍して返します。

要約する

この記事では、TypeScript 関数の定義、呼び出し、パラメーターの受け渡し方法を紹介します。この知識を学ぶことで、TypeScript の関数の概念をより深く理解し、TypeScript を使用して、より信頼性が高く保守しやすいプログラムを開発できるようになります。

TypeScript 関数: 定義、呼び出し、パラメーターの受け渡し

目次

序章