Что такое TypeScript и зачем его использовать вместо JavaScript?

TypeScript — это не новый язык, а надстройка над JavaScript

TypeScript (TS) — это строго типизированный язык программирования, который компилируется в обычный JavaScript. Он добавляет статическую типизацию, что позволяет находить ошибки на этапе написания кода, а не во время выполнения.

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

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

// Ошибка будет подсвечена в редакторе ещё до запуска!
let total = calculateTotal('100', 2); 
// TypeScript скажет: "Argument of type 'string' is not assignable to parameter of type 'number'"

Основные преимущества TypeScript перед JavaScript

• Раннее обнаружение ошибок — вы увидите проблему в редакторе кода, а не в консоли браузера
• Автодополнение и документация — IDE подсказывает, какие методы доступны для объекта
• Самодокументируемый код — типы служат документацией: сразу понятно, что ожидает функция
• Рефакторинг без страха — можно менять код, зная, что TypeScript поймает несоответствия
• Поддержка современных возможностей — TS компилируется в старый JS для совместимости с браузерами

Пример: работа с объектом пользователя

В JavaScript вы можете случайно обратиться к несуществующему свойству:

// JavaScript
function getUserName(user) {
    return user.name.toUpperCase(); // Ошибка, если user.name = undefined
}

getUserName({}); // TypeError: Cannot read property 'toUpperCase' of undefined

В TypeScript вы описываете структуру объекта заранее:

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

function getUserName(user: User): string {
    return user.name.toUpperCase(); // Безопасно — TS проверит, что name существует
}

getUserName({}); // Ошибка: Property 'name' is missing in type '{}'

Типизация API-ответов

Частая проблема — непонятно, что приходит с сервера:

// JavaScript
fetch('/api/user')
    .then(res => res.json())
    .then(data => {
        console.log(data.email); // Может быть undefined, если API вернул другую структуру
    });

// TypeScript
interface UserResponse {
    id: number;
    email: string;
    name: string;
}

fetch('/api/user')
    .then(res => res.json())
    .then((data: UserResponse) => {
        console.log(data.email); // IDE подскажет, что email — это string
    });

Недостатки TypeScript

Честно говоря, минусы есть:

• Дополнительная настройка — нужно установить компилятор, настроить tsconfig.json
• Время на изучение — придётся освоить типы, интерфейсы, дженерики
• Не подходит для очень маленьких проектов — скрипт на 50 строк писать на TS избыточно

Стоит ли новичку учить TypeScript?

Да, однозначно! Большинство современных проектов (React, Angular, Node.js) используют TypeScript. Даже если вы пишете небольшой проект — привычка типизировать код сделает вас более дисциплинированным разработчиком. Начните с малого: добавьте типы в существующий JS-проект и почувствуйте разницу.

// JavaScript
function processData(data) {
    // Что такое data? Массив? Объект? Строка?
    return data.map(item => item.value);
}

// TypeScript
interface DataItem {
    id: number;
    value: string;
}

function processData(data: DataItem[]): string[] {
    return data.map(item => item.value);
}