TypeScript

TypeScript — это язык программирования, который добавляет типы к JavaScript. Его создала Microsoft. Код TypeScript превращается в обычный JavaScript. Браузер и Node.js выполняют уже этот JavaScript. То есть TypeScript — не второй язык, который браузер понимает сам по себе.

Главное отличие — типы. В коде записывают, является значение текстом, числом или объектом. Неподходящее значение часто видно ещё до запуска программы.

TypeScript стоит поверх JavaScript. Правильный код JavaScript может оставаться в файле TypeScript. Типы добавляют проверку и более точную помощь редактора.

TypeScript в основном используют там, где используют JavaScript:

• Крупные веб-приложения
• Проекты на React, Angular и Vue
• Серверный код и API на Node.js
• Библиотеки, которыми пользуются другие
• Код, который пишут несколько человек

Для небольшой страницы может хватить обычного JavaScript. Когда проект растёт, типы помогают раньше увидеть несовпадение.

На TypeScript можно делать большую часть того, для чего используют JavaScript:

• Интерактивное веб-приложение
• Сервер и API
• Библиотеку с записанными типами
• Проверку форм и данных
• Крупный frontend-проект

Простой пример

function greet(name: string): string {
    return "Здравствуйте, " + name;
}

console.log(greet("Nibras Code"));

Эта функция принимает только текст и пишет приветствие в консоль.

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

В начале полезен такой порядок:

1. Основы JavaScript: переменные, функции и объекты
2. Типы string, number и boolean
3. Тип, который функция принимает и возвращает
4. Объекты и interface
5. Объединение, которое называет больше одного возможного типа
6. Простой тип массива
7. Шаг сборки, который превращает TypeScript в JavaScript

Полезнее добавлять типы в небольшие файлы, чем пытаться запомнить весь язык сразу.

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

• Многие ошибки видны до запуска программы
• Редактор точнее подсказывает имена, поля и функции
• Крупный проект легче читать
• Его можно использовать вместе с уже написанным JavaScript
• Это открытый код, и за сам язык отдельно платить не нужно

Недостатки

• Код не выполняется в браузере напрямую: сначала он превращается в JavaScript
• Для очень короткого скрипта типы могут казаться лишними
• Типы не ловят каждую логическую ошибку
• Некоторые описания типов новичку трудно читать

Синтаксис TypeScript похож на JavaScript. Разница в том, что тип пишут рядом с переменной или функцией.

Переменная с типом

let name: string = "Ali";
let age: number = 20;

Функция

function add(a: number, b: number): number {
    return a + b;
}

Форма объекта

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

const user: User = { name: "Ali", age: 20 };

Приветствие

const name: string = "Nibras Code";
console.log("Здравствуйте, " + name);

Сумма двух чисел

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(10, 20));

Условие

const age: number = 20;

if (age >= 18) {
    console.log("Совершеннолетний");
}

Что такое TypeScript?

TypeScript добавляет типы к JavaScript, а затем превращается в JavaScript.

TypeScript и JavaScript — это одно и то же?

Нет. TypeScript добавляет слой типов поверх JavaScript. Браузер выполняет уже полученный JavaScript.

TypeScript бесплатный?

Да. TypeScript — это открытый код, и за сам язык отдельно платить не нужно.

Нужно ли сначала учить JavaScript?

Это не обязательно, но помогает. TypeScript не заменяет JavaScript, а строится на нём.

TypeScript работает в браузере напрямую?

Обычно нет. Сначала он превращается в JavaScript. Этот файл затем работает в браузере или в Node.js.

TypeScript ловит все ошибки?

Нет. Он хорошо показывает несовпадение типа. Неверное условие всё равно может остаться в программе.

Можно ли использовать TypeScript с React?

Да. В проектах на React TypeScript используют широко.