Перейти к содержимому
Теория · Первые шаги · урок 3 из 7

Как запустить TypeScript

Браузер и Node.js выполняют JavaScript, а не TypeScript. Поэтому у файла на TypeScript три дороги к запуску, и в картинке с таможней каждая проходит границу по-своему:

  • пункт досмотра прямо в браузере — Playground;
  • полная таможня: компилятор tsc проверяет файл и пишет JavaScript, а Node.js его выполняет;
  • дорога без досмотра: node срывает декларации и пропускает посылки, не читая их.

Пройдём все три с одним и тем же файлом hello.ts. Расширение .ts говорит, что внутри код на TypeScript:

TypeScript
function greet(who: string): string {
    return `Hello, ${who}`;
}

console.log(greet("Anna")); // Hello, Anna
  1. who: string — параметр who принимает только строки.
  2. : string после скобок — функция возвращает строку.
  3. Всё остальное — обычный JavaScript: шаблонная строка и console.log.

Три способа запустить код

Playground

TypeScript Playground — страница на сайте TypeScript, где код проверяют и запускают прямо в браузере. Устанавливать ничего не нужно, а ссылка есть в блоке «Подготовка компьютера» на странице курса.

  1. Вставьте код в редактор.
  2. Ошибки подчёркиваются сразу, во время набора.
  3. На панели рядом с редактором виден JavaScript, который получится из кода.
  4. Кнопка Run над редактором запускает программу, а то, что напечатал console.log, появляется на той же панели, на вкладке Logs.

Playground удобен для коротких опытов: в нём можно проверить примеры из уроков.

tsc, затем node

Это полная таможня. Сначала компилятор проверяет файл и пишет JavaScript, потом Node.js выполняет то, что получилось. В терминале это две команды:

TEXT
$ tsc hello.ts
$ node hello.js
Hello, Anna
  1. tsc hello.ts проверяет типы. Если ошибок нет, он ничего не печатает, а рядом с hello.ts появляется файл hello.js — тот же код на обычном JavaScript.
  2. node hello.js выполняет этот файл, как любую программу на JavaScript.

Знак $ отмечает начало команды, набирать его не нужно. Превращение кода TypeScript в JavaScript называется компиляцией.

Версию компилятора покажет команда tsc -v: она напечатает, например, Version 7.0.2. Если TypeScript установлен не на весь компьютер, а в папку проекта, перед командой добавьте npx: npx tsc hello.ts.

node hello.ts

Node.js 22.18 и новее умеет запускать файл .ts сам:

TEXT
$ node hello.ts
Hello, Anna

Это дорога без досмотра. node вырезает из файла аннотации типов и выполняет то, что осталось. Типы он не проверяет ни в одной строке, а файла hello.js после него не остаётся.

Несколько возможностей TypeScript вырезать нельзя: их нужно переписать в другой код. Файл с такой возможностью node запускать откажется — для него нужен tsc или Playground. Курс предупредит, когда такая возможность встретится.

Редактор проверяет на лету

Код на TypeScript удобно писать в редакторе, который понимает этот язык, например в VS Code. Он проверяет файл во время набора: подчёркивает ошибку красной волнистой линией, а при наведении мыши на имя показывает его тип. Это тот же таможенник, только он стоит рядом, пока вы упаковываете посылку.

Строгий режим

У tsc есть строгий режим — набор дополнительных проверок, которые ловят больше ошибок. Например, в строгом режиме нельзя оставить параметр функции без типа, если TypeScript не может сам понять, какой он. С TypeScript 6.0 строгий режим включён по умолчанию. Курс рассчитан на TypeScript 7, и все примеры в нём проверены в строгом режиме.

Частая ошибка

Запустить файл через node hello.ts и решить, что типы проверены:

TypeScript
function greet(who: string): string {
    return `Hello, ${who}`;
}

console.log(greet(42)); // ✗

node hello.ts выполнит такой файл без единого замечания и напечатает Hello, 42. Ошибку найдёт только tsc:

TEXT
error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

Число 42 передано туда, где ждут строку. Чтобы проверить типы, запустите tsc hello.ts или откройте файл в редакторе: node только вырезает аннотации.

Главное

  • Браузер и Node.js выполняют JavaScript, поэтому код на TypeScript перед запуском компилируют или вырезают из него типы.
  • Playground проверяет и запускает код прямо в браузере.
  • tsc hello.ts проверяет типы и пишет hello.js, а node hello.js выполняет его.
  • node hello.ts вырезает аннотации и запускает код, но типы не проверяет.