W tym artykule znajdziesz więcej niż wystarczającą ilość informacji, abyś mógł rozpocząć tworzenie swojego pierwszego projektu. Zakładając, że masz doświadczenie w JavaScript, przejście będzie płynne.

Co to jest TypeScript?

TypeScript to język programowania o silnym typowaniu, oparty na JavaScript, nazywany także „nadzbiorem”. Kod JavaScript jest prawidłowym kodem TypeScript, ale nie na odwrót. Teraz możesz zapytać: „Dlaczego miałbym używać TypeScriptu, skoro mój kod JavaScript będzie działał tak samo?” Cóż, TypeScript wprowadza dodatkową składnię, która zapewnia silniejszą integrację z edytorem, ułatwiając wyłapanie tych irytujących błędów! Wszyscy doświadczyliśmy frustracji związanej z błędami w czasie wykonywania kodu podczas kodowania w JavaScript, ale po przejściu na TypeScript zauważysz, że tych błędów jest niewiele.

Nie ufasz mi? Spójrzmy na przykład

Ta funkcja JavaScript będzie działać płynnie niezależnie od tego, czy przekażesz do niej ciąg znaków czy liczbę. Załóżmy jednak, że chcemy znaleźć obliczenie dwóch liczb i gdzieś po drodze do jednego z parametrów zamiast liczby przekazywany jest ciąg znaków. Spowoduje to zwrócenie niepożądanych wartości.

Zamiast tego, gdybyśmy użyli TypeScriptu:

Ta funkcja jest teraz silnie wpisana i gwarantuje przekazywanie i zwracanie liczb. W pozostałej części programowania TypeScript będzie wyświetlał błędy (przed uruchomieniem), jeśli funkcja ma inny typ niż liczba przekazana do funkcji.

TypeScript 101

Przyjrzyjmy się bliżej przejściu z JavaScript na TypeScript.

Pierwszą rzeczą, której musimy się nauczyć, jest prawidłowe wpisywanie zmiennych i deklarowanie funkcji.

Podstawowe typy

// defining a variable
let int: number;
int = 3;
int = “sample”; // shows error becuase int is not the correct typing.
// Other Types
let bool: boolean = true; // Boolean
let sampleText: string = “hello there!”;
let testArr: number[] = [1, 2, 3, 4];
// Let’s try pushing a string into testArr
testArr.push(“123”) // Show’s error because the array type is number.
`testArr.push(1) // Now we have added an item to the array.

Pisanie funkcji

/** We must assign a type to the parameters in order to use
* TypeScript efficiently.
*/
const calculate = (a: number, b: number):number /** return type */ => {
return a + b;
};
// Or if we wanted to return a string
const combineSentence = (a: string, b: string): string => {
return a + b;
};
// Do you notice how both functions contain the same code but produce different results?
// Let's try one more
const check = (a: string, b: string): boolean /* Must return true or false */ => {
return a == b ? true : false;
};

Chociaż ten artykuł jedynie podsumowuje podstawy używania TypeScriptu do deklarowania zmiennych i funkcji, w części 2 zagłębię się w to, jak programować za pomocą TypeScriptu.