Articles
Introduktion til TypeScript
Grundlæggende om TypeScript

Grundlæggende om TypeScript

Denne artikel forklarer grundlæggende om TypeScript.

YouTube Video

Udførelse af "Hello World!"

Først vil vi køre det klassiske "Hello World!" eksempel i TypeScript ved hjælp af Visual Studio Code.

npm install -g typescript

Installer typescript ved hjælp af npm-kommandoen.

Opret en tsconfig.json-fil.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Opret en .vscode/launch.json-fil for at gøre det muligt at køre main.ts-filen i Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Opret en main.ts-fil, der viser "Hello World!". Du kan køre det i Visual Studio Code ved at trykke på F5-tasten.

1console.log("Hello World!");

Ved at konfigurere på denne måde kan du køre TypeScript-filer i VSCode.

Oversigt over TypeScript

TypeScript (TS) er et superset af JavaScript udviklet af Microsoft. TypeScript understøtter statisk typning, hvilket muliggør mere robust og vedligeholdelsesvenlig kode.

Statisk typning

  • TypeScript tilføjer typer til JavaScript og udfører typekontrol under kompilering. Dette gør det muligt at forebygge fejl relateret til typer på forhånd.
1let message: string = "Hello, TypeScript";
2console.log(message);

Kompilering

  • Da TypeScript ikke kan køres direkte i en browser, skal det transpileres (kompileres) til JavaScript. Brug tsc (TypeScript Compiler) til at konvertere TS-filer til JS-filer.

Valgfri typeannotationer

  • TypeScript udfører også typeinference, men giver dig mulighed for eksplicit at angive typer, når det er nødvendigt. Dette forbedrer kodelæseligheden og pålideligheden.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfaces

  • TypeScript tilbyder interface til at definere objekternes struktur. Dette muliggør streng styring af objekternes struktur.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Klasser

  • TypeScript tilbyder udvidelser til JavaScripts klasse-syntaks og understøtter arv, adgangsmodifikatorer (public, private, protected) og abstrakte klasser.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Generiske typer

  • I TypeScript kan du skrive genanvendelig og typesikker kode ved hjælp af generiske typer.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Økosystem

  • TypeScript er fuldt kompatibel med JavaScript-økosystemet og kan bruge eksisterende JavaScript-kode som den er. Desuden er det integreret med populære biblioteker som React og Node.js.

Kraftfulde udviklingsværktøjer

  • TypeScript tilbyder avancerede funktioner som autofuldførelse, refaktorings-support og fejlkontrol i editorer som VSCode.

TypeScript er særligt nyttigt til at øge pålideligheden og forbedre udviklerens produktivitet i store projekter.

Variabler i TypeScript

Dette forklarer de grundlæggende begreber og brug af variabler i TypeScript.

Variabeldeklaration

I TypeScript erklæres variabler ved hjælp af tre nøgleord: let, const og var. Hvert nøgleord har forskellige egenskaber.

Eksempel på let:

let har blokomfang (gyldigt kun inden for krøllede parenteser {}). Værdier kan tildeles på ny senere.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Eksempel på const:

const kan ikke tildeles igen, så værdien, der er tildelt én gang, kan ikke ændres. Indholdet af objekter og arrays kan dog ændres.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Eksempel på var:

var har funktions-scope og kan gentildeles. Ved at ignorere blok-scope kan det dog forårsage uventet adfærd sammenlignet med let eller const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Typeannoteringer

I TypeScript kan du eksplicit annotere typer for variabler. Typeinferens understøttes også, men typeannoteringer er nyttige i komplekse scenarier.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Uinitialiserede variabler

Hvis en variabel erklæres uden initialisering, tildeles undefined som standard. En variabel erklæret med let skal eksplicit tildeles undefined eller inkludere undefined i sin type, hvis den ikke initialiseres.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Variabel rækkevidde

let og const har blokomfang, så de er kun gyldige inden for den samme blok.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Variabel Hoisting

Da TypeScript er et superset af JavaScript, arver det JavaScripts hoisting-egenskab. Hoisting refererer til opførslen, hvor variabel- og funktionsdeklarationer behandles, som om de er løftet til toppen af deres scope. Dog bliver kun deklarationen hoistet, mens initialiseringen forbliver på sin plads. Variabler erklæret med var hoistes, men brug af let eller const før deklarationen resulterer i en fejl.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • I dette tilfælde hoistes variabler erklæret med var, og deres værdier bliver outputtet.
1console.log(b); // ReferenceError
2let b = 20;
  • Variabler erklæret med let hoistes ikke, hvilket resulterer i en fejl.

Sammendrag

Følgende er en oversigt over let, const og var.

  • let kan genassigneres og har blokomfang.
  • const kan ikke genassigneres og har blokomfang.
  • var kan genassigneres og har funktionsomfang.
  • De tillader alle eksplicit typeannotation til at specificere variabeltyper.

Escape-tegn i TypeScript

Escape-tegn bruges, når specifikke tegn ikke kan indtastes direkte, eller for at repræsentere tegn, der har en særlig betydning inden for en streng. I TypeScript bruges escape-tegn til at repræsentere kontroltegn eller specialtegn.

For eksempel, brug \n for at outputte en besked, der inkluderer et linjeskift.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Escape af specielle tegn

Escape-tegn er også nyttige, når man inkluderer specialtegn i en streng. For eksempel kan du ønske at bruge dobbelte anførselstegn eller enkelte anførselstegn direkte inden for en streng.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Escape af selve bagstregen

For at inkludere en bagstreg i en streng skal du skrive den som en dobbelt bagstreg.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Unicode- og hexadecimale escape-tegn

I TypeScript kan Unicode-kodepunkter repræsenteres ved hjælp af escape-sekvenser.

Unicode-escape-sekvens

Du kan repræsentere Unicode-tegn ved at specificere et firecifret hexadecimalt tal efter \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Hexadecimal escape

Du kan repræsentere specifikke tegn ved hjælp af et tocifret hexadecimalt tal efter \x.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Template literals og escape-tegn

Template-literals defineres ved at omslutte dem med backticks og giver en nem måde at skabe indlejrede udtryk eller flerskrevne strenge på. Almindelige escape-tegn kan bruges direkte i template literals.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Særlige tilfælde

I TypeScript kan brug af ugyldige escape-sekvenser i en streng resultere i en syntaksfejl. Derfor er det vigtigt at kontrollere, om escape-tegnene er gyldige.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Praktiske anvendelseseksempler

Her er et eksempel på, hvordan man konstruerer en kompleks streng ved hjælp af escape-tegn.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

I dette eksempel bruges \n til et linjeskift, og \t bruges til at tilføje indrykning. Dette gør JSON-strukturen lettere at læse.

Sammendrag

Escape-tegn er meget vigtige, når man arbejder med strenge i TypeScript. Når du vil inkludere specialtegn eller kontroltegn i en streng, kan du skabe udtryksfulde strenge ved at bruge passende escape-sekvenser. At forstå og bruge escape-tegn korrekt kan forbedre læsbarheden og vedligeholdelsen af koden.

Versioner af TypeScript

Lad os få et overblik over TypeScript-versionerne her.

  1. TypeScript 1.0 (2014)

    Den første stabile version af TypeScript. Grundlæggende funktioner som typning, klasser og moduler blev introduceret.

  2. TypeScript 2.0 (2016)

    Non-nullable Types, Control Flow Analysis, Read-only Properties og typen Never blev introduceret for at forbedre typeinferens.

  3. TypeScript 3.0 (2018)

    Et mere fleksibelt typesystem blev introduceret med funktioner som Project References, udvidelser til Tuple Types og forbedringer af Rest Parameters.

  4. TypeScript 4.0 (2020)

    Funktioner som Variadic Tuple Types, forbedringer i editoren, forbedret typeinferens og Labelled Tuple Elements blev tilføjet for at forbedre udviklingsoplevelsen.

  5. TypeScript 4.1 (2020)

    Template Literal Types blev introduceret, hvilket gjorde strengtypemanipulation mere kraftfuld.

  6. TypeScript 4.3 (2021)

    Tilføjelsen af nøgleordet Override, forbedringer af adgangsmodifikatorer inden for konstruktører og forbedret typesupport for WeakMap og WeakSet.

  7. TypeScript 4.5 (2021)

    Typen Awaited, ModuleSuffixes og forbedret kompatibilitet med ECMAScript-moduler blev tilføjet.

  8. TypeScript 5.0 (2023)

    Standardisering af Decorators, forbedring af projektets byggehastighed, forbedring af typesystemet og support til de nyeste ECMAScript-funktioner er blevet tilføjet.

TypeScript udvikler sig løbende, med adskillige versioner udgivet hvert år, der introducerer nye funktioner og forbedringer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Datatyper i TypeScript