Typy danych w TypeScript

Articles

Ten artykuł wyjaśnia typy danych w TypeScript.

YouTube Video

Typy danych w TypeScript

TypeScript oferuje różnorodne typy danych. To pozwala definiować ścisłe typy dla zmiennych, argumentów funkcji i wartości zwracanych. Poniżej znajdują się główne typy danych i ich zastosowania.

Typy Prymitywne

Typ number

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

number to typ używany do obsługi wartości liczbowych, w tym liczb całkowitych i zmiennoprzecinkowych (dziesiętnych). Obsługa wartości przekraczających określone limity skutkuje Infinity lub 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

W TypeScript liczby są reprezentowane jako liczby zmiennoprzecinkowe. Może to skutkować drobnymi niedokładnościami w wynikach obliczeń.
W przypadku konieczności wykonania precyzyjnych obliczeń, takich jak kwoty finansowe, należy unikać tego rodzaju błędów zaokrągleń. Na przykład można użyć BigInt lub toFixed(), albo dostosować miejsca dziesiętne, korzystając z bibliotek takich jak decimal.js.

Typ string

Typ string obsługuje dane tekstowe.

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

Typ boolean (logiczny)

Typ boolean ma dwie wartości: true lub false.

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

null i undefined

null oznacza 'nieistniejącą wartość', a undefined oznacza 'niezdefiniowaną wartość'.

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

W TypeScript można określić typ elementów tablicy. number[] to tablica liczb, a string[] to tablica ciągów znaków.

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

Krotka (Tuple)

Krotka to tablica z elementami różnych typów.

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

Enum

enum definiuje zbiór nazwanych stałych.

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

Typ any może przechowywać dowolny typ wartości i jest używany, gdy chcesz wyłączyć sprawdzanie typów.

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

Typ Union

Korzystając z typów Union, możesz definiować zmienne, które mogą przechowywać jeden z wielu typów.

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

Podsumowanie

number, string, boolean: Typy prymitywne.
null, undefined: Wartości specjalne.
Array: Tablica z adnotacjami typów.
Tuple: Tablica z elementami różnych typów.
enum: Typ wyliczeniowy.
any: Dowolny typ.
Union: Zmienna, która może przyjmować jeden z wielu typów.

Korzystając z tych typów danych, TypeScript zwiększa bezpieczeństwo typów, co ułatwia zapobieganie błędom podczas rozwijania aplikacji.

Obiekty Owijające

Obiekty opakowujące w TypeScript to obiekty automatycznie tworzone w celu traktowania prymitywnych typów danych jako obiekty. Typy prymitywne pozwalają na lekkie i szybkie operacje, podczas gdy typy obiektów mają metody i właściwości, umożliwiając bardziej złożone operacje.

W JavaScript (i TypeScript) istnieją obiekty opakowujące odpowiadające prymitywnym typom, takim jak string, number i boolean. Tworzone są za pomocą konstruktorów o nazwach String, Number i Boolean.

Poniżej znajdują się przykłady obiektów opakowujących.

Obiekt String

Obiekt String umożliwia korzystanie z właściwości i metod dla ciągów znaków.

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

Funkcje:

W przeciwieństwie do prymitywnego typu string, obiekt String jest traktowany jako object przez typeof.
Obiekty opakowujące są przydatne podczas manipulacji ciągami znaków lub wywoływania metod na nich.

Obiekt Number

Obiekt Number umożliwia korzystanie z właściwości i metod dla liczb.

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

Funkcje:

Obiekt Number, jako opakowanie dla liczb, zawiera metody do operacji numerycznych (np. toFixed).

Obiekt Boolean

Obiekt Boolean umożliwia korzystanie z właściwości i metod dla wartości logicznych.

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

Funkcje:

Obiekt Boolean jest opakowaniem dla prymitywnego typu boolean i jest traktowany jako object.

Różnice między obiektami opakowującymi a typami prymitywnymi

Ponieważ obiekty opakowujące są traktowane jako obiekty, występuje niewielkie zmniejszenie wydajności, ale możliwe są bardziej funkcjonalne operacje dzięki dodanym właściwościom i metodom. Co więcej, istnieją różnice w porównaniu za pomocą == i ===.

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)

Funkcje:

== porównuje wartości, podczas gdy === porównuje ściśle, uwzględniając typy. === zwraca false przy porównywaniu obiektów opakowujących z typami prymitywnymi.

Konwersja Typu

W TypeScript ważne jest, aby właściwie zarządzać niejawne oraz jawne konwersje typów.

Niejawna Konwersja Typu

W TypeScript należy unikać niejawnych konwersji typów, aby zapewnić bezpieczeństwo typów.

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

W tym przykładzie liczba 5 zostaje domyślnie przekonwertowana na ciąg znaków, co skutkuje ciągiem "55".

Jawna Konwersja Typu

W TypeScript należy używać adnotacji typu lub funkcji konwersji typów, aby bezpiecznie przeprowadzać konwersje.

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

W tym przykładzie funkcja Number() jest używana do jawnego przekształcenia ciągu znaków "123" w liczbę 123.

Sprawdzanie Typu

W TypeScript można używać operatora typeof, aby sprawdzić typ danych zmiennej.

 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 () {});

W TypeScript możesz używać typeof do sprawdzania typów, ale do bardziej precyzyjnego sprawdzania typów zaleca się również użycie operatorów instanceof lub is.

Podsumowanie

Obiekty opakowujące są traktowane jako obiekty, ponieważ dostarczają dodatkowe metody i właściwości dla typów prymitywnych.
String, Number i Boolean są reprezentatywnymi przykładami obiektów opakowujących.
W przeciwieństwie do typów prymitywnych, obiekty opakowujące są identyfikowane jako object przez typeof.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Podstawy TypeScript Operatory w TypeScript