Funksjoner i TypeScript: slik skriver du trygg og ryddig logikk steg for steg
Funksjoner er hjertet i det meste av utvikling, enten du lager et lite script eller en større webapplikasjon. I TypeScript får funksjoner ekstra kraft fordi du kan beskrive tydelige typer for parameterne og returverdien.
I denne artikkelen ser vi praktisk på hvordan du lager, typer og forbedrer funksjoner i TypeScript, slik at du får mer lesbar, tryggere og enklere vedlikeholdbar logikk.
Hvorfor bruke TypeScript til funksjoner i det hele tatt?
Funksjoner i ren JavaScript er fleksible, men nettopp den fleksibiliteten gjør det lett å gjøre feil. Du kan sende inn «feil» verdier, få rare returtyper og først oppdage problemet når noe krasjer i nettleseren.
Med TypeScript beskriver du forventningene dine i kode: hva funksjonen tar inn og hva den gir tilbake. Da kan verktøyet ditt advare deg tidlig, og du slipper mange klassiske feilsøkingsrunder.
Grunnleggende funksjoner med typer
La oss starte med en enkel funksjon med eksplisitte typer for parametere og returverdi:
Eksempel:
function summer(a: number, b: number): number {
return a + b;
}
Her sier du tydelig: funksjonensummertar to tall og returnerer et tall. Hvis du senere prøver å kalle summer("3", 4) vil TypeScript klage før du kjører prosjektet.
Som grunnregel lønner det seg å skrive returtype eksplisitt, spesielt i kode du planlegger å bruke mer enn én gang eller dele med andre.
Pilfunksjoner og når de er nyttige
Pilfunksjoner (arrow functions) brukes mye i moderne JavaScript og TypeScript, spesielt i funksjonell stil og i rammeverk som React.
Eksempel med pilfunksjon:
const ganger = (a: number, b: number): number => {
return a * b;
}
Hvis funksjonen er veldig kort, kan du skrive den enda mer kompakt:
const dobbel = (verdi: number): number => verdi * 2;
Pilfunksjoner er spesielt praktiske når du sender en funksjon som parameter til en annen funksjon, for eksempel til map, filter eller lignende.
Funksjonstyper: når funksjoner blir data
Noen ganger vil du sende en funksjon til en annen funksjon, eller lagre en funksjon i en variabel med en konkret signatur. Da er funksjonstyper nyttige.
Eksempel på funksjonstype:
type Kalkulator = (a: number, b: number) => number;
Nå kan du bruke Kalkulator som en type:
const leggSammen: Kalkulator = (a, b) => a + b;
const trekkFra: Kalkulator = (a, b) => a - b;
Fordelen er at alle funksjoner av typen Kalkulator</code må følge samme kontrakt. Hvis du glemmer én parameter, får du beskjed med en gang.
Valgfrie parametere og standardverdier
I virkeligheten er ikke alle parametere alltid nødvendige. TypeScript lar deg markere noen som valgfrie eller gi dem standardverdier.
Valgfri parameter:
function hils(navn: string, tittel?: string): string {
if (tittel) {
return `Hei, ${tittel} ${navn}`;
}
return `Hei, ${navn}`;
}
Her kan du kalle både hils("Ola") og hils("Ola", "Dr."). Spørsmålstegnet etter tittel betyr at parametere kan væreutelatt.
Standardverdi:
function formaterBelop(belop: number, valuta: string = "NOK"): string {
return `${belop} ${valuta}`;
}
Hvis du ikke sender inn valuta, brukes «NOK». Merk at selv om du har standardverdi, er det fortsatt lurt å skrive type eksplisitt, spesielt i mer avanserte funksjoner.
Parametere som objekter for bedre lesbarhet
Funksjoner med mange parametere blir fort vanskelige å lese. En praktisk løsning er å samle dem i ett objekt med navngitte felter.
Eksempel uten objekt:
function opprettBruker(navn: string, aktiv: boolean, alder: number): void {
// ...
}
Her er det lett å blande rekkefølgen når du kaller funksjonen. Kontrasten blir tydelig hvis du bruker objekt:
type BrukerInput = {
navn: string;
aktiv: boolean;
alder: number;
};
function opprettBruker(input: BrukerInput): void {
// ...
}
Nå kalles funksjonen slik:
opprettBruker({
navn: "Ola",
aktiv: true,
alder: 30,
});
Dette er mer selvforklarende, og TypeScript sørger for at alle feltene finnes og har riktig type.
Unions og overlagring når logikken varierer
I praksis hender det at en funksjon skal kunne ta inn flere ulike typer input. TypeScript har to nyttige verktøy for dette: unions og overlagring (overloads).
Union-parametere:
function tilTekst(verdi: string | number): string {
return String(verdi);
}
Her kan verdi være enten streng eller tall, og uansett får du en streng tilbake.
Overlagringer nyttig når returtypen faktisk endrer seg avhengig av hva du sender inn. For litt større prosjekter kan det være lurt å være forsiktig med for avanserte overlagringer, men prinsippet ser slik ut:
function hentFelt(verdi: string[]): number;
function hentFelt(verdi: number[]): string;
function hentFelt(verdi: any[]): any {
return verdi.length;
}
Her beskriver de første linjenesignaturenesom andre deler av prosjektet ser, mens siste funksjon inneholder selve implementasjonen.
Asynkrone funksjoner med async og Promise
I moderne webutvikling jobber du ofte med nettverkskall, databaser eller filoperasjoner som tar tid. Da er asynkrone funksjoner med async og await standarden.
Eksempel på asynkron funksjon:
async function hentData(url: string): Promise<string> {
const respons = await fetch(url);
const tekst = await respons.text();
return tekst;
}
Returtypen er Promise<string>, som betyr at funksjonen lover å gi deg en streng senere. TypeScript hjelper deg å holde orden på hva som faktisk er en Promise, og hva som er et ferdig resultat.
Ryddig struktur og gode vaner rundt funksjoner
Typer løser mye, men de erstatter ikke god struktur. Et par enkle vaner gir stor gevinst over tid.
- Gjør funksjoner små: La hver funksjon løse én oppgave, og gi den et navn som sier akkurat hva den gjør.
- Unngå lange parameterlister: Bruk objekt som parameter når du merker at det blir for mye.
- Vær tydelig på returtyper: Spesielt for funksjoner som brukes flere steder, eller er del av et offentlig API.
- Logg og kast feil bevisst: I asynkrone funksjoner, sørg for at feil enten håndteres eller propagere tydelig videre.
Hvis du merker at en funksjon får veldig mange hvis-setninger og spesialtilfeller, kan det være et signal om at den burde splittes opp eller at du bør innføre egne typer og hjelpefunksjoner.
Slik kommer du videre i praksis
For å lære dette skikkelig er det lurt å bruke funksjoner aktivt i et lite prosjekt. For eksempel kan du:
- Bygge et lite verktøy som formaterer og validerer tekstinnputt.
- Lage et mini-API-klientlag som henter data fra en offentlig API.
- Refaktorere gammel JavaScript til TypeScript ved å legge på funksjonstyper.
Start med å skrive funksjonene slik du pleier, og legg deretter på typer steg for steg. Underveis vil verktøyet ditt peke på steder der du var usikker uten å vite det selv, og du får en mer robust struktur som er lettere å bygge videre på.
0 kommentarer