Kodokon kodokon.com

Зачем нужен TypeScript и твой первый типизированный файл

Узнай, что такое TypeScript, какую задачу он решает, и напиши свой самый первый типизированный файл.

6 мин · 3 вопросов

Открыть этот урок в Kodokon

Ты уже знаешь JavaScript - язык, который делает веб-страницы интерактивными. TypeScript - это расширение JavaScript: любой корректный код на JavaScript одновременно является кодом на TypeScript. Его главное дополнение - типы. Тип описывает природу значения: текст, число, истина или ложь... Указывая типы своих переменных, ты позволяешь компьютеру проверять твой код до запуска.

Зачем это нужно? В JavaScript ничто не мешает тебе передать текст туда, где ожидалось число. Программа всё равно выполнится... и выдаст абсурдный результат, который часто обнаруживается гораздо позже. Посмотри на этот пример: функция ожидает цену в виде числа, но получает текст.

JAVASCRIPT
function addTax(price) {
  return price + price * 0.2;
}

const total = addTax("100");
console.log(total); // "10020" instead of 120!
В JavaScript такая ошибка проходит совершенно незамеченной.

В TypeScript ты добавляешь аннотацию типа: двоеточие, за которым идёт тип, сразу после имени параметра или переменной. Затем код на TypeScript компилируется, то есть переводится в обычный JavaScript инструментом, который называют компилятором (tsc). Именно на этом шаге ошибки типов обнаруживаются и показываются тебе.

TYPESCRIPT
function addTax(price: number): number {
  return price + price * 0.2;
}

const total = addTax(100);
console.log(total); // 120
Здесь запись addTax("100") была бы отклонена ещё до выполнения.

Теперь напишем твой первый типизированный файл. Файл на TypeScript использует расширение .ts вместо .js. Внутри ты пишешь обычный JavaScript, обогащённый аннотациями типов.

TYPESCRIPT
let firstName: string = "Sarah";
let age: number = 28;

console.log(firstName + " is " + age + " years old.");
Твой первый файл: hello.ts

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

  1. Чем является TypeScript по отношению к JavaScript?
    • Совершенно другим языком, никак не связанным с JavaScript
    • Расширением JavaScript, которое добавляет типы
    • Инструментом, который ускоряет работу JavaScript
    • Веб-браузером
  2. Что происходит, когда ты компилируешь файл .ts?
    • Он превращается в обычный файл JavaScript
    • Он выполняется браузером напрямую
    • Он преобразуется в HTML-страницу
  3. Что означает аннотация в let age: number?
    • Переменная age всегда равна нулю
    • Переменная age может хранить только числа
    • Переменная age - это текст
    • Переменная age необязательна