TypeScript и JavaScript: в чем разница простыми словами

TypeScript и JavaScript легко перепутать, если смотреть только на синтаксис. В обоих случаях есть const, функции, объекты, массивы, промисы, import и export. Иногда TypeScript-файл выглядит почти как обычный JavaScript, только рядом с переменными появляются подписи типов

Но разница не в косметике. JavaScript выполняется в браузере или Node.js. TypeScript сначала проверяется и компилируется в JavaScript. Он нужен не для того, чтобы заменить JavaScript, а чтобы раньше находить ошибки и делать большой код понятнее

Разберем без академической пыли: что именно добавляет TypeScript, где он помогает, где не помогает и когда новичку лучше не торопиться

Короткий ответ

JavaScript — язык, который реально выполняется

TypeScript — надстройка над JavaScript с системой типов. TypeScript-код обычно пишут в файлах .ts, потом компилируют в .js, и уже JavaScript запускается в браузере или Node.js

Очень грубая схема:

TypeScript (.ts) -> проверка типов -> JavaScript (.js) -> запуск

Поэтому фраза "TypeScript вместо JavaScript" немного обманчива. В реальности TypeScript работает вместе с JavaScript и в конце все равно отдает JavaScript

Один пример на JavaScript

Допустим, есть функция:

function calculateTotal(price, count) {
  return price * count;
}

console.log(calculateTotal(500, 3));
console.log(calculateTotal(500, "три"));

Первый вызов нормальный. Второй подозрительный: вместо числа пришла строка "три". JavaScript не остановит нас заранее. Он попробует выполнить умножение, получит NaN, и ошибка проявится только во время запуска

В маленьком файле это легко заметить. В большом проекте такая ошибка может пройти через несколько функций, попасть в UI, в отчет или в базу

Тот же пример на TypeScript

Теперь добавим типы:

function calculateTotal(price: number, count: number): number {
  return price * count;
}

console.log(calculateTotal(500, 3));
console.log(calculateTotal(500, "три"));

TypeScript подсветит второй вызов до запуска. Смысл ошибки: параметр count должен быть number, а мы передали string

Вот в этом и главная польза. TypeScript не делает умножение другим. Он заранее говорит: "Ты сам описал контракт функции, а теперь нарушил его"

Что добавляет TypeScript

TypeScript добавляет в код типы:

const title: string = "Курс";
const price: number = 1500;
const isPublished: boolean = true;

Описание формы объекта:

type Lesson = {
  title: string;
  minutes: number;
  published: boolean;
};

Типы параметров и результата функции:

function formatLesson(lesson: Lesson): string {
  return `${lesson.title}: ${lesson.minutes} минут`;
}

Ограниченный набор значений:

type Status = "draft" | "published" | "archived";

const status: Status = "published";

Если попытаться записать:

const status: Status = "deleted";

TypeScript остановит. Для JavaScript это просто строка. Для TypeScript это строка, которая не входит в разрешенный набор

Что TypeScript не добавляет

TypeScript не добавляет автоматическую проверку данных в момент выполнения

Например, ты описал ответ API:

type User = {
  id: number;
  name: string;
};

Это помогает писать код, который ожидает id и name. Но если сервер внезапно вернул:

{
  "id": "42",
  "fullName": "Dinar"
}

TypeScript сам не остановит это в браузере. Во время выполнения типы уже стерты. Если данные приходят извне, их нужно проверять отдельно

Это частая иллюзия новичка: "Я написал type, значит данные точно такие". Нет. type описывает ожидание в коде, но не проверяет чужой JSON магическим образом

Почему TypeScript нужно компилировать

Браузер не понимает такой код:

function greet(name: string): string {
  return `Привет, ${name}`;
}

Для браузера : string — лишний синтаксис. Поэтому TypeScript-компилятор убирает типы и делает JavaScript:

function greet(name) {
  return `Привет, ${name}`;
}

Если ты работаешь через Vite, Next.js, React, Angular или другой инструмент, компиляция часто спрятана внутри команды npm run dev или npm run build. Но принцип тот же: TypeScript проверяют, затем превращают в JavaScript

Когда JavaScript лучше для старта

Если человек совсем не знает:

• что такое функция;
• как работает объект;
• что такое массив;
• что делает Promise;
• чем браузер отличается от Node.js;

то TypeScript может добавить лишний шум. Не потому что он плохой, а потому что новичок будет одновременно учить JavaScript и систему типов

Для первых кликов на странице, простых DOM-скриптов и общего понимания веба JavaScript может быть проще

Когда TypeScript уже оправдан

TypeScript хорошо заходит, когда:

• проект растет больше нескольких файлов;
• есть команда или хотя бы будущий ты через месяц;
• много объектов с похожими полями;
• есть API-ответы;
• используется React, Node.js, Express, NestJS или другое приложение;
• ошибки "undefined is not a function" и "cannot read property" начинают надоедать.

В таких условиях типы становятся не украшением, а навигацией по проекту

Сравнение на одной задаче

Задача: вывести карточку урока

JavaScript:

function renderLesson(lesson) {
  return `${lesson.title}: ${lesson.minutes} минут`;
}

renderLesson({ title: "JS", minute: 20 });

Ошибка здесь тонкая: поле называется minute, а функция ждет minutes. JavaScript не знает, что мы хотели

TypeScript:

type Lesson = {
  title: string;
  minutes: number;
};

function renderLesson(lesson: Lesson): string {
  return `${lesson.title}: ${lesson.minutes} минут`;
}

renderLesson({ title: "TS", minute: 20 });

TypeScript подсветит, что объект не подходит под Lesson: нет minutes, есть лишнее minute. Вот здесь экономится время. Ошибка поймана в редакторе, а не после жалобы пользователя

Чем TypeScript платит за пользу

У TypeScript есть цена

Нужно настроить компиляцию. Нужно привыкнуть читать ошибки. Иногда придется описывать типы там, где в JavaScript можно было быстро набросать объект. Иногда типы становятся слишком сложными, если команда увлекается

Поэтому хороший TypeScript — это не "типизировать каждую пылинку". Хороший TypeScript помогает понимать код, а не превращает простую задачу в загадку

Для новичка нормальная стратегия такая:

1. Сначала типы переменных и параметров функций.
2. Потом type и interface для объектов.
3. Потом union types для статусов и режимов.
4. Потом generics, когда появится реальная повторяемость.

Частые ошибки в понимании

Первая ошибка — думать, что TypeScript быстрее JavaScript. Сам по себе TypeScript не ускоряет рантайм. Он помогает писать более предсказуемый код

Вторая ошибка — считать TypeScript отдельным языком в отрыве от JavaScript. На практике нужно знать JavaScript: массивы, объекты, функции, модули, async/await

Третья ошибка — верить, что TypeScript проверит все данные от сервера. Не проверит без runtime-валидации

Четвертая ошибка — лечить каждую проблему через any. Иногда any нужен, но если ставить его везде, ты выключаешь главный смысл TypeScript

Мини-задание

Возьми JavaScript-код:

function createUser(name, age) {
  return {
    name,
    age,
    isAdult: age >= 18,
  };
}

const user = createUser("Алина", "19");
console.log(user.isAdult);

Перепиши его на TypeScript:

type User = {
  name: string;
  age: number;
  isAdult: boolean;
};

function createUser(name: string, age: number): User {
  return {
    name,
    age,
    isAdult: age >= 18,
  };
}

const user = createUser("Алина", "19");
console.log(user.isAdult);

Посмотри, где TypeScript покажет ошибку. Потом исправь "19" на 19

Что может быть еще интересно по этой теме

TypeScript сложнее JavaScript?

На старте — да, потому что появляется слой типов. В большом проекте часто наоборот: TypeScript снижает хаос и помогает понимать чужой код

Нужно ли переписывать старый JavaScript-проект на TypeScript?

Не обязательно сразу. Часто начинают постепенно: включают TypeScript для новых файлов, описывают самые важные объекты и не пытаются типизировать весь проект за один вечер

Можно ли использовать TypeScript в браузере без сборщика?

Браузер не выполняет TypeScript напрямую. Нужна компиляция в JavaScript. Для экспериментов можно использовать Playground, для проекта — сборщик или tsc

Что выбрать новичку: TypeScript или JavaScript?

Если ты совсем с нуля в вебе, сначала полезно понять JavaScript. Если JavaScript уже знаком и хочется писать приложения аккуратнее, TypeScript будет хорошим следующим шагом

Что почитать дальше по TypeScript

• TypeScript с нуля: первый файл, типы и компиляция — чтобы руками пройти путь .ts -> .js.
• TypeScript online: где запустить код без установки — если хочешь быстро проверить примеры в браузере.
• interface и type в TypeScript: когда что использовать — чтобы описывать объекты без путаницы.
• Ошибки TypeScript: any, unknown, never и strict — чтобы читать сообщения компилятора спокойнее.