Articles
Introduktion till TypeScript
Grunderna i TypeScript

Grunderna i TypeScript

Denna artikel förklarar grunderna i TypeScript.

YouTube Video

Köra "Hello World!"

Först kör vi det klassiska "Hello World!"-exemplet i TypeScript med Visual Studio Code.

npm install -g typescript

Installera typescript med kommandot npm.

Skapa en tsconfig.json-fil.

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

Skapa en .vscode/launch.json-fil för att möjliggöra körning av filen main.ts 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}

Skapa en main.ts-fil som visar "Hello World!". Du kan köra den i Visual Studio Code genom att trycka på tangenten F5.

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

Genom att konfigurera på detta sätt kan du köra TypeScript-filer i VSCode.

Översikt över TypeScript

TypeScript (TS) är en superset av JavaScript utvecklad av Microsoft. TypeScript stöder statisk typning vilket möjliggör mer robust och underhållbar kod.

Statisk Typning

  • TypeScript lägger till typer i JavaScript och utför typkontroll under kompilering. Detta gör det möjligt att undvika typrelaterade buggar i förväg.
1let message: string = "Hello, TypeScript";
2console.log(message);

Kompilering

  • Eftersom TypeScript inte kan köras direkt i en webbläsare måste det transpileras (kompileras) till JavaScript. Använd tsc (TypeScript Compiler) för att konvertera TS-filer till JS-filer.

Valfria Typbeteckningar

  • TypeScript utför också typinferens men låter dig uttryckligen ange typer vid behov. Detta förbättrar kodens läsbarhet och tillförlitlighet.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Gränssnitt

  • TypeScript erbjuder interface för att definiera objektens struktur. Detta möjliggör strikt hantering av objektens struktur.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Klasser

  • TypeScript ger tillägg till JavaScripts klasssyntax och stödjer arv, åtkomstmodifierare (public, private, protected) och abstrakta 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();

Generiska Typer

  • I TypeScript kan du skriva återanvändbar och typ-säker kod med hjälp av generiska typer.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ekosystem

  • TypeScript är fullt kompatibelt med JavaScripts ekosystem och kan använda befintlig JavaScript-kod direkt. Dessutom är det integrerat med populära bibliotek som React och Node.js.

Kraftfulla Utvecklingsverktyg

  • TypeScript erbjuder avancerade funktioner som autofullständig, refaktoreringsstöd och felkontroll i editorer som VSCode.

TypeScript är särskilt användbart för att förbättra tillförlitligheten och öka utvecklarens produktivitet i stora projekt.

Variabler i TypeScript

Detta förklarar de grundläggande koncepten och användningen av variabler i TypeScript.

Variabeldeklaration

I TypeScript deklareras variabler med tre nyckelord: let, const och var. Varje nyckelord har olika egenskaper.

Exempel på let:

let har blockscope (gäller endast inom klamrar {}). Värden kan tilldelas om senare.

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

Exempel på const:

const kan inte tilldelas om, så värdet som är tilldelat en gång kan inte ändras. Dock kan innehållet i objekt och arrayer modifieras.

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"]

Exempel på var:

var har funktionsomfattning och kan omtilldelas. Dock, genom att ignorera blockomfattning, kan det orsaka oväntade beteenden jämfört 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!"

Typannoteringar

I TypeScript kan du uttryckligen annotera typer för variabler. Typinferens stöds också, men typannoteringar är användbara i komplexa scenarion.

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

Oinitierade Variabler

Om en variabel deklareras utan initiering tilldelas undefined som standard. En variabel som deklareras med let måste uttryckligen tilldelas undefined eller inkludera undefined i sin typ om den inte initieras.

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

Variabelns Räckvidd

let och const har blockräckvidd, så de är endast giltiga inom samma block.

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

Variabelhoisting

Eftersom TypeScript är ett övermängd av JavaScript ärver det JavaScripts hoisting-funktion. Hoisting avser beteendet där variabel- och funktionsdeklarationer behandlas som om de flyttas till toppen av deras omfång. Dock flyttas endast deklarationen upp, medan initieringen förblir på sin plats. Variabler som deklareras med var hoistas, men att använda let eller const före deklarationen resulterar i ett fel.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • I detta fall hoistas variabler deklarerade med var och deras värden skrivs ut.
1console.log(b); // ReferenceError
2let b = 20;
  • Variabler deklarerade med let hoistas inte, vilket resulterar i ett fel.

Sammanfattning

Följande är en sammanfattning av let, const och var.

  • let kan omtilldelas och har blockscope.
  • const kan inte omtilldelas och har blockscope.
  • var kan omtilldelas och har funktionsscope.
  • Alla tillåter explicit typannotering för att specificera variabeltyper.

Escape-tecken i TypeScript

Escape-tecken används när vissa tecken inte kan anges direkt eller för att representera tecken som har en särskild betydelse inom en sträng. I TypeScript används escape-tecken för att representera kontrolltecken eller speciella tecken.

Till exempel, använd \n för att skriva ut ett meddelande som inkluderar en ny rad.

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

Escape av speciella tecken

Escape-tecken är också användbara när man inkluderar speciella tecken i en sträng. Till exempel kanske du vill använda dubbla eller enkla citattecken direkt i en sträng.

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 av backslash-tecknet självt

För att inkludera en backslash i en sträng måste du skriva den som en dubbel backslash.

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

Unicode- och hexadecimala escape-tecken

I TypeScript kan Unicode-kodpunkter representeras med hjälp av escape-sekvenser.

Unicode-escape-sekvens

Du kan representera Unicode-tecken genom att ange ett fyrsiffrigt hexadecimalt nummer efter \u.

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

Hexadecimalt escape

Du kan representera specifika tecken genom att använda ett tvåsiffrigt hexadecimalt nummer efter \x.

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

Template-literals och escape-tecken

Mallsträngar definieras genom att omge dem med backticks och erbjuder ett enkelt sätt att skapa inbäddade uttryck eller flerradiga strängar. Vanliga escape-tecken kan användas direkt 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ärskilda fall

I TypeScript kan användning av ogiltiga escape-sekvenser i en sträng resultera i ett syntaxfel. Därför är det viktigt att kontrollera om escape-tecknen är giltiga.

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

Praktiska användnings exempel

Här är ett exempel på hur man konstruerar en komplex sträng med hjälp av escape-tecken.

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 detta exempel används \n för en ny rad och \t för att lägga till indrag. Detta gör JSON-strukturen lättare att läsa.

Sammanfattning

Escape-tecken är mycket viktiga när man arbetar med strängar i TypeScript. När du vill inkludera specialtecken eller kontrolltecken i en sträng kan du skapa uttrycksfulla strängar genom att använda lämpliga escape-sekvenser. Att förstå och använda escape-tecken på rätt sätt kan förbättra kodens läsbarhet och underhållbarhet.

Versioner av TypeScript

Låt oss få en översikt över TypeScript-versionerna här.

  1. TypeScript 1.0 (2014)

    Den första stabila versionen av TypeScript. Grundläggande funktioner som typning, klasser och moduler introducerades.

  2. TypeScript 2.0 (2016)

    Icke-nullbara typer, Kontrollflödesanalys, Skrivskyddade egenskaper och Never-typ introducerades, vilket förbättrade typinferensen.

  3. TypeScript 3.0 (2018)

    Ett mer flexibelt typsystem introducerades, med funktioner som Projektreferenser, Tuplertyper-utvidgningar och förbättringar av Restparameterar.

  4. TypeScript 4.0 (2020)

    Funktioner som Variadiska tuplertyper, förbättringar i redigeraren, förbättrad typinferens och Etiketterade tupelelement lades till för att förbättra utvecklingsupplevelsen.

  5. TypeScript 4.1 (2020)

    Mallliteraltyper introducerades, vilket gjorde manipulering av strängtyper mer kraftfullt.

  6. TypeScript 4.3 (2021)

    Tillägget av nyckelordet Override, förbättringar av åtkomstmodifierare i konstruktörer och förbättrat typsstöd för WeakMap och WeakSet.

  7. TypeScript 4.5 (2021)

    Typen Awaited, ModuleSuffixes och förbättrad kompatibilitet med ECMAScript-moduler lades till.

  8. TypeScript 5.0 (2023)

    Standardisering av Decorators, förbättrad projektsammanställningshastighet, förstärkning av typsystemet och stöd för de senaste ECMAScript-funktionerna har genomförts.

TypeScript utvecklas ständigt, med flera versioner som släpps varje år och introducerar nya funktioner och förbättringar.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Datatyper i TypeScript