Articles
Wprowadzenie do TypeScript
Podstawy TypeScript

Podstawy TypeScript

Ten artykuł wyjaśnia podstawy TypeScript.

YouTube Video

Wykonywanie programu "Hello World!"

Najpierw uruchomimy klasyczny przykład "Hello World!" w TypeScript przy użyciu Visual Studio Code.

npm install -g typescript

Zainstaluj typescript za pomocą polecenia npm.

Utwórz plik tsconfig.json.

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

Utwórz plik .vscode/launch.json, aby umożliwić uruchamianie pliku main.ts w 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}

Utwórz plik main.ts, który wyświetla "Hello World!". Możesz go uruchomić w Visual Studio Code, naciskając klawisz F5.

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

Konfigurując w ten sposób, możesz uruchamiać pliki TypeScript w VSCode.

Przegląd TypeScript

TypeScript (TS) to nadzbiór JavaScript opracowany przez firmę Microsoft. TypeScript obsługuje statyczne typowanie, co umożliwia tworzenie bardziej solidnego i łatwiejszego w utrzymaniu kodu.

Statyczne Typowanie

  • TypeScript dodaje typy do JavaScript i wykonuje sprawdzanie typów podczas kompilacji. Umożliwia to wcześniejsze zapobieganie błędom związanym z typami.
1let message: string = "Hello, TypeScript";
2console.log(message);

Kompilacja

  • Ponieważ TypeScript nie może być bezpośrednio wykonywany w przeglądarce, musi zostać przekształcony (skompiowany) do JavaScript. Użyj tsc (TypeScript Compiler) do konwersji plików TS na pliki JS.

Opcjonalne Adnotacje Typów

  • TypeScript również wykonuje inferencję typów, ale pozwala na jawne określenie typów, gdy jest to konieczne. Poprawia to czytelność i niezawodność kodu.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfejsy

  • TypeScript udostępnia interface do definiowania kształtu obiektów. Pozwala to na ścisłe zarządzanie strukturą obiektów.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Klasy

  • TypeScript rozszerza składnię klas JavaScript i obsługuje dziedziczenie, modyfikatory dostępu (public, private, protected) oraz klasy abstrakcyjne.
 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();

Generics

  • W TypeScript możesz pisać wielokrotnego użytku i bezpieczny typowo kod z użyciem generics.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ekosystem

  • TypeScript jest w pełni kompatybilny z ekosystemem JavaScript i może używać istniejącego kodu JavaScript w niezmienionej postaci. Ponadto jest zintegrowany z popularnymi bibliotekami, takimi jak React i Node.js.

Potężne narzędzia dla deweloperów

  • TypeScript oferuje zaawansowane funkcje, takie jak autouzupełnianie, wsparcie refaktoryzacji i sprawdzanie błędów w edytorach takich jak VSCode.

TypeScript jest szczególnie przydatny w zwiększaniu niezawodności i poprawie produktywności programistów w dużych projektach.

Zmienne w TypeScript

To wyjaśnia podstawowe pojęcia i zastosowanie zmiennych w TypeScript.

Deklaracja zmiennych

W TypeScript zmienne deklaruje się z użyciem trzech słów kluczowych: let, const i var. Każde słowo kluczowe ma inne właściwości.

Przykład użycia let:

let ma zakres blokowy (ważny tylko w obrębie klamr {}). Wartości mogą być ponownie przypisane później.

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

Przykład użycia const:

const nie może być ponownie przypisane, więc raz przypisana wartość nie może zostać zmieniona. Jednak zawartość obiektów i tablic może być modyfikowana.

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

Przykład użycia var:

var ma zakres funkcji i może być ponownie przypisana. Jednak ignorując zakres blokowy, może powodować nieoczekiwane zachowanie w porównaniu do let lub 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!"

Adnotacje typów

W TypeScript można jawnie określać typy dla zmiennych. TypeScript obsługuje także wnioskowanie typów, ale anotacje typów są przydatne w skomplikowanych scenariuszach.

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

Niezainicjowane zmienne

Jeśli zmienna jest zadeklarowana bez inicjalizacji, domyślnie przypisywana jest wartość undefined. Zmiennej zadeklarowanej za pomocą let należy jawnie przypisać wartość undefined albo uwzględnić undefined w jej typie, jeśli nie została zainicjowana.

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

Zakres zmiennych

let i const mają zakres blokowy, co oznacza, że są one ważne tylko w obrębie tego samego bloku.

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

Podnoszenie Zmiennych (Hoisting)

Ponieważ TypeScript jest nadzbiorem JavaScript, dziedziczy cechę podnoszenia (hoisting) z JavaScript. Podnoszenie (hoisting) odnosi się do zachowania, w którym deklaracje zmiennych i funkcji są traktowane, jakby były przeniesione na początek ich zakresu. Jednak podnoszona jest tylko deklaracja, podczas gdy inicjalizacja pozostaje na swoim miejscu. Zmiennie zadeklarowane za pomocą var są podnoszone, ale użycie let lub const przed deklaracją powoduje błąd.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • W tym przypadku zmienne zadeklarowane za pomocą var są podnoszone, a ich wartości są wyświetlane.
1console.log(b); // ReferenceError
2let b = 20;
  • Zmiennie zadeklarowane za pomocą let nie są podnoszone, co skutkuje błędem.

Podsumowanie

Poniżej znajduje się podsumowanie let, const i var.

  • let można ponownie przypisać i ma zakres blokowy.
  • const nie można ponownie przypisać i ma zakres blokowy.
  • var można ponownie przypisać i ma zakres funkcyjny.
  • Wszystkie pozwalają na jawne oznaczanie typów w celu określenia typów zmiennych.

Znaki ucieczki w TypeScript

Znaki ucieczki są używane, gdy określonych znaków nie można wprowadzić bezpośrednio lub aby reprezentować znaki mające specjalne znaczenie w ciągu znaków. W TypeScript znaki ucieczki służą do reprezentowania znaków sterujących lub znaków specjalnych.

Na przykład użyj \n, aby wyświetlić komunikat zawierający nową linię.

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

Używanie znaków ucieczki dla znaków specjalnych

Znaki ucieczki są również przydatne przy wstawianiu znaków specjalnych w ciągu znaków. Na przykład możesz chcieć użyć podwójnych lub pojedynczych cudzysłowów bezpośrednio w ciągu znaków.

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

Używanie znaku ucieczki dla samego ukośnika

Aby wstawić ukośnik w ciąg znaków, musisz zapisać go jako podwójny ukośnik.

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

Znaki ucieczki Unicode i szesnastkowe

W TypeScript punkty kodowe Unicode mogą być reprezentowane za pomocą sekwencji ucieczki.

Sekwencja ucieczki Unicode

Znaki Unicode można reprezentować, podając czterocyfrową liczbę szesnastkową po \u.

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

Szesnastkowa sekwencja ucieczki

Można reprezentować określone znaki, używając dwucyfrowej liczby szesnastkowej po \x.

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

Literały szablonowe i znaki ucieczki

Dosłowne szablony są definiowane przez objęcie ich w odwrotnych apostrofach i umożliwiają łatwe tworzenie wbudowanych wyrażeń lub wieloliniowych ciągów znaków. Typowe znaki ucieczki mogą być używane bezpośrednio w literałach szablonowych.

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

Przypadki szczególne

W TypeScript użycie nieprawidłowych sekwencji ucieczki w ciągu znaków może skutkować błędem składni. Dlatego ważne jest, aby sprawdzić, czy znaki ucieczki są poprawne.

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

Praktyczne przykłady użycia

Oto przykład tworzenia złożonego ciągu znaków przy użyciu znaków ucieczki.

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// }

W tym przykładzie \n jest używane do rozpoczęcia nowej linii, a \t do dodania wcięcia. Dzięki temu struktura JSON jest łatwiejsza do odczytania.

Podsumowanie

Znaki ucieczki są bardzo ważne podczas pracy z ciągami znaków w TypeScript. Kiedy chcesz umieścić znaki specjalne lub sterujące w ciągu tekstowym, możesz tworzyć wyraziste ciągi za pomocą odpowiednich sekwencji ucieczki. Zrozumienie i poprawne użycie znaków ucieczki może poprawić czytelność i łatwość utrzymania kodu.

Wersje TypeScript

Przyjrzyjmy się przeglądowi wersji TypeScript.

  1. TypeScript 1.0 (2014)

    Pierwsza stabilna wersja TypeScript. Wprowadzono podstawowe funkcje, takie jak typowanie, klasy i moduły.

  2. TypeScript 2.0 (2016)

    Wprowadzono Typy nie-nullowalne, Analiza przepływu sterowania, Właściwości tylko do odczytu oraz typ Never, co ulepszyło wnioskowanie typów.

  3. TypeScript 3.0 (2018)

    Wprowadzono bardziej elastyczny system typów z funkcjami takimi jak Odwołania do projektów, rozszerzenia dla Typów krotek oraz ulepszenia Parametrów reszty.

  4. TypeScript 4.0 (2020)

    Dodano funkcje jak Typy krotek wariadycznych, ulepszenia edytora, usprawnione wnioskowanie typów oraz Etykietowane elementy krotek, by poprawić doświadczenia w programowaniu.

  5. TypeScript 4.1 (2020)

    Wprowadzono Szablony typów literałów, co zwiększyło możliwości manipulacji typami stringów.

  6. TypeScript 4.3 (2021)

    Dodanie słowa kluczowego Override, ulepszenia w modyfikatorach dostępu w konstruktorach oraz ulepszone wsparcie dla typów WeakMap i WeakSet.

  7. TypeScript 4.5 (2021)

    Dodano typ Awaited, ModuleSuffixes oraz ulepszoną kompatybilność z modułami ECMAScript.

  8. TypeScript 5.0 (2023)

    Wprowadzono standaryzację Dekoratorów, poprawę szybkości budowania projektów, ulepszony system typów oraz wsparcie dla najnowszych funkcji ECMAScript.

TypeScript nieustannie się rozwija, a każdego roku wydawane są liczne wersje wprowadzające nowe funkcje i ulepszenia.

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

YouTube Video

Typy danych w TypeScript