TypeScript

Зачем добавлять типы в JavaScript: меньше багов, лучше автодополнение, уверенный рефакторинг.

Язык примеров:

Шаг 1 из 3

Зачем TypeScript

Проблема JavaScript при росте проекта

javascript

// JS — тип неизвестен до запуска
function getUser(id) {
  return fetch('/api/users/' + id).then(r => r.json());
}

// Что вернёт эта функция? { name, email }? { id, username }?
// Узнаешь только в рантайме (или из доков, если они есть)

const user = await getUser(42);
console.log(user.nmae); // ← опечатка! Нет ошибки до запуска

TypeScript ловит ошибки ДО запуска

typescript

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUser(id: number): Promise<User> {
  const res = await fetch('/api/users/' + id);
  return res.json();
}

const user = await getUser(42);
console.log(user.nmae); // ← ОШИБКА КОМПИЛЯЦИИ: Property 'nmae' does not exist
console.log(user.name); // ✓

Что даёт TypeScript

Фича	Что это даёт
Типы	Ошибки в IDE, а не в проде
Автодополнение	IDE знает все поля объекта
Рефакторинг	Переименовал функцию — TypeScript найдёт все места
Документация	Типы = живая документация API

TypeScript — не другой язык. Любой JS-код — валидный TS. Ты просто добавляешь аннотации.

JavaScript

// Тот же код без TypeScript
// Всё работает, но...

const name = "Иван";        // какой тип? Неизвестно без чтения
const age = 25;

const scores = [85, 92, 78]; // может содержать строки — не ясно

// status может быть чем угодно
let userStatus = "active";
userStatus = "deleted";     // ← ошибка обнаружится только в рантайме

function findUser(id) {
  return users.find(u => u.id === id); // может вернуть undefined — забыл проверить?
}

const user = findUser(42);
console.log(user.name);     // ← TypeError если не найден — только в рантайме!

JavaScript Python

StudyCode

Проблема JavaScript при росте проекта

javascript

// JS — тип неизвестен до запуска
function getUser(id) {
  return fetch('/api/users/' + id).then(r => r.json());
}

// Что вернёт эта функция? { name, email }? { id, username }?
// Узнаешь только в рантайме (или из доков, если они есть)

const user = await getUser(42);
console.log(user.nmae); // ← опечатка! Нет ошибки до запуска

TypeScript ловит ошибки ДО запуска

typescript

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUser(id: number): Promise<User> {
  const res = await fetch('/api/users/' + id);
  return res.json();
}

const user = await getUser(42);
console.log(user.nmae); // ← ОШИБКА КОМПИЛЯЦИИ: Property 'nmae' does not exist
console.log(user.name); // ✓

Что даёт TypeScript

Фича	Что это даёт
Типы	Ошибки в IDE, а не в проде
Автодополнение	IDE знает все поля объекта
Рефакторинг	Переименовал функцию — TypeScript найдёт все места
Документация	Типы = живая документация API

TypeScript — не другой язык. Любой JS-код — валидный TS. Ты просто добавляешь аннотации.

// Тот же код без TypeScript // Всё работает, но... const name = "Иван"; // какой тип? Неизвестно без чтения const age = 25; const scores = [85, 92, 78]; // может содержать строки — не ясно // status может быть чем угодно let userStatus = "active"; userStatus = "deleted"; // ← ошибка обнаружится только в рантайме function findUser(id) { return users.find(u => u.id === id); // может вернуть undefined — забыл проверить? } const user = findUser(42); console.log(user.name); // ← TypeError если не найден — только в рантайме!