TypeScript to super zbiór języka JavaScript, co oznacza, że każdy poprawny kod JavaScript jest również poprawnym kodem TypeScript. Jednak TypeScript wprowadza szereg dodatkowych funkcji, które mają na celu poprawę czytelności, utrzymywalności i skalowalności kodu, zwłaszcza w dużych projektach.
Podstawowe zasady składni
Typowanie statyczne: Najbardziej charakterystyczną cechą TypeScript jest wprowadzenie typowania statycznego. Oznacza to, że typ każdej zmiennej, funkcji czy parametru musi być określony podczas deklaracji. Dzięki temu kompilator może wykryć wiele błędów już na etapie pisania kodu.
let message: string = 'Hello, world!';
let count: number = 10;
Interfejsy: Interfejsy służą do definiowania struktur danych. Opisują, jakie właściwości i metody powinien mieć obiekt.
TypeScript
interface Person {
firstName: string;
lastName: string;
}
Klasy: TypeScript wprowadza klasy, które są bardziej strukturalnym sposobem definiowania obiektów niż prototypowe dziedziczenie w JavaScript.
TypeScript
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number)
{
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
Moduły: Moduły pozwalają na organizację kodu w oddzielne pliki, co ułatwia zarządzanie dużymi projektami.
TypeScript
// greeter.ts
export function greet(person: string) {
return "Hello, " + person + "!";
}
// index.ts
import {greet} from './greeter';
console.log(greet('world'));
Podstawowe polecenia
Podstawowe polecenia w TypeScript są takie same jak w JavaScript, ponieważ TypeScript jest jego nadzbiorem. Obejmują one:
Deklaracje zmiennych: let, const
Operatory arytmetyczne: +, -, *, /, %
Operatory porównania: ==, !=, ===, !==, <, >, <=, >=
Struktury kontrolne: if, else, for, while, switch
Funkcje: function
Różnice między JavaScript a TypeScript
Typowanie: Jak już wspomniano, TypeScript wprowadza typowanie statyczne, podczas gdy JavaScript jest językiem typowanym dynamicznie.
Interfejsy i klasy: TypeScript oferuje bardziej zaawansowane mechanizmy obiektowe, takie jak interfejsy i klasy.
Moduły: TypeScript ma wbudowane wsparcie dla modułów, co ułatwia organizację kodu.
Dekoratory: Dekoratory pozwalają na dodawanie adnotacji do klas, metod, właściwości i parametrów.
Generyki: Generyki pozwalają na tworzenie bardziej elastycznych i bezpiecznych typów danych.
Namespaces: Namespaces pomagają w organizacji kodu, zwłaszcza w dużych projektach.
Jak zacząć?
Upewnij się że masz zainstalowane środowisko node.js więcej tu
Korzystając z środowiska Visual Studio Code:
1. Tworzymy folder i w visual studio code uruchamiamy ten folder.
2. Uruchamiamy terminal i wpisujemy polecenie
npm init –y
3. W widoku projektu tworzymy index.html (wciskamy ! i pojawia się drzewo html)
4. Tworzymy folder src w którym umieszczamy pliki typescript
5. Tworzymy plik Typescript np. app.ts
5.1 W pliku app.ts umieszczamy kod JavaScript.
6. Następnie nasz plik app.ts trzeba skompilować do pliku .js, ponieważ nie można go bezpośrednio podpiąć do html. W tym celu
6.1 W tym celu na naszej maszynie musimy zainstalować TypeScript wpisując w konsoli polecenie
npm i -g typescript
6.2 W głównym projekcje tworzymy plik tsconfig.json. W tym pliku tworzy kompilacje:
{
compilerOptions” : {
„rootDir”: „./src,
„outDir”: „./dist,
„target”: „ES2015”
}
}
Następnie w terminalu wpisujemy polecenie tsc
( W razie błędów, edytujemy package.json w sekcji script usuwamy „test…”a w jego miejsce wpisujemy
"scripts": {
"compile": "tsc"
}, i w konsoli uruchamiamy -> npm run compile
*Pamiętaj o zapisywaniu wszystkich plików
7. Jeśli wszystko poprawnie wykonaliśmy, to w folderze dist uzyskujemy plik app.js i to ten plik podpinamy do html
8. Uruchamiamy plik index.html i wpisujemy przed zamknięciem tagu body
9. <script src=”dist/app.js”></script>
Uruchamiamy nasz plik html PKM wybierając opcję open with live server
10. Aby po każdej zmianie nie trzeba było kompilować programu ponownie dopisujemy w naszym pliku package.json zapis przy compile - - watch ("compile": "tsc - - watch")
npm run compile