Программирование • 30 июля 2024 • 5 мин чтения

Что такое TypeScript и чем он отличается от JavaScript

У главного языка фронтенда JavaScript есть улучшенная версия — TypeScript. Рассказываем, как он работает и чем отличается от старой версии.

Что такое TypeScript

Язык TypeScript (TS) появился в 2012 году. Его создала компания Microsoft, чтобы расширить возможности JavaScript.

JavaScript — это язык фронтенда, то есть лицевой стороны сайта, которую видят пользователи. Чаще всего его используют в вебе для создания интерактивных страниц — с анимированными элементами, всплывающими сообщениями, блоками для отправки информации.

Язык TypeScript — это доработанная версия JavaScript. Он помогает писать более чистый и безопасный код, так как предупреждает об ошибках ещё до запуска программы.

Руслан Посевкин, frontend engineer
Разработчики критиковали JavaScript за отсутствие строгой типизации и сложность масштабирования в больших проектах: возникали трудности в поддержке и отладке кода. TypeScript создали для решения этих проблем. У него есть статическая типизация и улучшения в части поддержки объектно ориентированного программирования. Благодаря этому разработка становится более надёжной и управляемой.

Научиться писать код для сайтов и веб-приложений можно с нуля на курсе «Фронтенд-разработчик». Студенты смогут освоить TypeScript, JavaScript и другие инструменты фронтенда, решить более 500 задач и сделать 11 проектов для портфолио.

На TypeScript можно писать практически любой код, который доступен и на JavaScript. Вот, например, какие проекты можно создавать с помощью TS:

Мобильные и веб-приложения. На TypeScript можно писать одностраничные приложения с использованием фреймворков, например Angular, React и Vue.js. А ещё — мобильные приложения с фреймворками Ionic, NativeScript и React Native.
Серверные приложения. С помощью TypeScript можно писать серверный код на Node.js — это движок, который позволяет запускать JavaScript не в браузере, а на сервере.
Платформы и библиотеки. Например, Vue.js и Deno написаны на TypeScript.

Плюсы и минусы TypeScript

Язык TypeScript решил многие проблемы JavaScript. Но у него есть и свои недостатки. Разберём подробнее плюсы и минусы.

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

Раннее обнаружение ошибок. TypeScript проверяет код на наличие ошибок до того, как запускать его.

Совместимость с JavaScript. Любой код на JavaScript будет работать в TypeScript. Можно переходить на него постепенно и не переписывать весь проект сразу.

Понятные структуры данных. Можно заранее описать, как должны выглядеть объекты и функции, — благодаря этому код станет более понятным и лёгким для чтения.

Интеграция с IDE. Многие интегрированные среды разработки (IDE) и редакторы кода, например Visual Studio Code, поддерживают TypeScript. Они помогают исправлять ошибки и подсказывают, как сделать код лучше.

Поддержка комьюнити. Существует большое сообщество разработчиков, которые используют TypeScript.

Недостатки

Компиляция перед запуском. Код на TypeScript необходимо преобразовать в JavaScript до выполнения. Это дополнительный шаг, который замедляет процесс разработки.

Проблемы с типизацией внешних библиотек. Не у всех библиотек JavaScript есть типизация в TypeScript. Из-за этого приходится создавать или искать определения типов.

Руслан Посевкин
Основное преимущество TypeScript — статическая типизация. Она помогает находить ошибки до запуска кода. Но TypeScript требует компиляции в JavaScript — это недостаток, который увеличивает время сборки. Также усложняется интеграция со сторонними библиотеками без определений типов.

У TypeScript большое комьюнити: разработчики делятся советами и рабочими кейсами

Как работает TypeScript

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

Разберём основные элементы, которые работают в TypeScript. Все составляющие можно найти на официальном сайте: компания Microsoft опубликовала в открытом доступе всю документацию по TypeScript.

Типы переменных	TypeScript позволяет задавать типы для всех структур данных. Например: number — числа; string — строки текста; object — объекты, которые могут содержать свойства и методы; null — отсутствие значения; any — переменная, которую используют, когда тип заранее неизвестен; undefined — переменная означает, что значение ещё не присвоено.
Классы и ООП	TypeScript поддерживает классы с расширенной функциональностью. Например, есть модификаторы, которые управляют внешним доступом к данным — закрывают или открывают его. Всего существует три модификатора: public — данные доступны без ограничений; private — данные доступны только из того класса, в котором они определены; protected — данные доступны из класса, в котором они определены, и в подклассах / производных классах.
Массивы	В TypeScript массивы работают, как в JavaScript, но к ним можно добавить типизацию — как и для переменных. Например, объявить массив, в котором все элементы имеют один и тот же тип. Для этого используют синтаксис тип[] или Array<тип>. Ещё есть кортежи — это массивы, которые могут содержать элементы разных типов — например, возраст и пол пользователя.
Интерфейсы	Определяют, какие имена, свойства может иметь объект. Например: interface Person { name: Alex; age: 42; }
Функции	С помощью TypeScript можно описывать типы функций, их параметры и возвращаемые значения, а ещё — создавать функции с неопределённым количеством параметров. type Operation = (a: number, b: number) => number; const add: Operation = (x, y) => x + y;
Модули	Позволяют организовать код в отдельные файлы и импортировать или экспортировать элементы между этими файлами. // math.ts export function add(x: number, y: number): number { return x + y; } // app.ts import { add } from './math'; console.log(add(2, 3));

Установка и настройка TypeScript

Чтобы TypeScript заработал, его необходимо установить на компьютер. Это можно сделать через Node.js, если скачать пакетный менеджер npm.

Вот что нужно сделать дальше:

Установить TypeScript. После установки Node.js нужно открыть терминал или командную строку и ввести команду npm install -g typescript.
Настроить редактор кода. При использовании, например, Visual Studio Code нужно зайти в File — Preferences — Setting и добавить в раздел User Settings путь: "typescript.tsdk": "node_modules/typescript/lib".
Создать проект. Можно написать новый код или открыть существующий.
Провести компиляцию TypeScript. Чтобы скомпилировать код TypeScript в JavaScript, нужно использовать команду tsc в командной строке или терминале.
Запустить JavaScript. После компиляции код JavaScript будет находиться в директории dist или build в зависимости от настроек компилятора. Можно запустить этот код в браузере или на Node.js.

Код TypeScript не запустится сам по себе, его нужно скомпилировать в JavaScript

Рассмотрим пошагово, как работает TypeScript, на примере создания приложения со списком дел — to-do list.

1. Создание новой директории. Нужно создать директорию — это каталог, который используется для организации и группировки файлов. Для этого необходимо выполнить команду:

mkdir todo-app
cd todo-app

2. Создание нового npm-проекта. Команда npm init -y создаст файл package.json с базовыми настройками.

3. Установка TypeScript для Node.js. Для этого нужно ввести команду: npm install typescript.

4. Запуск TypeScript-проекта. С помощью команды npx tsc --init можно создать файл tsconfig.json, который используется для настройки компилятора TypeScript.

5. Создание структуры проекта. Вот как выглядит структура файлов:

todo-app/
├── src/
│ ├── index.ts
│ ├── todo.ts
├── tsconfig.json
├── package.json

6. Написание кода. Нужно создать файл todo.ts для модели задачи и управления списком задач. Для этого — открыть файл src/todo.ts и добавить код, который создаст:

интерфейс Todo для описания структуры задач;
класс TodoList, который управляет списком задач, добавляет новые задачи и возвращает список всех задач.

// src/todo.ts
// Описание структуры задачи
export interface Todo {
id: number;
task: string;
completed: boolean;
}
// Класс для управления списком задач
export class TodoList {
private todos: Todo[ ] = [ ];
private nextId: number = 1;
// Метод для добавления новой задачи
addTask(task: string): void {
const newTodo: Todo = {
id: this.nextId++,
task: task,
completed: false,
};
this.todos.push(newTodo);
}
// Метод для получения всех задач
getTasks(): Todo[ ] {
return this.todos;
}
}

7. Создание файла index.ts для основного кода приложения. Для этого нужно открыть файл src/index.ts и добавить код, который импортирует класс TodoList из файла todo.ts, создаст экземпляр TodoList, добавит несколько задач и выведет список в консоль.

// src/index.ts
import { TodoList } from './todo';
const todoList = new TodoList();
// Добавление нескольких задач
todoList.addTask("Learn TypeScript");
todoList.addTask("Write a to-do list app");
// Вывод списка задач
console.log("To-Do List:");
todoList.getTasks().forEach(todo => {
console.log(`[${todo.id}] ${todo.task} -
${todo.completed ? "Completed" : "Not Completed"}`);
});

8.Компиляция и запуск проекта. Нужно настроить tsconfig.json для указания на директории. Для этого — открыть файл tsconfig.json и убедиться, что он содержит настройки:

{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
}
}

target указывает на версию JavaScript, в которую будет компилироваться TypeScript (ES6).
module указывает на систему модулей (CommonJS для Node.js).
rootDir — это исходная директория (src).
outDir — выходная директория для скомпилированных файлов (dist).
strict включает строгую проверку типов.
esModuleInterop обеспечивает совместимость с ES-модулями.

9. Компиляция кода TypeScript. Нужно выполнить команду, которая скомпилирует файлы TypeScript и создаст JavaScript-файлы в директории dist.

npx tsc

10. Запуск скомпилированного приложения. Для этого нужно выполнить команду node dist/index.js.

Появится вывод в консоли:

To-Do List:
[1] Learn TypeScript - Not Completed

[2] Write a to-do list app - Not Completed

Отличия от JavaScript

Основное отличие TypeScript от JavaScript в том, что он проверяет код и показывает ошибки до запуска программы. Разберём подробнее, в чём ещё разница между этими языками.

Типизация

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

let message = "Hello";
message = 42; // JavaScript допускает здесь число (number), хотя это может привести к ошибкам.

В TypeScript — статическая типизация. Типы данных определяются на этапе написания кода, поэтому ошибки можно обнаружить до запуска.

let message: string = "Hello";
// message = 42; // TypeScript укажет на ошибку, так как переменная должна быть строкой (string).

Интерфейсы и классы

JavaScript поддерживает классы с ES6 — это стандарт, на котором основан JS. Но в нём нет встроенной поддержки интерфейсов, которые описывают структуру объектов.

class Animal {
constructor(name) {
this.name = name;
}
}
let cat = new Animal("Ozzy");

В TypeScript есть поддержка интерфейсов и расширенные возможности работы с классами — это делает код более структурированным.

interface Animal {
name: string;
sound(): void;
}
class Cat implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
sound(): void {
console.log("Meow!");
}
}
let cat: Cat = new Cat("Ozzy");
cat.sound(); // Meow!

Подсказки и автодополнения

В случае с JavaScript редакторы кода могут выводить подсказки, но часто сложно понять, какие методы и свойства доступны. При работе с TypeScript редакторы предлагают автодополнения — это ускоряет процесс разработки.

Компиляция

Код JavaScript может быть выполнен напрямую в браузере или Node.js, а код TypeScript нужно сначала скомпилировать в JavaScript.

Ошибки во время компиляции

Это отличие вытекает из предыдущего. В JavaScript ошибки можно обнаружить только при выполнении программ. В TypeScript ошибки подсвечиваются при компиляции, то есть ещё до запуска.

Совет эксперта

Руслан Посевкин
TypeScript повышает качество кода и помогает создавать надёжные и масштабируемые приложения. Начинающим разработчикам важно понимать основы статической типизации и её преимущества — например, что она помогает обнаруживать ошибки в коде на раннем этапе. Также важно изучать типы, интерфейсы и классы TypeScript. Они делают код более структурированным и облегчают поддержку.

Статью подготовили: