Что такое TypeScript: введение для начинающих с примерами

Что такое TypeScript? Это JavaScript со статическими типами. Вы добавляете аннотации типов к переменным, параметрам и возвращаемым значениям, компилятор TypeScript проверяет их до запуска программы и выдаёт обычный JavaScript без типов. Этот JavaScript работает везде, где работает JavaScript: в браузерах, Node.js, Deno и Bun. Эта страница для начинающих объясняет, как это устроено.

Вот небольшая программа на TypeScript. Нажмите Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Вывод:

Ada is 36 years old
82.33333333333333

Если убрать части после двоеточий (: string, : User, : number[]) и interface, это обычный JavaScript. Эти добавки сообщают компилятору, какими могут быть значения. Обратите внимание, что у total нет аннотации: TypeScript сам понимает, что это число. Обычно в коде на TypeScript аннотируют границы функций, а остальное компилятор выводит сам.

Что находит проверка типов

Смысл аннотаций в том, что ошибки видны, пока вы пишете код, а не когда на них наткнётся пользователь. Запустите этот блок и прочитайте вывод:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Программа даже не запускается. Вместо этого компилятор выводит две ошибки:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Каждая ошибка указывает файл, строку и столбец, код ошибки (TS2322) и суть проблемы. В обычном JavaScript обе строки выполнились бы, а вторая без всякого предупреждения напечатала бы Linus is undefined years old. В редакторе вроде VS Code те же ошибки появляются красным подчёркиванием прямо при наборе, вместе с автодополнением, которое знает, что у user есть ровно name и age.

Типичные ошибки, которые находит проверка:

• Опечатка в имени свойства или метода (user.nmae, list.lenght).
• Вызов функции со слишком малым или слишком большим числом аргументов либо с аргументами неверного типа.
• Использование значения, которое может быть null или undefined, без предварительной проверки.
• Забытая ветка объединения вроде "loading" | "done" | "error", если в коде есть исчерпывающая проверка.
• Код, который ломается, когда функция, от которой он зависит, меняет сигнатуру.

Типы исчезают во время выполнения

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

Такой входной код:

function double(n: number): number {
    return n * 2;
}

превращается в такой:

function double(n) {
    return n * 2;
}

Поэтому TypeScript не может проверить значения, которые появляются во время работы программы. Здесь JSON-текст выдаёт себя за User, компилятор вынужден поверить на слово, и во время выполнения тоже никто не возражает:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Вывод:

string
thirty-six1

Данным извне программы (ответам API, вводу из форм, файлам) нужна проверка во время выполнения, например функция защитника типа, которая осматривает значение. TypeScript доверяет такой проверке и сужает тип за вас.

Кто создал TypeScript и зачем

TypeScript создан в Microsoft, разработку возглавил Андерс Хейлсберг (автор C#). Язык стал публичным в октябре 2012 года в версии 0.8, а версия 1.0 вышла в апреле 2014 года. Это открытый проект под лицензией Apache 2.0, который разрабатывается на GitHub. По подсчёту GitHub ежемесячных участников, в августе 2025 года TypeScript стал самым используемым языком на GitHub, обогнав Python и JavaScript.

Причиной были большие кодовые базы на JavaScript. В JavaScript нельзя сказать «эта функция принимает объект пользователя», поэтому переименование свойства или изменение функции означало поиск по всему коду и надежду, что тесты покрывают все вызовы. TypeScript добавляет эту информацию, сохраняя полную совместимость с JavaScript:

• Это надмножество. Корректный JavaScript является корректным синтаксисом TypeScript, поэтому проект можно переводить по одному файлу.
• Он следует за JavaScript. Кроме нескольких ранних добавлений вроде enum и namespace, TypeScript не добавляет собственных возможностей времени выполнения; новый синтаксис приходит из стандарта JavaScript.
• Типы ничего не стоят во время выполнения. Они удаляются, поэтому результат работает так же быстро, как JavaScript, написанный вручную.

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

Для чего используют TypeScript: frontend и backend

TypeScript используют для того же ПО, что и JavaScript, и на фронтенде, и на бэкенде. Поскольку на выходе получается JavaScript, TypeScript работает везде, где работает JavaScript:

Один и тот же язык покрывает обе стороны веб-приложения, поэтому многие команды используют общие определения типов (например, структуру ответа API) в серверном и браузерном коде.

Как код на TypeScript превращается в JavaScript

Здесь две отдельные задачи, и их выполняют разные инструменты:

1. Проверка типов. Её выполняет только компилятор TypeScript, обычно в виде команды tsc (deno check в Deno запускает копию того же компилятора). Он читает файлы .ts, сообщает об ошибках и по умолчанию также записывает файлы .js.
2. Удаление типов. Это умеет tsc, а также более быстрые инструменты, которые вообще не проверяют типы: esbuild, SWC, Babel и встроенное удаление типов в Node.js, Deno и Bun.

Частая схема: быстрый инструмент запускает код, а tsc --noEmit (только проверка, без записи файлов) работает в редакторе и в CI. Установке tsc и запуску файла .ts посвящены отдельные страницы этой главы.

Основные возможности в одном примере

В повседневной работе с TypeScript используется небольшой набор возможностей. В этом блоке собраны главные:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Вывод:

Ada ada@example.com
Ada can log in
Linus is banned

• Аннотации типов (name: string) указывают, что хранит переменная, параметр, свойство или возвращаемое значение.
• Вывод типов заполняет типы, которые вы не указали: account получает тип из того, что возвращает first.
• Интерфейсы и псевдонимы типов (interface Account, type Status) дают имена структурам ваших данных.
• Типы объединения ("active" | "banned", T | undefined) описывают значение, которое может быть одним из нескольких вариантов.
• Сужение типов: после проверки вроде account !== undefined компилятор знает, какой вариант действует внутри блока.
• Необязательные свойства (email?: string) могут отсутствовать, поэтому их тип включает undefined.
• Дженерики (first<T>) позволяют одной функции или типу работать со многими типами, сохраняя связь между ними: на входе массив Account, на выходе Account.

Нужно ли сначала учить JavaScript?

Это помогает, но учить оба языка можно одновременно. Всё, что касается поведения кода на TypeScript во время выполнения (переменные, функции, объекты, массивы, промисы, классы), это JavaScript, а TypeScript добавляет слой, который описывает эти значения. Если вы уже знаете JavaScript, новое для вас это система типов: аннотации, интерфейсы, объединения, дженерики и сужение. Если вы новичок в обоих, начните с основ значений и функций JavaScript и добавляйте типы по ходу дела; сообщения об ошибках компилятора хорошо учат, потому что указывают точную строку, где значение используется неправильно.

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