TypeScript - Optional Parameters: A Beginner's Guide

Hallo da, zukünftiger Codingsuperstar! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von TypeScript zu sein. Heute werden wir eine kleine, aber feine Funktion namens "Optional Parameters" erkunden. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde alles Schritt für Schritt erklären, und wir werden auch ein bisschen Spaß haben!

Was sind Optional Parameters?

Bevor wir tiefer einsteigen, stellen wir uns vor, Sie planen eine Party. Sie wissen, dass Sie Teller und Becher brauchen, aber Sie sind sich nicht sicher, ob Sie Taschentücher brauchen. Das ist ein bisschen so wie Optional Parameters in TypeScript – sie sind die "vielleicht" Artikel auf Ihrer Einkaufsliste für die Funktion!

In TypeScript erlauben Optional Parameters uns, Funktionen zu erstellen, bei denen einige Argumente nicht erforderlich sind. Dies gibt unseren Funktionen mehr Flexibilität, genau wie das Hinzufügen optionaler Taschentücher zu Ihrer Party mehr Optionen bietet.

Syntax

Nun schauen wir uns an, wie man Optional Parameters in TypeScript schreibt. Es ist so einfach wie das Hinzufügen eines Fragezeichens (?) nach dem Parameternamen. Hier ist die grundlegende Syntax:

function functionName(requiredParam: type, optionalParam?: type) {
// Function body
}

Sehen Sie das kleine ? nach optionalParam? Das ist unser magischer Zauberstab, der einen regulären Parameter in einen optionalen verwandelt!

Beispiele

Lassen Sie uns in einige Beispiele eintauchen, um Optional Parameters in Aktion zu sehen. Wir beginnen einfach und erhöhen die Komplexität schrittweise.

Beispiel 1: Eine einfache Begrüßung

function greet(name: string, greeting?: string) {
if (greeting) {
return `${greeting}, ${name}!`;
} else {
return `Hello, ${name}!`;
}
}

console.log(greet("Alice"));           // Ausgabe: Hello, Alice!
console.log(greet("Bob", "Good day")); // Ausgabe: Good day, Bob!

In diesem Beispiel ist name ein erforderlicher Parameter, aber greeting ist optional. Wenn wir keine Begrüßung angeben, verwendet die Funktion "Hello" als Standard. Es ist wie ein Standardwillkommensschild bei Ihrer Party, aber es ist in Ordnung, wenn Gäste ihre eigenen individuellen Schilder mitbringen möchten!

Beispiel 2: Taschenrechner mit optionaler Operation

Lassen Sie uns eine einfache Taschenrechnerfunktion erstellen:

function calculate(a: number, b: number, operation?: string): number {
if (operation === "add") {
return a + b;
} else if (operation === "subtract") {
return a - b;
} else {
return a * b; // Standardmultiplikation
}
}

console.log(calculate(5, 3));          // Ausgabe: 15 (5 * 3)
console.log(calculate(10, 5, "add"));  // Ausgabe: 15 (10 + 5)
console.log(calculate(10, 4, "subtract")); // Ausgabe: 6 (10 - 4)

Hier ist operation unser optionaler Parameter. Wenn er nicht angegeben wird, verwendet die Funktion standardmäßig die Multiplikation. Es ist wie ein Schweizer Army Knife – Sie können verschiedene Werkzeuge je nach Bedarf verwenden!

Beispiel 3: Benutzerprofil mit optionalen Feldern

Lassen Sie uns ein komplexeres Beispiel mit einem Benutzerprofil erstellen:

interface UserProfile {
name: string;
age: number;
email?: string;
phoneNumber?: string;
}

function createUserProfile(name: string, age: number, email?: string, phoneNumber?: string): UserProfile {
const profile: UserProfile = {
name: name,
age: age
};

if (email) {
profile.email = email;
}

if (phoneNumber) {
profile.phoneNumber = phoneNumber;
}

return profile;
}

const user1 = createUserProfile("Alice", 30);
console.log(user1);
// Ausgabe: { name: "Alice", age: 30 }

const user2 = createUserProfile("Bob", 25, "[email protected]");
console.log(user2);
// Ausgabe: { name: "Bob", age: 25, email: "[email protected]" }

const user3 = createUserProfile("Charlie", 35, "[email protected]", "123-456-7890");
console.log(user3);
// Ausgabe: { name: "Charlie", age: 35, email: "[email protected]", phoneNumber: "123-456-7890" }

In diesem Beispiel erstellen wir Benutzerprofile. name und age sind erforderlich, aber email und phoneNumber sind optional. Es ist wie das Ausfüllen eines Formulars, bei dem einige Felder mit einem Sternchen (erforderlich) und andere nicht gekennzeichnet sind!

Best Practices und Tipps

1. Reihenfolge ist wichtig: Platzieren Sie immer optionale Parameter nach den erforderlichen Parametern. Es ist wie das Platzieren der "vielleicht" Artikel am Ende Ihrer Einkaufsliste.

2. Standardwerte: Sie können optionale Parameter mit Standardwerten kombinieren:

function greet(name: string, greeting: string = "Hello") {
return `${greeting}, ${name}!`;
}

3. Nicht übertreiben: Obwohl optionale Parameter nützlich sind, können zu viele Ihre Funktion verwirren. Verwenden Sie sie weise!

4. Dokumentation: Dokumentieren Sie immer, was passiert, wenn optionale Parameter weggelassen werden. Es ist wie das Hinterlassen klarer Anweisungen für Ihre Partygäste.

Fazit

Glückwunsch! Sie haben Ihre TypeScript-Fähigkeiten durch das Beherrschen optionaler Parameter verbessert. Erinnern Sie sich daran, dass sie wie die "mitbringen, wenn du möchtest" Artikel für Ihre Funktionsparty sind – sie bieten Flexibilität und machen Ihren Code anpassungsfähiger.

Während Sie Ihre Programmierreise fortsetzen, werden Sie viele Situationen finden, in denen optionale Parameter praktisch sind. Sie sind ein leistungsstarkes Werkzeug in Ihrem TypeScript-Werkzeugkasten, das Ihnen hilft, flexibler und wiederverwendbarer Code zu schreiben.

Weiter üben, neugierig bleiben und viel Spaß beim Coden! ??

Methode	Beschreibung
greet(name: string, greeting?: string)	Eine Funktion, die eine Person begrüßt, mit einer optionalen individuellen Begrüßung.
calculate(a: number, b: number, operation?: string)	Eine Taschenrechnerfunktion mit einer optionalen Operationsangabe.
createUserProfile(name: string, age: number, email?: string, phoneNumber?: string)	Eine Funktion zum Erstellen eines Benutzerprofils mit optionalen E-Mail- und Telefonnummern.

Credits: Image by storyset