Wie behandelt man Funktionen mit Standardwerten?
Nehmen wir an, dass Sie bei Ihrer täglichen Arbeit häufig Funktionen mit Standardparameterwerten schreiben. Nehmen wir zum Beispiel an, Sie erstellen eine Funktion zur Anzeige der Temperatur, wobei die Standardeinheit auf Grad Celsius (°C) eingestellt ist.
const displayTemperature = () => {
console.log('Temperature is 20°C')
}
displayTemperature() // Temperature is 20°C
Gut, wir haben einen Startpunkt, an dem unsere Funktion die Temperatur anzeigt.
Fügen wir nun einen dynamischen Parameter hinzu, um den Temperaturwert zu bestimmen. Dieser Parameter wird vom Typ Zahl sein.
const displayTemperature = (
temperature: number
): void => {
console.log(`Temperature is ${temperature}°C`)
}
displayTemperature(20) // Temperature is 20°C
Mit der obigen Funktion können wir die Temperatur in verschiedenen Teilen unserer Anwendung einfach anzeigen, indem wir den Temperaturwert übergeben.
Da unsere Anwendung mit zahlreichen Tools von Drittanbietern integriert wird, sollten wir zusätzliche Maßeinheiten unterstützen, wie z. B. Fahrenheit (°F).
Wir können diese Anforderung erfüllen, indem wir einen weiteren Parameter zu unserer Funktion hinzufügen.
const displayTemperature = (
temperature: number,
unit: string
): void => {
console.log(`Temperature is ${temperature}${unit}`)
}
displayTemperature(20, '°C')
// Temperature is 20°C
displayTemperature(20, '°F')
// Temperature is 20°F
Wir sind uns jedoch nicht ganz sicher, ob der zweite Parameter unserer Funktion von älteren Systemen, die wir integriert haben, verwendet wird, da diese möglicherweise davon ausgehen, dass in unserem System keine Änderungen erforderlich sind. Um dieses Problem zu lösen, können wir dem Parameter unit den Standardwert °C zuweisen. Dieser Ansatz gewährleistet die Kompatibilität mit älteren Funktionen und unterstützt gleichzeitig neue Nutzungsszenarien.
const displayTemperature = (
temperature: number,
unit: string = '°C'
): void => {
console.log(`Temperature is ${temperature}${unit}`)
}
displayTemperature(20)
// Temperature is 20°C
displayTemperature(20, '°C')
// Temperature is 20°C
displayTemperature(20, '°F')
// Temperature is 20°F
Da unsere Anwendung weiter wächst, haben wir eine neue Anforderung für die Temperaturanzeigefunktion erhalten: Sie muss jetzt Standortinformationen (Breiten- und Längengrad), den Gerätenamen und die MAC-Adresse enthalten. Wie in einem früheren Beitrag über Vorschläge für das Schreiben von Typescript-Code erwähnt, kann es mühsam werden, all diese Parameter einzeln hinzuzufügen.
Die beste Lösung ist, unsere Funktion so umzugestalten, dass sie einen einzigen Parameter in Form eines Objekts akzeptiert.
interface Information {
temperature: number
unit: string
}
const displayTemperature = (
info: Information
): void => {
const { temperature, unit } = info
console.log(`Temperature is ${temperature}${unit}`)
}
displayTemperature({ temperature: 20, unit: '°C' })
// Temperature is 20°C
displayTemperature({ temperature: 20, unit: '°F' })
// Temperature is 20°F
Wir haben die Funktion so umgestaltet, dass sie ein Objekt akzeptiert und ein Modell mit dem Namen Information erstellt, aber wir haben noch keine Standardwerte hinzugefügt.
Um in dieser Konfiguration Standardwerte hinzuzufügen, können wir das Objekt in den Parametern der Funktion dekonstruieren und die Standardwerte direkt während der Dekonstruktion zuweisen.
interface Information {
temperature: number
unit?: string
}
const displayTemperature = ({
temperature,
unit = '°C'
}: Information): void => {
console.log(`Temperature is ${temperature}${unit}`)
}
displayTemperature({ temperature: 20})
// Temperature is 20°C
displayTemperature({ temperature: 20, unit: '°C' })
// Temperature is 20°C
displayTemperature({ temperature: 20, unit: '°F' })
// Temperature is 20°F
Ich persönlich bevorzuge diesen Ansatz.
Bislang haben wir die Funktion so umgeschrieben, dass sie einen erweiterten Satz von Werten unterstützt. Fügen wir nun den Standort, den Gerätenamen und die MAC-Adresse hinzu.
Denken Sie daran, dass das Ziel darin besteht, Standardwerte zu unterstützen und gleichzeitig zu ermöglichen, dass sie überschrieben werden können. Der Standardwert für den Standort ist z. B. Breitengrad 48.137154 und Längengrad 11.576124, der Gerätename ist immer „Device“, und die MAC-Adresse ist erforderlich und variiert.
interface Information {
temperature: number
mac: string
unit?: string
address?: {
latitude?: number
longtitude?: number
}
name?: string
}
const displayTemperature = ({
temperature,
mac,
unit = '°C'
name = 'Device',
address = {
latitude: '48.137154',
longtitude: '11.576124'
}
}: Information): void => {
console.log(
`Temperature for device: ${name} with mac: ${mac}`
)
console.log(
`Temperature measurements is ${temperature}${unit}`
)
const { latitude, longtitude } = address
console.log(
`Location is lat: ${latitude} & lng: ${longtitude}`
)
}
displayTemperature({
temperature: 20,
mac: '00:1b:63:84:45:e6'
})
// Temperature for device:
// Device with mac 00:1b:63:84:45:e6
// Temperature is 20°C
// Location is lat: 48.137154 & lng: 11.576124
Lassen Sie uns versuchen, die Position aus dem obigen Code zu überschreiben:
displayTemperature({
temperature: 20,
mac: '00:1b:63:84:45:e6',
address: {
latitude: '47.137154',
longtitude: '19.576124'
}
})
// Temperature for device:
// Device with mac 00:1b:63:84:45:e6
// Temperature is 20°C
// Location is lat: 47.137154 & lng: 19.576124
Was aber, wenn Sie nur den Breitengrad ändern wollen?
displayTemperature({
temperature: 20,
mac: '00:1b:63:84:45:e6',
address: {
latitude: '47.137154',
}
})
// Temperature for device:
// Device with mac 00:1b:63:84:45:e6
// Temperature is 20°C
// Location is lat: 47.137154 & lng: undefined
Oh-oh. Irgendetwas ist hier definitiv falsch. Wenn wir den Standardwert für die Adresse außer Kraft setzen, geht der Code davon aus, dass wir wissen, was wir tun. Wenn wir keinen Wert für den Längengrad übergeben, ist er am Ende undefiniert. Wie können wir das beheben?
const displayTemperature = ({
temperature,
mac,
unit = '°C'
name = 'Device',
address
}: Information): void => {
console.log(`
Temperature for device: ${name} with mac: ${mac}`
)
console.log(
`Temperature measurements is ${temperature}${unit}`
)
const { latitude, longtitude } = {
latitude: '48.137154',
longtitude: '11.576124',
...address
}
console.log(
`Location is lat: ${latitude} & lng: ${longtitude}`
)
}
Wenn wir nun das Gleiche wie im vorigen Schritt tun, nur mit dem Breitengrad, wird alles wie erwartet funktionieren.
displayTemperature({
temperature: 20,
mac: '00:1b:63:84:45:e6',
address: {
latitude: '47.137154',
}
})
// Temperature for device:
// Device with mac 00:1b:63:84:45:e6
// Temperature is 20°C
// Location is lat: 47.137154 & lng: 11.576124
Dieser Ansatz ermöglicht es uns, bei unseren Parametern flexibel zu sein.
Schreiten Sie weiter voran und genießen Sie jeden Schritt Ihrer Programmierreise.