# Hvad er TypeScript? En begynderguide til JavaScript-supersættet

TypeScript har en række vigtige funktioner, der fundamentalt forbedrer **udviklingen af webapplikationer**. Denne TypeScript-tutorial giver dig en introduktion til programmeringssproget og forklarer nogle af dets vigtigste funktioner og anvendelser samt dets fordele og ulemper.

## Hvad er TypeScript?

TypeScript er udviklet af Microsoft og bygger på programmeringssproget JavaScript, som er meget udbredt inden for webudvikling. En af de mest fremtrædende egenskaber ved TypeScript er **statisk typning**. I modsætning til JavaScript, som har dynamisk typning, giver TypeScript mulighed for at deklarere datatyper for variabler, funktioner og parametre. Dette gør det muligt at opdage kodningsfejl på et tidligt tidspunkt, så fejlene kan identificeres, inden koden er blevet udført. Statisk typning forbedrer ikke kun kodekvaliteten betydeligt, men også kodens læsbarhed.

TypeScript-syntaksen er næsten identisk med JavaScript, hvilket gør det meget nemmere at integrere den i eksisterende JavaScript-projekter. Faktisk **er TypeScript en supersæt af JavaScript**, hvilket betyder, at enhver JavaScript-kode, der er korrekt, også er gyldig TypeScript-kode. Dette giver dig mulighed for gradvist at migrere til TypeScript og drage fordel af fordelene ved statisk typning og andre funktioner uden at skulle omskrive din eksisterende kodebase fuldstændigt.

Her er et simpelt JavaScript-eksempel:

```javascript
function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"
```

I ovenstående kode er funktionen `greet` ikke begrænset til en bestemt datatype for parameteren `name`. Det betyder, at funktionen stadig vil fungere, selvom vi overfører et tal som argument.

I TypeScript kan koden se sådan ud:

```typescript
function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript
```

Her har vi deklareret parameteren `name` som en streng. Hvis vi forsøger at bruge funktionen med et tal, vil TypeScript vise en fejl, fordi den overførte datatype ikke matcher den forventede datatype.

Dette eksempel viser, hvordan TypeScript hjælper med at opdage fejl tidligt i forløbet og forbedrer kodens kvalitet ved at forhindre **forkert brug af datatyper**. Det er vigtigt at bemærke, at TypeScript til sidst kompileres til JavaScript, hvilket gør det muligt at køre det i ethvert JavaScript-miljø. Dette betyder dog, at du kun får fordelene ved typesikkerhed i udviklingsfasen.

## Hvad bruges TypeScript til?

TypeScript er uundværligt inden for forskellige områder af softwareudvikling, især i situationer hvor **typesikkerhed** og kodekvalitet er af afgørende betydning.

Et fremtrædende anvendelsesområde for TypeScript er webudvikling. Her sikrer TypeScript, at JavaScript-kode skrives på en måde, der gør den mere sikker og lettere at vedligeholde. Dette er en fordel i omfattende frontend-projekter med komplekse kodebaser. TypeScript kan dog også implementeres på **serversiden (backend) i Node.js-applikationer** for at give et ekstra sikkerhedslag. I serverløse arkitekturer som AWS Lambda og Azure Functions hjælper TypeScript med at minimere fejl og sikre pålidelig udførelse.

Udvikling på tværs af platforme er endnu et område, hvor TypeScript viser sine styrker. Det kan optimere **applikationer på tværs af platforme og udvikling af mobile apps** betydeligt. Frameworks som NativeScript og React Native tilbyder support til TypeScript, når det kommer til programmering af mobile apps til forskellige platforme. I spiludvikling anvendes TypeScript i projekter, der bruger WebGL eller spil-engines som Phaser eller Babylon.js. TypeScripts typesikkerhed hjælper med at forbedre spillets kvalitet og vedligeholdelse.

TypeScript bruges også til **datavisualisering og analyseprojekter**. Biblioteker som D3.js understøtter TypeScript og gør det muligt at oprette sofistikerede dashboards og visualiseringer.

## Sådan installeres TypeScript

Det er nemt at installere TypeScript, og det kræver kun få trin. Hvis du har **Node.js** på din computer, kan du installere TypeScript med `npm` (Node Package Manager).

### Trin 1: Download Node.js

Kontroller, om du har Node.js installeret på din computer. Hvis du endnu ikke har installeret Node.js, kan du downloade og installere det fra den officielle hjemmeside.

### Trin 2: Installer TypeScript i terminalen

Åbn din **kommandoprompt** (f.eks. Kommandoprompt i Windows eller terminalen på macOS eller Linux) og indtast følgende kommando for at installere TypeScript globalt:

```bash
npm install -g typescript
```

Flagget `-g` (global) installerer TypeScript på hele dit system, så du kan bruge det hvor som helst.

### Trin 3: Kontroller den installerede version

Du kan teste, om installationen var vellykket, ved at udføre følgende kommando:

```bash
tsc -v
```

Denne kommando viser, hvilken version af TypeScript der er installeret. Hvis der vises et **versionsnummer**, betyder det, at installationen er gennemført.

Efter installationen kan du generere **JavaScript-filer** ved at oprette TypeScript-filer (med filtypenavnet *.ts*) og kompilere dem med TypeScript-kompilatoren `tsc`.

### Trin 4: Opret en TypeScript-fil

Opret en TypeScript-fil, f.eks. *app.ts*, og indsæt din TypeScript-kode.

```typescript
type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);
```

### Trin 5: Kompiler filen

Kompiler TypeScript-filen ved at indtaste følgende kommando:

```bash
tsc app.ts
```

Dette vil kompilere *app.ts* til en JavaScript-fil med navnet *app.js*. Du kan derefter køre JavaScript-filen.

## Hvilke funktioner har TypeScript?

Webudvikling har gjort betydelige fremskridt i de senere år, og TypeScript er fremstået som et yderst **effektivt alternativ til JavaScript**. Nedenfor har vi sammenfattet de vigtigste funktioner i dette sprog.

### Statisk typning

Statisk typning er en vigtig funktion i TypeScript, der giver dig mulighed for at angive datatyper for variabler, parametre, funktioner og andre elementer i din kode. I modsætning til **dynamisk typning i JavaScript**, hvor datatyper bestemmes under udførelsen, tildeles datatyper i TypeScript under udviklingen, inden koden udføres. Denne metode hjælper med at identificere fejl og logiske problemer på et tidligt tidspunkt.

```typescript
function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error
```

I dette eksempel har vi brugt statisk typning til funktionen `add`. De to parametre `a` og `b` er deklareret som tal (`number`), og funktionen returnerer en værdi af typen `number`. Ethvert forsøg på at bruge denne funktion med en anden datatype vil få TypeScript til at identificere det som en fejl.

### Valgfri indtastning

Med valgfri typning har du mulighed for at angive datatyper for bestemte variabler og parametre, mens andre kan forblive uden en defineret datatype.

```typescript
function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}
```

Funktionen `sayHello` er defineret med parametrene `name` og `age`. Betegnelsen `any` angiver, at parameteren `age` kan være af enhver datatype.

### ES6+-funktioner

TypeScript understøtter moderne JavaScript-funktioner, herunder ES6 og nyere funktioner såsom **pilfunktioner og skabelonstrenge**.

```typescript
const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;
```

Pilfunktionerne fører til en kortere og mere præcis syntaks.

### Kodestruktur

TypeScript tilbyder bedre kodestrukturering og sikrer, at koden opdeles i genanvendelige dele. Dette er muligt takket være moduler og navneområder.

```typescript
// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);
```

Her viser vi, hvordan man strukturerer kode med moduler og bruger `import` og `export` til organisering. Funktionen add er defineret i et særskilt modul ved navn `Math.ts` og derefter importeret og integreret i et andet modul, `Main.ts`.

### Objektorienteret programmering (OOP)

TypeScript letter objektorienteret programmering gennem [TypeScript-klasser](https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/typescript-klasser/), grænseflader og arv:

```typescript
class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();
```

Dette eksempel viser brugen af klasser og objektorienteret programmering (OOP) i TypeScript. Klassen `Person` har egenskaberne `name`, `age` og en metode `greet`, som bruges til at introducere personen og give oplysninger om vedkommende.

### Udvidet typesystem

TypeScript-typesystemet er fleksibelt og omfattende. Du kan oprette **brugerdefinerede typer og grænseflader** og endda udvide eksisterende typer.

```typescript
interface Animal {
    name: string;
}
 
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };
```

Grænsefladen `Animal` definerer en egenskab `name`, mens grænsefladen `Dog` arver fra `Animal` og tilføjer en yderligere egenskab `breed`. Objektet `myDog` har karakteristikaene fra begge grænseflader.

### Kompatibilitet med JavaScript

TypeScript er kompatibelt med JavaScript, hvilket gør det muligt at køre det i ethvert JavaScript-miljø. Denne kompatibilitet gør det lettere at integrere TypeScript gradvist i eksisterende JavaScript-projekter.

```typescript
// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}
```

Ovenstående JavaScript-kode (uden typificering) kan uden problemer bruges i en TypeScript-kode (med typificering).

## Hvad er fordelene og ulemperne ved TypeScript?

TypeScript har en række fordele, men også nogle ulemper. Her er en oversigt:

### Fordele

TypeScript har et omfattende økosystem af typedefinitioner til mange JavaScript-biblioteker og -frameworks. Dette gør integrationen af tredjepartskode i TypeScript-projekter problemfri og ligetil. Dette er nyttigt i dagens verden af webbaserede applikationer, der ofte er afhængige af flere biblioteker og frameworks.

Ud over statisk typning tilbyder TypeScript en lang række udviklingsfunktioner, herunder grænseflader, klasser, moduler og **understøttelse af aktuelle ECMAScript-standarder**. Disse funktioner forbedrer kodens struktur, letter vedligeholdelsen og skalerbarheden af projekter og fremmer produktiviteten i udviklingen. Mange integrerede udviklingsmiljøer (IDE’er) såsom Visual Studio Code yder fremragende support til TypeScript.

### Ulemper

TypeScript **tager tid at vænne sig til**, især for udviklere, der kun har arbejdet med JavaScript, før de begyndte at bruge det. TypeScript-kode skal kompileres i JavaScript, før den kan udføres i browsere eller Node.js-miljøer. Dette skaber et ekstra trin i udviklingsprocessen.

I mindre projekter kan TypeScript opleves som alt for kompliceret, da fordelene ved typesikkerhed måske ikke er så tydelige. TypeScript-projekter kan kræve **flere ressourcer på grund af yderligere typeoplysninger og kompileringsskridt**.

## Hvad er nogle alternativer til TypeScript?

Der findes forskellige webprogrammeringssprog, der kan være et godt alternativ til TypeScript, afhængigt af projektets specifikke krav og udviklerens/udviklernes præferencer.

- **Flow**: Flow er en statisk typekontrol til JavaScript, der er udviklet af Facebook. Den giver dig mulighed for at tilføje typer til JavaScript-kode uden at skulle skifte helt til TypeScript. Flow er et godt valg, hvis du gradvist vil integrere typning i dine JavaScript-projekter.
- **Dart**: Dette er et programmeringssprog udviklet af Google, der kan bruges til at oprette webapplikationer og mobile apps. Det tilbyder typesikkerhed og god ydeevne. Dart bruges ofte i kombination med Flutter-rammen til udvikling af mobile apps.
- **PureScript**: PureScript er et stærkt typebestemt funktionelt programmeringssprog, der inkluderer stærk typesikkerhed og en rent funktionel programmeringsstil. Det gør det muligt at importere JavaScript-biblioteker.
- **Elm**: Elm er et funktionelt, stærkt typebestemt sprog designet til udvikling af weyb-applikationer. Elm fremmer princippet om Elm Architecture og har et højt niveau af typesikkerhed.
- **ReasonML (BuckleScript)**: Dette sprog er udviklet af Facebook og er baseret på OCaml. BuckleScript er en kompilator, der kompilerer ReasonML til JavaScript. Det muliggør også typesikkerhed og er let at integrere med React til frontend-udvikling.

Tip Vi går mere i dybden med andre emner såsom [TypeScript-funktioner](https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/typescript-funktioner/) og [TypeScript-arrays](https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/typescript-arrays/) i andre artikler i vores digitale guide.


This is a markdown version of: [https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/hvad-er-typescript/](https://www.ionos.com/da-dk/digitalguide/websteder/webudvikling/hvad-er-typescript/) for AI/LLM consumption.