Datatyper i TypeScript

Articles

Den här artikeln förklarar datatyper i TypeScript.

YouTube Video

Datatyper i TypeScript

TypeScript erbjuder en mängd olika datatyper. Detta gör att du kan definiera strikta typer för variabler, funktionsargument och returvärden. Nedan följer de huvudsakliga datatyperna och deras användning.

Primitiva typer

number-typ

1let age: number = 25;
2console.log(age);          // Outputs: 25
3console.log(typeof age);    // Outputs: number

number är en typ som används för att hantera numeriska värden, inklusive heltal och flyttal (decimaler). Hantering av värden som överskrider vissa gränser resulterar i Infinity eller NaN (Not-a-Number).

1// Decimal calculations
2console.log(0.1 + 0.2 === 0.3); // false
3console.log(0.1 + 0.2); // 0.30000000000000004
4
5// Calculations with large numbers
6console.log(9007199254740991 + 1); // correct value
7console.log(9007199254740991 + 2); // incorrect value

I TypeScript representeras tal som flyttal. Detta kan resultera i små felaktigheter i beräkningsresultaten.
När exakta beräkningar krävs, som vid finansiella belopp, är det nödvändigt att undvika sådana avrundningsfel. Du kan till exempel använda BigInt eller toFixed(), eller justera decimalplatser med hjälp av bibliotek som decimal.js.

string-typ

string-typen hanterar textdata.

1let greeting: string = "Hello, TypeScript!";
2console.log(greeting);     // Outputs: Hello, TypeScript!
3console.log(typeof greeting);  // Outputs: string

boolean (Logisk Typ)

boolean-typen har två värden: true eller false.

1let isOpen: boolean = true;
2console.log(isOpen);       // Outputs: true
3console.log(typeof isOpen);    // Outputs: boolean

null och undefined

null representerar ett 'icke-existerande värde', och undefined representerar ett 'odefinierat värde'.

1let emptyValue: null = null;
2let notDefined: undefined = undefined;
3
4console.log(emptyValue);       // Outputs: null
5console.log(typeof emptyValue);    // Outputs: object (JavaScript specification)
6
7console.log(notDefined);       // Outputs: undefined
8console.log(typeof notDefined);    // Outputs: undefined

Array

I TypeScript kan du specificera typen av element i en array. number[] är en array av tal och string[] är en array av strängar.

1let numbers: number[] = [1, 2, 3, 4];
2console.log(numbers);        // Outputs: [1, 2, 3, 4]
3console.log(typeof numbers); // Outputs: object
4
5let words: string[] = ["TypeScript", "JavaScript"];
6console.log(words);          // Outputs: ["TypeScript", "JavaScript"]
7console.log(typeof words);   // Outputs: object

Tuple

En tuple är en array med element av olika typer.

1let person: [string, number] = ["Alice", 30];
2console.log(person);         // Outputs: ["Alice", 30]
3console.log(typeof person);  // Outputs: object

Enum

enum definierar en uppsättning namngivna konstanter.

1enum Color {
2    Red,
3    Green,
4    Blue
5}
6
7let favoriteColor: Color = Color.Green;
8console.log(favoriteColor);  // Outputs: 1 (Defaults start from 0)
9console.log(typeof favoriteColor); // Outputs: number

any

any-typen kan innehålla vilken typ av värde som helst och används när du vill inaktivera typkontroll.

1let anything: any = "Hello";
2console.log(anything);       // Outputs: Hello
3console.log(typeof anything);    // Outputs: string
4
5anything = 42;
6console.log(anything);       // Outputs: 42
7console.log(typeof anything);    // Outputs: number

Unionstyp

Med unionstyper kan du definiera variabler som kan innehålla en av flera typer.

1let identifier: number | string = "ID_12345";
2console.log(identifier);     // Outputs: ID_12345
3console.log(typeof identifier);  // Outputs: string
4
5identifier = 12345;
6console.log(identifier);     // Outputs: 12345
7console.log(typeof identifier);  // Outputs: number

Sammanfattning

number, string, boolean: Primitiva typer.
null, undefined: Specialvärden.
Array: En matris med typannoteringar.
Tuple: En array med element av olika typer.
enum: En uppräknad typ.
any: Vilken typ som helst.
Union: En variabel som kan anta en av flera typer.

Genom att använda dessa datatyper förbättrar TypeScript typsäkerheten, vilket gör det enklare att förhindra fel under utvecklingen.

Omslagsobjekt

Wrapper-objekt i TypeScript är objekt som automatiskt skapas för att behandla primitiva datatyper som objekt. Primitiva typer möjliggör lätta och snabba operationer, medan objekttyper har metoder och egenskaper som möjliggör rikare operationer.

I JavaScript (och TypeScript) finns det wrapper-objekt som motsvarar primitiva typer som string, number och boolean. De skapas med konstruktionsfunktioner som kallas String, Number och Boolean.

Nedan finns exempel på wrapper-objekt.

String-objekt

String-objektet tillhandahåller egenskaper och metoder för strängar.

1let strPrimitive: string = "Hello, World!";
2let strObject: String = new String("Hello, World!");
3
4console.log(strPrimitive);         // Outputs: Hello, World!
5console.log(typeof strPrimitive);  // Outputs: string
6
7console.log(strObject);            // Outputs: [String: 'Hello, World!']
8console.log(typeof strObject);     // Outputs: object

Funktioner:

Till skillnad från den primitiva typen string behandlas ett String-objekt som ett object av typeof.
Wrapper-objekt är användbara när man manipulerar strängar eller anropar metoder på dem.

Number-objekt

Number-objektet tillhandahåller egenskaper och metoder för siffror.

1let numPrimitive: number = 42;
2let numObject: Number = new Number(42);
3
4console.log(numPrimitive);         // Outputs: 42
5console.log(typeof numPrimitive);  // Outputs: number
6
7console.log(numObject);            // Outputs: [Number: 42]
8console.log(typeof numObject);     // Outputs: object

Funktioner:

Number-objektet, som ett wrapper-objekt för siffror, inkluderar metoder för numeriska operationer (t.ex. toFixed).

Boolean-objekt

Boolean-objektet tillhandahåller egenskaper och metoder för boolean-värden.

1let boolPrimitive: boolean = true;
2let boolObject: Boolean = new Boolean(true);
3
4console.log(boolPrimitive);        // Outputs: true
5console.log(typeof boolPrimitive); // Outputs: boolean
6
7console.log(boolObject);           // Outputs: [Boolean: true]
8console.log(typeof boolObject);    // Outputs: object

Funktioner:

Boolean-objektet är ett wrapper-objekt för den primitiva typen boolean och behandlas som ett object.

Skillnader mellan wrapper-objekt och primitiva typer

Eftersom wrapper-objekt behandlas som objekt sker en liten prestandaförlust, men mer funktionella operationer är möjliga tack vare tillagda egenskaper och metoder. Dessutom finns det skillnader i jämförelser med hjälp av == och ===.

1let numPrimitive: number = 123;
2let numObject: Number = new Number(123);
3
4console.log('==  : ', numPrimitive == numObject);  // Outputs: true (Value comparison)
5console.log('=== : ', numPrimitive === numObject); // Outputs: false (Due to differing types)

Funktioner:

== jämför värden, medan === strikt jämför inklusive typer. === returnerar false när man jämför omslagobjekt med primitiva typer.

Typkonvertering

I TypeScript är det viktigt att korrekt hantera implicita och explicita typkonverteringar.

Implicit Typkonvertering

I TypeScript bör implicita typkonverteringar undvikas så mycket som möjligt för att säkerställa typernas integritet.

1const result: string = 5 + "5"; // "55" (the number is converted to a string)
2
3console.log(result);

I detta exempel omvandlas talet 5 implicit till en sträng, vilket resulterar i strängen "55".

Explicit Typkonvertering

I TypeScript bör du använda typannoteringar eller funktioner för typkonvertering för att säkert utföra typkonverteringar.

1const num: string = "123";
2const convertedNum: number = Number(num); // Converts "123" to the number 123
3
4console.log(typeof num);
5console.log(typeof convertedNum);

I detta exempel används funktionen Number() för att explicit konvertera strängen "123" till talet 123.

Typkontroll

I TypeScript kan du använda operatorn typeof för att kontrollera datatypen för en variabel.

 1// Output: The type of 42 is: number
 2console.log('The type of 42             is:', typeof 42);
 3
 4// Output: The type of 42 is: bigint
 5console.log('The type of 42n            is:', typeof 42n);
 6
 7// Output: The type of "hello" is: string
 8console.log('The type of "hello"        is:', typeof "hello");
 9
10// Output: The type of true is: boolean
11console.log('The type of true           is:', typeof true);
12
13// Output: The type of undefined is: undefined
14console.log('The type of undefined      is:', typeof undefined);
15
16// Output: The type of null is: object
17console.log('The type of null           is:', typeof null);
18
19// Output: The type of Symbol() is: symbol
20console.log('The type of Symbol()       is:', typeof Symbol());
21
22// Output: The type of {} is: object
23console.log('The type of {}             is:', typeof {});
24
25// Output: The type of function () {} is: function
26console.log('The type of function () {} is:', typeof function () {});

I TypeScript kan du använda typeof för att kontrollera typer, men för noggrannare typkontroll rekommenderas det också att använda operatorerna instanceof eller is.

Sammanfattning

Omslagsobjekt behandlas som objekt eftersom de erbjuder ytterligare metoder och egenskaper för primitiva typer.
String, Number och Boolean är representativa exempel på omslagsobjekt.
Till skillnad från primitiva typer identifieras omslagsobjekt som object av typeof.

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

Grunderna i TypeScript Operatorer i TypeScript