Articles
Introduksjon til TypeScript
Grunnleggende om TypeScript

Grunnleggende om TypeScript

Denne artikkelen forklarer det grunnleggende om TypeScript.

YouTube Video

Utføre "Hello World!"

Først skal vi kjøre det klassiske "Hello World!"-eksempelet i TypeScript ved hjelp av Visual Studio Code.

npm install -g typescript

Installer typescript ved hjelp av npm-kommandoen.

Opprett en tsconfig.json-fil.

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

Opprett en .vscode/launch.json-fil for å muliggjøre kjøring av 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}

Opprett en main.ts-fil som viser "Hello World!". Du kan kjøre den i Visual Studio Code ved å trykke på F5-tasten.

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

Ved å konfigurere på denne måten, kan du kjøre TypeScript-filer i VSCode.

Oversikt over TypeScript

TypeScript (TS) er en overmengde av JavaScript utviklet av Microsoft. TypeScript støtter statisk typing, noe som gir mer robust og vedlikeholdbar kode.

Statisk Typing

  • TypeScript legger til typer i JavaScript og utfører typekontroll ved kompilering. Dette gjør det mulig å forhindre typerelaterte feil på forhånd.
1let message: string = "Hello, TypeScript";
2console.log(message);

Kompilering

  • Siden TypeScript ikke kan kjøres direkte i en nettleser, må det transpileres (kompileres) til JavaScript. Bruk tsc (TypeScript-kompilator) for å konvertere TS-filer til JS-filer.

Valgfrie Typeannotasjoner

  • TypeScript utfører også typeinferens, men lar deg eksplisitt angi typer når det er nødvendig. Dette forbedrer lesbarheten og påliteligheten til koden.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Grensesnitt

  • TypeScript tilbyr interface for å definere formen på objekter. Dette muliggjør streng administrasjon av objektstruktur.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Klasser

  • TypeScript gir utvidelser til JavaScript sin klasse-syntaks og støtter arv, tilgangsmodifikatorer (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 gjenbrukbar og typesikker kode ved hjelp av generiske typer.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Økosystem

  • TypeScript er fullt kompatibel med JavaScript-økosystemet og kan bruke eksisterende JavaScript-kode som den er. Videre er det integrert med populære biblioteker som React og Node.js.

Kraftige utviklerverktøy

  • TypeScript tilbyr avanserte funksjoner som autoutfylling, refaktoreringsstøtte og feilsjekk i redaktører som VSCode.

TypeScript er spesielt nyttig for å forbedre påliteligheten og øke utviklerens produktivitet i store prosjekter.

Variabler i TypeScript

Dette forklarer de grunnleggende konseptene og bruken av variabler i TypeScript.

Deklarasjon av variabler

I TypeScript deklareres variabler ved hjelp av tre nøkkelord: let, const og var. Hvert nøkkelord har ulike egenskaper.

Eksempel på let:

let har blokk-scope (gyldig bare innenfor krøllparenteser {}). Verdier kan tildeles på nytt senere.

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

Eksempel på const:

const kan ikke omtilordnes, så verdien som tildeles én gang kan ikke endres. Innholdet i objekter og matriser kan imidlertid endres.

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 funksjons-scope og kan tildeles på nytt. Men ved å ignorere blokk-scope kan det føre til uventet oppførsel 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!"

Typeannotasjoner

I TypeScript kan du eksplisitt angi typer for variabler. Typeinferenz støttes også, men typeannotasjoner er nyttige i komplekse scenarier.

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

Uinitialiserte Variabler

Hvis en variabel deklareres uten initialisering, blir undefined tildelt som standard. En variabel deklarert med let må eksplisitt tildeles undefined eller inkludere undefined i typen hvis ikke initialisert.

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

Variabel Omfang

let og const har blokk-omfang, så de er kun gyldige innenfor samme blokk.

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

Siden TypeScript er en overbygging av JavaScript, arver den JavaScripts hoisting-funksjon. Hoisting refererer til oppførselen der variabel- og funksjonsdeklarasjoner blir behandlet som om de er løftet til toppen av sitt omfang. Men det er kun deklarasjonen som løftes, mens initialiseringen forblir på plass. Variabler deklarert med var blir løftet, men bruk av let eller const før deklarasjon resulterer i en feil.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • I dette tilfellet blir variabler deklarert med var løftet, og verdiene deres blir skrevet ut.
1console.log(b); // ReferenceError
2let b = 20;
  • Variabler deklarert med let blir ikke løftet, noe som resulterer i en feil.

Sammendrag

Det følgende er en oppsummering av let, const og var.

  • let kan tildeles på nytt og har blokk-scope.
  • const kan ikke tildeles på nytt og har blokk-scope.
  • var kan tildeles på nytt og har funksjons-scope.
  • Alle av dem tillater eksplisitt typeanmerkning for å spesifisere variabeltyper.

Escape-tegnene i TypeScript

Escape-tegn brukes når bestemte tegn ikke kan skrives direkte eller for å representere tegn som har spesiell betydning i en streng. I TypeScript brukes escape-tegn for å representere kontrolltegn eller spesialtegn.

For eksempel kan du bruke \n for å skrive ut en melding som inkluderer et linjeskift.

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

Escapede spesialtegn

Escape-tegn er også nyttige når du skal inkludere spesialtegn i en streng. For eksempel kan du ønske å bruke dobbelt- eller enkeltanførselstegn direkte i 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!"

Escaping selve tilbakeskråstreken

For å inkludere en tilbakeskråstrek i en streng må du skrive den som en dobbel tilbakeskråstrek.

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

Unicode- og heksadesimale escape-tegn

I TypeScript kan Unicode-kodepunkter representeres med escape-sekvenser.

Unicode escape-sekvens

Du kan representere Unicode-tegn ved å spesifisere et firesifret heksadesimalt tall etter \u.

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

Heksadesimal escape

Du kan representere spesifikke tegn ved å bruke et tosifret heksadesimalt tall etter \x.

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

Mal-litteraler og escape-tegn

Template literals defineres ved å omslutte dem med backticks og gir en enkel måte å lage innebygde uttrykk eller flerskrevne strenger på. Vanlige escape-tegn kan brukes direkte i mal-litteraler.

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

Spesialtilfeller

I TypeScript kan bruk av ugyldige escape-sekvenser i en streng føre til en syntaksfeil. Derfor er det viktig å sjekke om escape-tegnene er gyldige.

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

Praktiske brukseksempler

Her er et eksempel på hvordan du kan bygge en kompleks streng ved hjelp av 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 eksemplet brukes \n for et linjeskift og \t for å legge til innrykk. Dette gjør JSON-strukturen enklere å lese.

Sammendrag

Escape-tegn er veldig viktige når du arbeider med strenger i TypeScript. Når du vil inkludere spesialtegn eller kontrolltegn i en streng, kan du lage uttrykksfulle strenger ved å bruke passende escape-sekvenser. Å forstå og bruke escape-tegn riktig kan forbedre lesbarheten og vedlikeholdbarheten i koden.

Versjoner av TypeScript

La oss få en oversikt over TypeScript-versjonene her.

  1. TypeScript 1.0 (2014)

    Den første stabile versjonen av TypeScript. Grunnleggende funksjoner som typing, klasser og moduler ble introdusert.

  2. TypeScript 2.0 (2016)

    Non-nullable Types, Control Flow Analysis, Read-only Properties og Never-typen ble introdusert, noe som forbedret typeinferenz.

  3. TypeScript 3.0 (2018)

    Et mer fleksibelt typesystem ble introdusert, med funksjoner som Project References, utvidelser av Tuple Types og forbedringer på Rest Parameters.

  4. TypeScript 4.0 (2020)

    Funksjoner som Variadic Tuple Types, forbedringer av editoren, forbedret typeinferenz og Labelled Tuple Elements ble lagt til for å forbedre utviklingsopplevelsen.

  5. TypeScript 4.1 (2020)

    Template Literal Types ble introdusert, noe som gjorde strengtype-manipulasjon mer kraftig.

  6. TypeScript 4.3 (2021)

    Tillegget av Override-nøkkelordet, forbedringer av tilgangsmodifikatorer i konstruktører, og forbedret typestøtte for WeakMap og WeakSet.

  7. TypeScript 4.5 (2021)

    Awaited-typen, ModuleSuffixes, og forbedret kompatibilitet med ECMAScript-moduler ble lagt til.

  8. TypeScript 5.0 (2023)

    Standardisering av Decorators, forbedring av byggehastighet for prosjekter, forbedring av typesystemet, og støtte for de nyeste ECMAScript-funksjonene har blitt gjort.

TypeScript utvikler seg kontinuerlig, med flere versjoner som slippes hvert år og introduserer nye funksjoner og forbedringer.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Datatyper i TypeScript