🚀 Язык программирования TypeScript
🤔 Что такое TypeScript?
Представь, что JavaScript — это обычный карандаш, которым ты рисуешь. А TypeScript — это волшебный карандаш, который подсказывает тебе, если ты рисуешь что-то не так! TypeScript делает код более понятным и помогает избежать ошибок.
TypeScript — это надстройка над JavaScript, которая добавляет типы данных. Это значит, что ты можешь указать, какие данные должна содержать переменная, и компьютер будет следить за тем, чтобы ты не ошибся.
⚡ В чём разница между JavaScript и TypeScript?
| JavaScript |
TypeScript |
| Не проверяет типы данных |
Проверяет типы данных |
| Ошибки находятся при выполнении |
Ошибки находятся при написании кода |
| Более простой синтаксис |
Более строгий, но безопасный |
| Не требует компиляции |
Компилируется в JavaScript |
🛠️ Как начать работать с TypeScript
1
Установка Node.js
Сначала нужно установить Node.js с официального сайта nodejs.org. Node.js — это программа, которая позволяет запускать JavaScript на твоём компьютере.
2
Установка TypeScript
Открой терминал (командную строку) и введи команду:
npm install -g typescript
Флаг -g означает глобальную установку — TypeScript будет доступен везде на твоём компьютере.
3
Установка редактора кода
Рекомендуем использовать Visual Studio Code (VS Code) — это бесплатный и мощный редактор кода. Скачай его с сайта code.visualstudio.com.
4
Твоя первая программа
Создай файл hello.ts и напиши в нём:
let message: string = "Привет, TypeScript!";
console.log(message);
5
Компиляция и запуск
В терминале введи команду для компиляции:
tsc hello.ts
Это создаст файл hello.js. Теперь запусти его:
node hello.js
💡 Совет для новичков: Если не хочешь устанавливать ничего на компьютер, попробуй TypeScript Playground — онлайн-редактор на сайте
typescriptlang.org/play. Там можно экспериментировать прямо в браузере!
🔤 Типы данных в TypeScript
В TypeScript мы можем сказать, какой тип данных должна хранить переменная. Это как подписать коробки: «Здесь лежат игрушки», «Здесь лежат книги».
Основные типы
// Число
let age: number = 12;
// Строка (текст)
let name: string = "Маша";
// Логическое значение
let isStudent: boolean = true;
// Массив чисел
let grades: number[] = [5, 4, 5, 3];
// Массив строк
let subjects: string[] = ["Математика", "История"];
Продвинутые типы
Union типы — когда переменная может быть разных типов:
let result: number | string;
result = 42; // ✅ Работает
result = "сорок два"; // ✅ Тоже работает
Type Aliases — создание своих собственных типов:
type Score = 1 | 2 | 3 | 4 | 5;
let mathGrade: Score = 5; // ✅ Отлично!
// let mathGrade: Score = 6; // ❌ Ошибка! Такой оценки не существует
Enum — список именованных констант:
enum Direction {
Up,
Down,
Left,
Right
}
let playerMove: Direction = Direction.Up;
Опциональные свойства — когда что-то может быть, а может не быть:
interface User {
name: string;
age?: number; // Знак ? означает, что возраст указывать необязательно
}
let user1: User = { name: "Петя" }; // ✅ Нормально
let user2: User = { name: "Маша", age: 14 }; // ✅ Тоже нормально
🎯 Зачем нужны типы?
Типы помогают нам избежать глупых ошибок. Представь, что ты хочешь сложить два числа, но случайно передал текст:
❌ Проблема в JavaScript:
function add(a, b) {
return a + b;
}
console.log(add(5, "3")); // Результат: "53" (не то, что мы хотели!)
✅ Решение в TypeScript:
function add(a: number, b: number): number {
return a + b;
}
console.log(add(5, 3)); // Результат: 8 (правильно!)
// add(5, "3"); // TypeScript покажет ошибку до выполнения!
🔍 Интересный факт: Исследования показывают, что использование TypeScript помогает находить до 15% ошибок ещё до запуска программы! Это экономит массу времени на отладку.
🏗️ Интерфейсы — это как чертежи
Интерфейсы в TypeScript — это как чертежи домика. Они описывают, как должен выглядеть объект:
interface Student {
name: string;
age: number;
grade: number;
subjects: string[];
}
// Создаём ученика по чертежу
let student: Student = {
name: "Петя",
age: 13,
grade: 7,
subjects: ["Математика", "Русский язык", "История"]
};
Если мы забудем добавить какое-то свойство или напишем его неправильно, TypeScript сразу нам скажет об этом!
Расширение интерфейсов
Интерфейсы можно расширять, добавляя новые свойства:
interface Person {
name: string;
age: number;
}
interface Student extends Person {
grade: number;
school: string;
}
// Теперь Student содержит все свойства Person плюс свои
🎮 Практические примеры
Пример 1: Игра «Угадай число»
Давайте создадим простую игру на TypeScript:
class NumberGuessingGame {
private secretNumber: number;
private attempts: number;
constructor() {
this.secretNumber = Math.floor(Math.random() * 100) + 1;
this.attempts = 0;
}
guess(userNumber: number): string {
this.attempts++;
if (userNumber === this.secretNumber) {
return `🎉 Поздравляю! Ты угадал за ${this.attempts} попыток!`;
} else if (userNumber < this.secretNumber) {
return "📈 Моё число больше!";
} else {
return "📉 Моё число меньше!";
}
}
getAttempts(): number {
return this.attempts;
}
}
// Играем!
const game = new NumberGuessingGame();
console.log(game.guess(50));
console.log(game.guess(75));
Пример 2: Система оценок
Создадим программу для подсчёта среднего балла:
interface Subject {
name: string;
grade: number;
}
class GradeCalculator {
private subjects: Subject[] = [];
addSubject(name: string, grade: number): void {
if (grade < 1 || grade > 5) {
console.log("❌ Оценка должна быть от 1 до 5!");
return;
}
this.subjects.push({ name, grade });
}
getAverage(): number {
if (this.subjects.length === 0) return 0;
const sum = this.subjects.reduce((acc, subj) => acc + subj.grade, 0);
return sum / this.subjects.length;
}
showReport(): void {
console.log("📊 Твои оценки:");
this.subjects.forEach(subj => {
console.log(`${subj.name}: ${subj.grade}`);
});
console.log(`\n⭐ Средний балл: ${this.getAverage().toFixed(2)}`);
}
}
// Используем калькулятор
const calculator = new GradeCalculator();
calculator.addSubject("Математика", 5);
calculator.addSubject("Русский язык", 4);
calculator.addSubject("История", 5);
calculator.showReport();
Пример 3: Интерактивный TODO-лист
Создадим список задач с возможностью отмечать выполненные:
interface Task {
id: number;
title: string;
completed: boolean;
createdAt: Date;
}
class TodoList {
private tasks: Task[] = [];
private nextId: number = 1;
addTask(title: string): void {
const task: Task = {
id: this.nextId++,
title,
completed: false,
createdAt: new Date()
};
this.tasks.push(task);
console.log(`✅ Задача "${title}" добавлена!`);
}
completeTask(id: number): void {
const task = this.tasks.find(t => t.id === id);
if (task) {
task.completed = true;
console.log(`🎉 Задача "${task.title}" выполнена!`);
} else {
console.log("❌ Задача не найдена!");
}
}
showTasks(): void {
console.log("\n📝 Список задач:");
this.tasks.forEach(task => {
const status = task.completed ? "✓" : "○";
console.log(`${status} [${task.id}] ${task.title}`);
});
}
}
// Используем список задач
const todo = new TodoList();
todo.addTask("Сделать домашнее задание");
todo.addTask("Погулять с собакой");
todo.completeTask(1);
todo.showTasks();
💻 Хочешь попробовать эти примеры?
Скопируй код в TypeScript Playground и запусти его прямо в браузере!
⚠️ Частые ошибки новичков
1. Использование типа any
Тип any отключает проверку типов. Старайся избегать его!
// ❌ Плохо
let value: any = "привет";
value = 42; // TypeScript не будет проверять
// ✅ Хорошо
let value: string | number = "привет";
value = 42; // Теперь TypeScript знает, что это разрешено
2. Забывать про null и undefined
Всегда проверяй, может ли значение быть пустым:
// ❌ Может быть ошибка
function getLength(text: string): number {
return text.length;
}
// ✅ Безопасно
function getLength(text: string | null): number {
if (text === null) return 0;
return text.length;
}
3. Неправильная работа с массивами
Указывай тип элементов массива правильно:
// ❌ Неясно, что в массиве
let items = [];
// ✅ Явно указываем тип
let items: string[] = [];
// или
let items: Array<string> = [];
4. Проблемы с асинхронностью
Не забывай про Promise при работе с async/await:
// ❌ Забыли указать Promise
async function getData(): string {
return "данные";
}
// ✅ Правильно
async function getData(): Promise<string> {
return "данные";
}
🌟 Преимущества TypeScript
🔍
Раннее обнаружение ошибок
TypeScript находит ошибки ещё до того, как программа запустится! Это экономит время и нервы.
💡
Умные подсказки
Редактор кода лучше понимает, что ты хочешь написать, и предлагает полезные подсказки.
👥
Командная работа
Когда много людей работают над одним проектом, TypeScript помогает всем понимать код друг друга.
📚
Документация в коде
Типы служат документацией — по ним легко понять, что делает функция и какие данные она принимает.
🔧
Лёгкий рефакторинг
Когда нужно изменить код, TypeScript помогает найти все места, которые нужно обновить.
🚀
Современные возможности
TypeScript поддерживает все новые фичи JavaScript и добавляет собственные улучшения.
🎓 Проверь свои знания!
Вопрос 1: Какой тип данных нужно указать для переменной, которая хранит имя?
A) number
B) string ✅
C) boolean
D) array
Вопрос 2: Что произойдёт, если передать строку в функцию, которая ожидает число?
A) Программа упадёт
B) TypeScript покажет ошибку ✅
C) Ничего не произойдёт
D) Строка автоматически преобразуется в число
Вопрос 3: Что такое интерфейс в TypeScript?
A) Графический интерфейс
B) Описание структуры объекта ✅
C) Тип переменной
D) Метод класса
💪 Совет: Попробуй написать свою программу на TypeScript! Начни с чего-то простого, например, калькулятора или списка покупок. Практика — лучший учитель!
❓ Часто задаваемые вопросы
Нужно ли знать JavaScript перед изучением TypeScript?
Да, желательно. TypeScript — это надстройка над JavaScript, поэтому базовое понимание JavaScript очень поможет. Но если ты уже знаешь основы программирования, можешь изучать их параллельно!
TypeScript сложнее JavaScript?
На первый взгляд может показаться сложнее из-за типов. Но на самом деле TypeScript делает программирование проще и безопаснее — он помогает находить ошибки раньше и даёт лучшие подсказки в редакторе.
Где используется TypeScript?
TypeScript популярен в веб-разработке, мобильных приложениях (React Native), серверной разработке (Node.js) и даже в создании игр. Многие крупные компании, включая Microsoft, Google и Airbnb, используют TypeScript в своих проектах.
Можно ли использовать обычные JavaScript библиотеки в TypeScript?
Да! TypeScript полностью совместим с JavaScript. Для большинства популярных библиотек существуют файлы типов (@types), которые добавляют поддержку TypeScript.
Сколько времени нужно, чтобы выучить TypeScript?
Если ты уже знаешь JavaScript, основы TypeScript можно освоить за 1-2 недели. Для более глубокого понимания продвинутых возможностей может потребоваться несколько месяцев практики.
🎯 Что дальше?
Поздравляю! Ты познакомился с основами TypeScript. Вот что можно изучить дальше:
- Generics — создание переиспользуемых компонентов, которые работают с разными типами данных
- Декораторы — специальные функции для модификации классов и методов
- Модули — организация кода в отдельные файлы
- Работа с React — создание интерактивных веб-приложений
- Node.js с TypeScript — разработка серверных приложений
- Тестирование — написание тестов для проверки кода
🌟 Полезные ресурсы для дальнейшего обучения:
- Официальная документация TypeScript — самый полный источник информации
- TypeScript Playground — экспериментируй с кодом в браузере
- GitHub — изучай открытые проекты на TypeScript
- Stack Overflow — ищи ответы на сложные вопросы
💡 Совет профессионала: Лучший способ выучить TypeScript — это писать код! Начни с простых проектов и постепенно усложняй их. Не бойся ошибаться — каждая ошибка делает тебя лучше!
