Függvények létrehozása a TypeScriptben
A JavaScriptben a függvénydefiníciók nem adnak meg adattípusokat a paraméterekhez, nem hajtanak végre típusellenőrzést az átadott argumentumokon, vagy nem ellenőrzik a kapott argumentumok számát. Ezért hozzá kell adnia a paraméterek ellenőrzéséhez szükséges logikát a függvényekhez.
A TypeScript leegyszerűsíti a függvények fejlesztését, és megkönnyíti a hibaelhárítást azáltal, hogy lehetővé teszi a paraméterek beírását és az értékek visszaadását. A TypeScript új paramétereket is hozzáad. Bár például az összes paraméter nem kötelező a JavaScript-függvényekben, a TypeScriptben megadhatja, hogy szükség van-e paraméterekre, vagy nem kötelező.
Ha típusokat ad hozzá a függvényekhez, azzal megakadályozhatja, hogy olyan értékeket adjon át, amelyeket nem szabad átadni a függvények számára. A gépelt függvények különösen fontosak, ha nagyobb kódbázisokkal vagy mások által fejlesztett függvényekkel dolgozik. Bár a típusok hozzáadása egyszerű különbség, a függvénynek átadott értékeket és a visszaadott értékeket ellenőrzi. Ahelyett, hogy az összes logikát hozzá kell adnia a függvényhez annak ellenőrzéséhez, hogy a megfelelő értéktípust adták-e át neki, és a visszatérési érték helyes, a TypeScript segít biztosítani a megfelelő értéktípusokat a kód fejlesztése során. Emellett a függvénylogika létrehozásakor teljes automatikus kiegészítési támogatással fog rendelkezni, mivel a szerkesztő tudni fogja a paraméterek adattípusát – amit a JavaScript általában nem tud észlelni. Az automatikus kiegészítés különösen hasznos, ha mások által fejlesztett függvényeket használ, mert a TypeScript tisztázza a szükséges bemeneti és kimeneti típusokat.
A JavaScripthez hasonlóan a TypeScriptben is többféleképpen definiálhat függvényeket. Nézzük meg, hogy ezek a függvények miben különböznek a TypeScript típusainak hozzáadásával.
Elnevezett függvények
Az elnevezett függvény egy függvénydeklaráció, amely a function kulcsszóval van megírva, és az aktuális hatókörön belül egy külön nevet ad meg. Az elnevezett függvénydeklarációk a kód futtatása előtt betölthetők a végrehajtási környezetbe. Ezt a folyamatot emelésnek nevezzük, ami azt jelenti, hogy a függvényt a deklarálás előtt használhatja.
A TypeScriptben egy elnevezett függvény deklarálásának szintaxisa ugyanaz, mint a JavaScriptben. A TypeScript esetében az egyetlen különbség, hogy megadhat egy típusjegyzetet a függvény paramétereihez és a visszatérési értékhez.
Ez a függvény két típusparamétert number fogad el, és egy number.
function addNumbers (x: number, y: number): number {
return x + y;
}
addNumbers(1, 2);
Névtelen függvények
A függvénykifejezések (vagy névtelen függvények) olyan függvények, amelyek nincsenek előre betöltve a végrehajtási környezetbe, és csak akkor futnak, amikor a kód találkozik vele. A függvénykifejezések futásidőben jönnek létre, és a meghívásuk előtt deklarálni kell őket. Nem emelik fel őket, ellentétben az elnevezett függvénydeklarációkkal, amelyek a program végrehajtása után azonnal fel vannak emelve, és a deklaráció előtt hívhatók meg.
A függvénykifejezések olyan értékeket jelölnek, amelyek általában egy változóhoz vannak rendelve, vagy más függvényeknek vannak átadva, és névtelenek is lehetnek, ami azt jelenti, hogy a függvénynek nincs neve.
Ez a példa egy function kifejezést rendel a változóhoz addNumbers. Figyelje meg, hogy a függvény neve helyett a függvény névtelenül jelenik meg. Ezzel a változóval meghívhatja a függvényt.
let addNumbers = function (x: number, y: number): number {
return x + y;
}
addNumbers(1, 2);
Az alábbi példa bemutatja, hogyan néz ki a névvel ellátott függvény sum névtelen függvényként írva. Figyelje meg, hogy a nevet sum lecserélték a kulcsszóra function , és a függvény kifejezésként lett implementálva egy változó deklarációban.
let sum = function (input: number[]): number {
let total: number = 0;
for(let i = 0; i < input.length; i++) {
if(isNaN(input[i])) {
continue;
}
total += Number(input[i]);
}
return total;
}
console.log(sum([1, 2, 3]));
A korábbiakhoz hasonlóan a névtelen függvények használatakor típusellenőrzést és Intellisense-t is kap. Ebben a példában azt is megfigyelheti, hogy a változó sum nincs beírva, de a TypeScript a típust egy "környezetfüggő gépelés" nevű típuslekövetkeztetéssel tudja meghatározni. A környezetfüggő gépelés csökkentheti a program típusának megőrzéséhez szükséges erőfeszítést.
Nyílfüggvények
A nyílfüggvények (más néven Lambda- vagy kövér nyílfüggvények a => definiáláshoz használt operátor miatt) rövidített szintaxist biztosítanak egy névtelen függvény definiálásához. Tömör jellegéből adódóan a nyílfüggvényeket gyakran egyszerű függvényekkel és bizonyos eseménykezelési forgatókönyvekben használják.
Ez a példa egy névtelen function függvény szintaxisát hasonlítja össze egy vonalnyilat ábrázoló függvénnyel. A nyílfüggvény a szintaxis rövidítéséhez kihagyja a függvény kulcsszóját, és hozzáadja az => operátort a paraméterek és a függvény törzse között.
// Anonymous function
let addNumbers1 = function (x: number, y: number): number {
return x + y;
}
// Arrow function
let addNumbers2 = (x: number, y: number): number => x + y;
Ebben a példában azt is megfigyelheti, hogy a kapcsos zárójelek el lettek távolítva, és nincs return utasítás. Az egysoros nyílfüggvények tömör szövegtörzsi szintaxist vagy implicit visszatérést használhatnak, amely lehetővé teszi a kapcsos zárójelek és a return kulcsszó kihagyását.
Ha a függvénytörzs egynél több vonallal rendelkezik, kapcsos zárójelekbe foglalja, és adja meg az return utasítást (ha szükséges.) Ez a példa azt mutatja be, hogy a korábbi példában szereplő névtelen függvény hogyan néz ki nyílfüggvényként írva.
let total2 = (input: number[]): number => {
let total: number = 0;
for(let i = 0; i < input.length; i++) {
if(isNaN(input[i])) {
continue;
}
total += Number(input[i]);
}
return total;
}
Tipp.
A nyílfüggvényeket az ES2015-ben vezették be, így nem minden böngésző támogatja őket. A TypeScript használatával kihasználhatja ezeket a függvénytípusokat, majd szükség esetén a korábbi JavaScript-verziókra fordíthatja át, hogy a kód a régebbi böngészőkkel működjön.