Использование TypeScript в Visual Studio Code

Development, Java | Amber | Комментировать запись

TypeScript – это типизированный расширенный набор JavaScript, который компилируется в простой JavaScript. Давайте разберемся, что именно это означает:

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

В этом руководстве мы покажем, как работать с TypeScript в Visual Studio Code, и рассмотрим преимущества их совместного использования.

Требования

• Базовые навыки работы с JavaScript.
• Локальная установка Node.js. Найти мануал по установке для вашей системы можно здесь.
• Установка Visual Studio Code

1: Установка и компиляция TypeScript

Для начала нам нужно выполнить глобальную установку пакета TypeScript на ваш компьютер. Для этого запустите следующую команду в своем терминале:

npm install -g typescript

Затем выполните следующую команду, чтобы создать каталог для вашего проекта:

mkdir typescript_test

Перейдите в новый каталог:

cd typescript_test

Теперь нужно создать новый файл TypeScript. Эти файлы используют расширение .ts.

Теперь вы можете открыть VS Code и создать новый файл, нажав File → New File. После этого сохраните его, нажав File → Save As. В мануале мы назовем этот файл app.ts. В целом же имя файла не имеет значения, важно только его расширение .ts.

Файл должен начинаться со строки export {};, чтобы VS Code распознал его как модуль.

Создайте функцию, которая будет выводить имя и фамилию из объекта person:

export {};
function welcomePerson(person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}
const james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);

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

В приведенном ниже фрагменте представлен интерфейс для объекта Person с двумя свойствами: firstName и lastName. Сама же функция welcomePerson была изменена, чтобы принимать только объекты Person.

export {};
function welcomePerson(person: Person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}
const james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);
interface Person {
firstName: string;
lastName: string;
}

Вы поймете преимущество этого хода, если попытаетесь передать в функцию welcomePerson какую-то строку.

Например, давайте заменим james:

welcomePerson(james);

На ‘James’:

welcomePerson('James');

Поскольку мы работаем с файлом TypeScript, VS Code немедленно сообщит вам, что функция ожидает объект Person, а не строку.

Argument of type '"James"' is not assignable to parameter of type 'Person'.

Теперь, когда у вас есть рабочий файл TypeScript, вы можете скомпилировать его в JavaScript. Для этого вам нужно вызвать функцию и указать, какой файл компилировать. Сделать это можно с помощью встроенного терминала VS Code.

tsc app.ts

Если вы еще не исправили ошибку, вы увидите такое сообщение:

app.ts:13:15 - error TS2345: Argument of type '"James"' is not assignable to parameter of type 'Person'.

Чтобы исправить ошибку, вместо строки передайте функции объект Person, который она ожидает. Затем перезапустите компиляцию. Вы получите рабочий файл JavaScript.

Команда ls выведет список файлов по текущему пути:

ls

Вы увидите исходный файл ts и новый файл js:

app.js
app.ts

Откройте файл app.js в VS Code:

"use strict";
exports.__esModule = true;
function welcomePerson(person) {
console.log("Hey " + person.firstName + " " + person.lastName);
return "Hey " + person.firstName + " " + person.lastName;
}
var james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);

Обратите внимание, что шаблонные литералы, являющиеся функцией ES6, были скомпилированы как простая конкатенация строк в ES5. Скоро мы вернемся к этому вопросу.

Чтобы убедиться, что все работает, вы можете запустить JavaScript непосредственно, используя Node в своем терминале:

node app.js

В консоли вы увидите имя:

Hey James Quick

2: Создание конфигурационного файла TypeScript

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

Чтобы создать этот файл, вы можете запустить следующую команду (подобную npm init):

tsc --init

Вы получите такой вывод:

message TS6071: Successfully created a tsconfig.json file.

Откройте новый файл tsconfig.json, и вы увидите множество различных опций, большинство из них будут закомментированы.

Возможно, вы заметили, что в файле есть опция “target”, которая имеет значение “es5”.  Измените ее значение на “es6”.

Внеся это изменение в tsconfig.json, запустите команду tsc в своем терминале:

tsc

Примечание: Здесь мы не указываем входной файл, хотя ранее делали это. Официальная документация проекта сообщает: если в командной строке указан входной файл, файлы tsconfig.json будут проигнорированы.

Теперь откройте только что созданный файл app.js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function welcomePerson(person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}
const james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);

Обратите внимание, что шаблонный литерал здесь сохраняет свой синтаксис, а это доказывает, что TypeScript был успешно скомпилирован в ES6.

Еще одна вещь, которую вы можете изменить – это место, где хранятся файлы JavaScript после создания. За это отвечает параметр “outDir”.

Попробуйте удалить “outDir”, а затем ввести его снова – при этом вы увидите список вариантов для автодополнения. VS Code предоставляет функцию IntelliSense, свойства которой вы можете установить в конфигурационном файле TypeScript.

Для примера можно изменить значение outDir с текущего каталога на каталог dist:

"outDir": "./dist"

После повторной компиляции (tsc) ваш выходной файл JavaScript будет находиться внутри каталога dist.

Вы можете использовать команды cd и ls в своем терминале, чтобы изучить содержимое каталога dist:

cd dist
ls

Вы увидите ваш скомпилированный файл JavaScript в новом каталоге:

app.js

3: TypeScript и современные фронтэнд фреймворки

За последние пару лет TypeScript стал довольно популярным языком. Вот несколько примеров его использования в современных фреймворках.

Angular CLI

Проекты Angular CLI поставляются с предварительной установкой TypeScript. Все настройки, включая проверку соблюдения стандартов кодирования, встроены в них по умолчанию. Создайте свой простой проект Angular CLI и внимательно изучите его, чтобы увидеть, как выглядит TypeScript в реальном приложении.

Create React App 2

Create React App не предоставляет TypeScript по умолчанию, но в последней версии его можно настроить таким образом. Если вам интересно узнать, как использовать TypeScript с Create React App, смотрите этот мануал.

Vue CLI 3

Vue CLI можно настроить на поддержку TypeScript при создании нового проекта. Больше информации об этом вы можете найти в Vue Docs.

Заключение

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