JavaScript vs TypeScript. Почему Вы должны изучить TypeScript?

Что такое TypeScript?

JavaScript один из самый популярных языков программирования. Одна из причин этого, что он является динамически типизированным. Другим словами, JavaScript – это более свободный язык, но, если вы встретите много кода в вашем проекте, то эта свобода может перерасти в панику.

Давайте взглянем на данный код.

const pikachu = (a, b) => {
  return a + b;
}

Можете ли вы угадать, что вернет этот код?

Я не могу, т.к. pikachu функция может принимать в себя значения любого типа, к примеру, строка, число и т.д.

// Передается число.
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu(2021, 9);
console.log(result); // 2030

// Передается строка.
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu("2021", "9");
console.log(result); // 20219

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

С другой стороны, пожалуйста, посмотрите на данный код.

const pikachu = (a: number, b: number): number => {
  return a + b;
}

Данный код на typescript. TypeScript – это язык с статической типизацией. Когда мы смотрим на это, мы сразу можем понять, что значение, которое возвращает функция pikachu будет числом.

Очень полезно быстро понимать код, потому что при работе вы будете встречаться с большим количеством кода.

Так что, мы должны использовать более легкие в чтении методы, чтобы в дальнейшем, быстрее читать и понимать код, который кто-либо написал в прошлом.

Основы TypeScript

У TypeScript есть несколько примитивный типов данных, такие как string, number, boolean, null, undefined.

Это код с простыми типами данных.

const caterpie01: number = 2021;    // OK
const caterpie02: number = false;   // Не ок

const Metapod01: string = "sleepy"; // OK
const Metapod02: string = true;     // Не ок

const Wartortle01: boolean = true;  // OK
const Wartortle02: boolean = 1111;  // Не ок

При запуске кода мы сразу встречаем несколько ошибок.

typescript.ts:10:7 - error TS2322: Type 'boolean' is not assignable to type 'number'.

10 const caterpie02: number = false;   // Не ок
         ~~~~~~~~~~

typescript.ts:13:7 - error TS2322: Type 'boolean' is not assignable to type 'string'.

13 const Metapod02: string = true;     // Не ок
         ~~~~~~~~~

typescript.ts:16:7 - error TS2322: Type 'number' is not assignable to type 'boolean'.

16 const Wartortle02: boolean = 1111;  // Не ок
         ~~~~~~~~~~~

Дальше, давайте посмотрим на null и undefined.

const Butterfree: null = null;
const ButterfreeNull: string = Butterfree;
console.log(ButterfreeNull) // null

const Kakuna: undefined = undefined;
const KakunaNull: string = Kakuna;
console.log(KakunaNull) //undefined

Этот код работает. Мы можем устанавливать значения null и undefined строкам. В данном случае, я не использовал strict mode. При использовании же, код работает примерно так.

typescript.ts:21:7 - error TS2322: Type 'null' is not assignable to type 'string'.

21 const ButterfreeNull: string = Butterfree;
         ~~~~~~~~~~~~~~

typescript.ts:25:7 - error TS2322: Type 'undefined' is not assignable to type 'string'.

25 const KakunaNull: string = Kakuna;

И это хорошо! Мы сразу можем отлавливать ошибки.

Вы можете установить strict mode в tsconfig.json или использовать аргумент командой строки tsc --strict. Если вы не уверен, в том, как настраивать typescript, вы модете посмотреть примеры на офф. сайте.

Что такое тип данных “any”?

В TypeScript можно использовать тип данных any. Это позволяет работать с любым типом данных без ошибок. Прямо как в обычном javascript.

Давайте взглянем на пример кода.

let pidgey: any = 1991;
console.log(typeof pidgey) // number

pidgey = "bird";
console.log(typeof pidgey) // string

pidgey = false;
console.log(typeof pidgey) // boolean

pidgey = null;
console.log(typeof pidgey) // object

pidgey = undefined;
console.log(typeof pidgey) // undefined

Переменной pidgey можно присвоить любой тип данных!

Это магический тип данных.