Как настроить компилятор Typescript и среду редактирования с помощью Node.js

TypeScript быстро набирает популярность в экосистеме JavaScript. Там, где интерес к JavaScript относительно невелик, популярность TypeScript (по данным Google Trends) быстро растет. TypeScript предлагает нам важное применение типов данных, реализованное в компиляторе, для того, что в противном случае является кодом JavaScript. Это потенциально привлекательно для любого большого проекта, написанного на JavaScript. TypeScript прост в использовании на платформе Node.js, поэтому давайте посмотрим, как это сделать.

В этой статье мы увидим, как настроить правильную среду кодирования, в которой мы можем писать код на TypeScript на платформе Node.js. Поскольку набор инструментов Typescript написан на Node.js, конечно, ваш первый шаг - установить Node.js и npm (и yarn, если хотите). Вероятно, у вас уже установлен Node.js, но если вам нужно узнать об установке Node.js, перейдите по ссылке https://nodejs.org/en/download/package-manager/. Мы будем использовать Node.js версии 10. x в этой книге, поскольку он поддерживает модули ES6.

Это отрывок из Краткого руководства по использованию Typescript и TypeORM в приложениях Node.js.

Это часть серии статей: Выбор между TypeScript и JavaScript: технология, популярность

Вы можете узнать о Typescript на его веб-сайте: https://www.typescriptlang.org/

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

$ npm install -g ts-node typescript

Пакет машинописного текста рекомендуется установить глобально (опция -g). Он устанавливает команды tsc и ts-node, которые являются компилятором Typescript. Компиляторы генерируют исходный код JavaScript из файлов Typescript. Разумеется, будет выполняться JavaScript, который будет развернут в браузерах или в виде модулей Node.js.

Хотя официальные инструкции предназначены для глобальной установки инструментов компилятора, давайте рассмотрим локальную установку. Многие из нас предпочитают явно объявленные зависимости в package.json, а не полагаться на то, что не нужно забывать устанавливать инструменты глобально. С явно объявленными зависимостями инструкции просто npm install, и все будет установлено. Другой подход требует, чтобы все выполнили несколько необходимых шагов настройки, а что, если они сделают это неправильно?

Для этого требуется два шага, первый из которых - добавить ./node_modules/.bin к одной PATH переменной следующим образом:

$ export PATH="./node_modules/.bin:${PATH}"

Это небольшой трюк, позволяющий настроить оболочку для поиска установленных команд в каталоге node_modules в дополнение к обычным командам в PATH (например, /usr/bin).

Второй шаг - установить такой пакет:

$ npm install typescript ts-node --save-dev

Это локальная установка, и при использовании --save-dev зависимость добавляется в devDependencies раздел package.json. devDependencies не устанавливаются, когда npm install запущен в производственном режиме, что означает, что либо установлен флаг --production, либо переменная среды NODE_ENV имеет значение production.

В любом случае, вы установили TypeScript, теперь вы можете ввести это, чтобы увидеть инструкции по использованию:

$ tsc --help

Еще один очень полезный инструмент - это ts-node, вариант команды node, которая напрямую выполняет исходный код Typescript. См .: https://www.npmjs.com/package/ts-node

Поддержка IDE для TypeScript

Некоторые IDE поддерживают TypeScript.

Visual Studio: https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.typescript-341-vs2017
Код Visual Studio: https://code.visualstudio.com/Docs/languages/typescript
Возвышенный текст: https://github.com/Microsoft/TypeScript-Sublime-Plugin
Атом: https://atom.io/packages/atom-typescript
Затмение: https://github.com/palantir/eclipse-typescript
Emacs: https://github.com/ananthakumaran/tide
VIM: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support#vim
Другое: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support

Инициализация проекта Node.js с поддержкой TypeScript

Собственно, мы немного забегали вперед. Очевидно, что если мы устанавливаем пакеты с помощью --save-dev, у нас должен быть настроен проект Node.js. Итак ... давайте начнем сначала.

Инициализируйте проект Node.js:

$ mkdir project-name
$ cd project-name
$ npm init    (or yarn init)
... answer questions
$ npm install typescript ts-node --save-dev

Это больше походит на это.

Еще одна необходимая часть - это файл конфигурации TypeScript, tsconfig.json.

{
    "compilerOptions": {
        "lib": [ "es5", "es6", "es7",
                 "es2015", "es2016",
                 "es2017", "es2018",
                 "esnext" ],
        "target": "es2017",
        "module": "CommonJS",
        "moduleResolution": "Node"
    }
}

Эта конфигурация работает для современных версий Node.js. Начиная с версии 10.x у нас есть все функции ES2015 / 2016/2017/2018, которые мы могли бы пожелать. Поэтому, когда TypeScript компилирует наш код, он должен использовать эти функции.

Это говорит о включении поддержки спецификаций ES5 / ES6 / etc, которые реализует Node.js 10.x. Он выводит код, используя спецификацию ES2017, опять же, это то, что доступно в Node.js 10.x. При использовании es2017 в качестве целевой функции async / await компилируются с использованием ключевых слов async / await, а не с использованием функций генератора и ключевого слова yield.

Флаг module говорит о генерации кода с использованием формата CommonJS. Это традиционный формат модуля Node.js.

Флаг moduleResolution говорит об использовании алгоритма Node.js для поиска модулей. Поскольку мы ищем код для Node.js, нам нужен TypeScript для этого.

Параметры компилятора задокументированы на веб-сайте TypeScript: https://www.typescriptlang.org/docs/handbook/compiler-options.html

Есть много других опций, которые могут быть полезны, большинство из них включает дополнительные проверки качества кода.

Определения типов Node.js для TypeScript

Очень крутая и самая интересная особенность среды TypeScript - это определения типов, доступные как в среде выполнения TypeScript, так и дополнительные определения, доступные через проект Определенно типизированный. (Http://definentytyped.org/)

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

Это означает, что библиотека типов для данного модуля помогает компилятору TypeScript знать объекты и функции, параметры функций и многое другое для этого модуля.

TypeScript включает возможность реализовать файл декларации, цель которого - декларировать вещи. Это то, что делает проект «Определенно типизированный» - создает четко определенные файлы объявлений.

Добавление определений с определенным типом для Node.js обеспечивает поддержку некоторых функций Node.js.

$ npm install --save-dev @types/node

Это приводит к появлению ряда полезных определений Node.js. Вы ничего не объявляете в своем коде. Вместо этого инструменты компилятора TypeScript автоматически выбирают определения типов, которые вы импортировали.

Проект «Определенно типизированный» имеет большую библиотеку определений типов, а на веб-сайте есть небольшая поисковая машина для поиска доступных. Только не ждите, что какая-либо документация поможет вам понять, что к чему.

Создание файлов объявлений для JavaScript, созданных TypeScript

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

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

К сожалению, документация по файлам объявлений не очень помогает новичку, желающему создать эти файлы.

К счастью, компилятор TypeScript может создавать файлы объявлений.

В tsconfig.json добавьте эти объявления:

"declaration": true,
"declarationMap": true,
"inlineSourceMap": true,
"inlineSources": true,

Технически все, что требуется, - это параметр declaration, и компилятор TypeScript сгенерирует файл .d.ts вместе с файлом .js.

Другие настройки добавляют файлы Source Map, которые являются своего рода индексом, в исходные файлы, используемые при генерации кода JavaScript. При использовании встроенной исходной карты данные исходной карты представлены в виде комментария в конце файла.

Что мы узнали о TypeScript?

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

Проект Определенно типизированный является сопутствующим проектом TypeScript. Язык TypeScript поддерживает так называемые файлы объявлений, которые информируют TypeScript о типах, используемых в модуле JavaScript. Компилятор TypeScript может сгенерировать для вас файлы объявлений, как мы только что узнали, или вы можете реализовать свои собственные.

Проект Определенно типизированный - это набор четко определенных файлов объявлений для проектов JavaScript, которые не реализуют свои собственные.

Эта статья изначально была опубликована на TechSparx.