codestory

Funktionen in TypeScript

  1. Was ist Funktion?
  2. Reguläre Funktion:
  3. Closure (Schließung)
  4. Optionaler Parameter
  5. Parameter mit Union-Datentyp
  6. Function Overloading

1. Was ist Funktion?

In der Programmiersprache TypeScript ist eine Funktion ein benannter Codeblock. Es kann Parameter annehmen und einen Wert oder nichts zurückgeben und wird nur ausgeführt, wenn es aufgerufen wird. Die Funktionen unterteilen eine große Aufgabe in kleine Teile und führen bestimmte Operationen dieses Programms aus. Dieser Prozess erhöht die Wiederverwendbarkeit des Codes und verbessert den modularen Ansatz des Programms.
Die Syntax zum Deklarieren einer regulären Funktion:
function function_name(arg1: type1, arg2: type2, argN: typeN) : return_type {
   // Statements
}
Hinweis: Ähnlich wie JavaScript erlaubt TypeScript keine zwei gleichnamigen Funktionen, auch wenn sie unterschiedliche Parameter haben

2. Reguläre Funktion:

Die Syntax zum Deklarieren einer regulären Funktion:
function function_name(arg1: type1, arg2: type2, argN: typeN) : return_type {
   // Statements
}
Verwenden Sie das Schlüsselwort void (oder empty) als Rückgabetyp, wenn die Funktion nichts zurückgibt.
function function_name(arg1: type1, arg2: type2, argN: typeN) : void {
   // Statements
}
// Same as:
function function_name(arg1: type1, arg2: type2, argN: typeN) {
   // Statements
}
Beispiel: Die Funktion minus mit zwei Parametern vom Typ number und gibt einen Wert vom Typ number zurück.
function_ex1.ts
function minus(a: number, b: number) : number {
    return a + b;
}  
var result = minus(10, 20); // -10
console.log(`result = ${result}`);
Output:
result = -10
Beispiel: Die Funktion greeting akzeptiert einen Parameter string und gibt nichts zurück.
function_ex2.ts
function greeting(name: string) {
    var s = `Hello $name`;
    console.log(s);
}
// Call the function:
greeting('Tom'); // Hello Tom

3. Closure (Schließung)

In der Programmiersprache TypeScript ist ein Closure eine spezielle Funktion.
  • Ähnlich wie eine Funktion ist eine Closure ein Block von Anweisungen mit Parametern und kann einen Wert oder nichts zurückgeben
  • Im Gegensatz zu einer Funktion hat eine Closure keinen Namen. Sie können es jedoch durch eine Variable identifizieren.
Sehen Sie die ausführlichen Artikel über Closure:

4. Optionaler Parameter

Wie oben erwähnt, lässt TypeScript keine Funktionen mit demselben Namen zu, aber eine Funktion kann optionale Parameter enthalten, die die letzten Parameter in der Parameterliste sein müssen.
Die Syntax:
Syntax
function function_name(argM: typeM, argN: typeN, argP?:typeP, argQ?: typeQ): return_type {  
     // Statement(s)  
}
Oder Syntax - Optionaler Parameter mit Standardwert:
function function_name(argM: typeM, argN: typeN,
                  argP?:typeP = defaultValueP, argQ?: typeQ = defaultValueQ): return_type {  
     // Statement(s)  
}
Zum Beispiel:
function_optional_args_ex1.ts
function concat(s1: string, s2: string, s3?: string): string {
    if (s3) {
        return s1 + s2 + s3;
    }
    return s1 + s2;
}
function sum(v1: number, v2: number, v3?: number, v4?: number): number {
    return v1 + v2 + (v3 ?? 0) + (v4 ?? 0);
}
function function_optional_args_ex1_test() {
    var result1 = concat('One', 'Two');
    console.log(`result1: ${result1}`);
    var result2 = concat('One', 'Two', 'Three');
    console.log(`result2: ${result2}`);

    var value1 = sum(1, 2, 3, 4);
    console.log(`value1: ${value1}`);
    var value2 = sum(1, 2, 3);
    console.log(`value2: ${value2}`);
    var value3 = sum(1, 2);
    console.log(`value3: ${value3}`);
}
function_optional_args_ex1_test(); // Call the function.
Output:
result1: OneTwo
result2: OneTwoThree
value1: 10
value2: 6
value3: 3

5. Parameter mit Union-Datentyp

Der Parameter in einer Funktion können auch mit einem Union-Datentyp (union data type) deklariert werden.
Die Syntax:
function function_name (
             arg1 : data_type1, arg2 : data_type2,
             arg3 : data_type31 | data_type32 | data_type3N, // Union Data Type
             arg4 : data_type4) : return_type {
    //  Statament(s)
}
Zum Beispiel:
function_union_type_args_ex1.ts
interface IStudent {
    studentId: number,
    studentName: string
}
interface IWorker {
    workerId: number,
    workerName: string
}
function getName(person: IStudent | IWorker): string { // Union Type Arg
    var p = person as IStudent;
    if (p.studentName) {
        return p.studentName;
    }
    return (person as IWorker).workerName;
}
function function_union_type_args_ex1_test() {
    var student = { studentId: 1, studentName: "Tom" };
    var worker = { workerId: 2, workerName: "Jerry" };

    var name1 = getName(student);
    var name2 = getName(worker);
    console.log(`name1: ${name1}`);
    console.log(`name2: ${name2}`);
}
function_union_type_args_ex1_test(); // Call the function.
Output:
name1: Tom
name2: Jerry

6. Function Overloading

Wie oben erwähnt, lässt TypeScript keine Funktionen mit demselben Namen zu, auch wenn sie unterschiedliche Parameter haben. Function Overloading ist eine "Umgehungstechnik", was bedeutet, dass Sie immer noch nur eine Funktion mit einem bestimmten Namen haben, diese aber mit verschiedenen Parametern verwenden können.
Die Hauptidee beim Überladen von Funktionen besteht darin, eine generische Funktion zu erstellen, die überprüft, welcher Parametertyp beim Aufruf der Funktion übergeben wurde, und dann eine Logik für den entsprechenden Fall auszuführen. Es ist nützlich, Definitionen für die Funktion hinzuzufügen, um anderen Programmierern zu helfen, sie richtig zu verwenden.
Die Syntax:
// Definition 1
function function_name(arg_11 : type_11, arg_1N : type_1N): return_type;
// Definition 2
function function_name(arg_21 : type_21, arg_22 : type_22, arg_2M : type_2M) : return_type;
function function_name(... args : any[]) : return_type {
   // Function body.
}
Grundsätzlich gibt es viele Möglichkeiten, eine überladene Funktion zu definieren. Die obige Syntax wird empfohlen, die Ihnen hilft, den folgenden Fehler des Compilers zu vermeiden:
This overload signature is not compatible with its implementation signature.
Zum Beispiel:
function_overload_ex1.ts
interface IDimension3D {
    width: number,
    height: number,
    depth: number
}
function getVolume(dimension: IDimension3D): number; // Definition 1
function getVolume(width: number): number; // Definition 2
function getVolume(width: number, height: number, depth: number): number; // Definition 3
function getVolume(...args: any[]): number {
    if (args.length == 1) {
        if (typeof args[0] == 'number') { // Use Definition 1
            return args[0] * args[0] * args[0];
        } else {  // Use Definition 2
            var dim = args[0] as IDimension3D;
            return dim.width * dim.height * dim.depth;
        }
    } else if (args.length == 3) { // Use definition 3
        return args[0] * args[1] * args[2];
    } else {
        throw Error('Argument invalid!');
    }
}
function function_overload_ex1_test() {
    var volume1 = getVolume(10); // 1000
    var volume2 = getVolume({ width: 10, height: 20, depth: 30 }); // 6000
    var volume3 = getVolume(5, 10, 15); // 750

    console.log(`volume1 = ${volume1}`);
    console.log(`volume2 = ${volume2}`);
    console.log(`volume3 = ${volume3}`);
}
function_overload_ex1_test(); // Call the function.
Output:
volume1 = 1000
volume2 = 6000
volume3 = 750

Neueste Artikel

Show More