Эта статья предоставит вам более чем достаточно информации для того, чтобы приступить к созданию вашего первого проекта. Предполагая, что у вас есть опыт работы с javascript, переход будет плавным.

Что такое TypeScript?

TypeScript — это строго типизированный язык программирования, основанный на Javascript, также называемый «надмножеством». Код Javascript является допустимым кодом TypeScript, но не наоборот. Теперь вы можете спросить: «Зачем мне использовать TypeScript, если мой код JavaScript будет работать так же?» Ну, TypeScript представляет дополнительный синтаксис, который обеспечивает более сильную интеграцию с вашим редактором, облегчая обнаружение этих надоедливых ошибок! Мы все испытали разочарование из-за ошибок времени выполнения при написании кода на JavaScript, но после перехода на TypeScript вы заметите, что таких ошибок очень мало.

Не доверяете мне? Давайте посмотрим на пример

Эта функция JavaScript будет работать гладко, независимо от того, передадите ли вы ей строку или число. Однако давайте предположим, что мы ищем вычисление двух чисел, и где-то в строке в один из параметров передается строка вместо числа. Это приведет к возврату нежелательных значений.

Вместо этого, если бы мы использовали TypeScript:

Эта функция теперь строго типизирована и гарантирует передачу и возврат чисел. Во время остальной части разработки TypeScript будет показывать ошибки (до запуска), если функция имеет любой тип, отличный от числа, переданного в функцию.

TypeScript 101

Давайте углубимся в переход с JavaScript на TypeScript.

Первое, чему нам нужно научиться, это как правильно вводить переменные и объявлять функции.

Основные типы

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

Написание функции

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

Хотя в этой статье просто подведены итоги использования TypeScript для объявления переменных и функций, во второй части я углублюсь в разработку с помощью TypeScript.