Введение в TypeScript

Цель урока

В этом уроке ты научишься:

Понимать, что такое TypeScript
Настраивать проект
Компилировать TypeScript в JavaScript

Что такое TypeScript

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

// JavaScript — ошибка только при выполнении
function greet(name) {
  return "Привет, " + name.toUpperCase();
}
greet(123); // Ошибка в рантайме

// TypeScript — ошибка при компиляции
function greet(name: string) {
  return "Привет, " + name.toUpperCase();
}
greet(123); // Ошибка: Argument of type 'number'...

Преимущества

Раннее обнаружение ошибок — до запуска кода
Автодополнение — IDE знает типы и подсказывает
Рефакторинг — безопасное переименование
Документация — типы описывают код
Масштабируемость — проще поддерживать большие проекты

Установка

# Глобально
npm install -g typescript

# В проекте
npm install --save-dev typescript

Проверка версии

tsc --version

Инициализация проекта

# Создание tsconfig.json
tsc --init

Базовый tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

Компиляция

# Один файл
tsc file.ts

# Весь проект
tsc

# Режим наблюдения
tsc --watch

Первая программа

// src/index.ts
function greet(name: string): string {
  return `Привет, ${name}!`;
}

console.log(greet("Мир"));

tsc
node dist/index.js
# "Привет, Мир!"

Типы vs JavaScript

// TypeScript
let message: string = "Привет";
let count: number = 42;
let isActive: boolean = true;

// Компилируется в JavaScript
let message = "Привет";
let count = 42;
let isActive = true;

Важно

Типы существуют только во время компиляции. В рантайме — обычный JavaScript.

Вывод типов

TypeScript автоматически определяет типы:

let name = "Иван";    // тип string
let age = 25;         // тип number
let active = true;    // тип boolean

// name = 123; // Ошибка: Type 'number' is not assignable to type 'string'

Практика

Задание 1: Первая функция

Задача: Создай типизированную функцию сложения.

Запустите код для проверки

Ваш вывод:

Ожидаемый результат:

Задание 2: Типизация переменных

Задача: Объяви переменные с типами.

Запустите код для проверки

Ваш вывод:

Ожидаемый результат:

Иван 20 true

Проверь себя

Что такое TypeScript?
Когда происходит проверка типов?
Что такое вывод типов?

Введение в TypeScript

On this page