TypeScript — язык программирования со строгой типизацией, основанный на JavaScript. JavaScript — интерпретируемый язык, и неопытные программисты часто сталкиваются с ошибками, возникающими только во время выполнения кода в веб-браузере. Это связано с динамической типизацией JavaScript: одной и той же переменной можно присваивать значения разных типов, что приводит к ошибкам, незаметным на этапе написания кода. TypeScript решает эту проблему, добавляя статическую типизацию и подсказки в коде.
Преимущества и недостатки
Преимущества:
- Статическая типизация предотвращает ошибки во время выполнения.
- Подсказки в коде упрощают разработку и повышают читаемость.
Недостатки:
- Необходимо писать больше кода.
- Требуется этап компиляции в JavaScript.
Статическая типизация
В TypeScript можно явно указывать типы переменных, используя двоеточие и название типа после переменной. Если тип переменной не указан явно, TypeScript определяет его неявно после первого присвоения значения. При несоответствии типов вы получите предупреждение на этапе написания кода. Например, присвоение строки переменной числового типа вызовет ошибку.
let myNumber: number = 10;
myNumber = "строка"; // Ошибка!Веб-браузеры не понимают TypeScript-код, поэтому его необходимо скомпилировать в JavaScript с помощью утилиты tsc.
Интерфейсы и типы данных
TypeScript позволяет создавать интерфейсы — структуры для объектов. Если объект не соответствует определённому интерфейсу, вы увидите уведомление.
interface Book {
title: string;
author: string;
pageCount: number;
}Для массивов можно указывать тип элементов, используя квадратные скобки:
let numbers: number[] = [1, 2, 3];Практическое применение
Создадим проект:
- Создайте файл index.ts и объявите переменную с явным указанием типа:
let myName: string = "Имя"; - Создайте файл index.html и подключите index.ts через <script> тэг.
- Установите TypeScript глобально с помощью npm: npm install -g typescript (предполагается, что Node.js и npm уже установлены).
- Скомпилируйте index.ts в index.js используя tsc index.ts.
- Замените ссылку на index.ts в index.html на index.js.
- Откройте index.html в браузере. При правильном выполнении ошибок не будет. Попытка присвоить переменной myName значение другого типа (например, число) вызовет ошибку компиляции.
Типы в функциях
В TypeScript можно явно указывать типы параметров функций. Например:
function priceInfo(price: number): string {
return `Цена: ${price}`;
}Если тип не указан явно, TypeScript будет использовать тип any.
Настройка компилятора
Для настройки компилятора создайте файл tsconfig.json. В нём можно изменить целевую версию JavaScript (target). По умолчанию это ES3, но рекомендуется использовать ES6 (или более позднюю версию) для лучшей совместимости и использования современных возможностей JavaScript. После изменения настроек в tsconfig.json компиляцию можно запускать командой tsc без указания имени файла; настройки из tsconfig.json будут применены.
TypeScript — мощный инструмент для разработки приложений, позволяющий избежать многих ошибок, типичных для JavaScript. Несмотря на необходимость написания большего количества кода и компиляции, преимущества TypeScript в плане повышения качества кода и упрощения отладки значительно перевешивают эти недостатки.