Настройка и работа с TypeScript

TypeScript — это надстройка над языком JavaScript, которая компилируется в обычный JS-код, выполняемый в браузере, в Node.js или в другом окружении JavaScript, которое поддерживает стандарт ECMAScript 6.

Получение файлов конфигураций

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

  1. Установите утилиту wasaby-cli.

  2. Настройте скрипты автоматизации в файле package.json, добавив следующие строки в раздел scripts:

    "scripts": {
       ...
       "build:prepare": "wasaby-cli --tasks=prepare",
       "compile": "saby-typescript --compiler",
       "lint": "saby-typescript --lint"
    }
    В данном примере:

    • build:prepare производит подготовку окружения TypeScript;
    • compile запускает компиляцию TypeScript файлов;
    • lint запускает проверку TypeScript файлов через линтер;
  3. Запустите подготовку окружения через скрипт build:prepare:

    npm run build:prepare
    Скрипт установит рекомендуемые конфигурации комилятора TypeScript и линтера TSLint, добавив в корень проекта необходимые файлы.

  4. Добавьте файл c именем .gitignore в корень вашего проекта — в нем нужно прописать все файлы и каталоги, которые появились в проекте в результате подготовки окружения (они не нужны в вашем git-репозитории). Для этого добавьте в него следующие строки:

    /tsconfig.json
    /tslib.js
    /tslint.json

Работа с локальным стендом

Вы можете указать параметры baseUrl и outDir в файле tsconfig.json и при работе с локальным стендом. Это даст вам следующие возможности:

  • IDE будет "видеть" все интерфейсные модули приложения, которое у вас развернуто. Будут работать подсказки и переходы.
  • Вы сможете выполнять компиляцию TS средствами IDE (актаульно только для режима отладки)

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

"compilerOptions": {
    "baseUrl": "c:/stands/online-201000/build-ui/resources",
    "outDir": "c:/stands/online-201000/build-ui/resources",
    //...
}

Tips and Tricks

Запуск скриптов

Для запуска скриптов compile и lint используйте команды

npm run compile

и

npm run lint

соответственно.

Зависимости TS-модуля и результат компиляции

Зачастую разработчики в своих ts-файлах импортируют внешние зависимости.

Иногда зависимости не попадают в результат компиляции, это происходит в двух случаях:

  • Когда подключенная зависимость никак не используется (при компиляции файла импорт этой зависимости пропадёт);
  • Когда подключенная зависимость используется только в декларациях типов (все декларации таких типов будут удалены при компиляции, а зависимости, используемые только для объявления типов, также не попадут в результат компиляции).

Пример (зависимость будет удалена):

import {Record} from 'Types/type';
export function handleRecord(rec: Record} {...}

В данном примере Record используется только для объявления типа аргумента, поэтому компилятор удалит такую зависимость.

Пример (зависимость попадет в результат компиляции):

import {Record} from 'Types/type';
export function createRecord() {
    return new Record();
}

В этом примере Record используется для создания экземпляра во время выполнения кода приложения, поэтому компилятор оставить зависмость от модуля, из которого был получен Record.

Импорт AMD-модуля в TS-модуль

Сейчас Платформа находится в процессе перевода на TypeScript, в связи с этим часть модулей еще не переписана и, если существует необходимость притянуть из платформы еще не переписанный модуль, используйте специальный синтаксис import для подключения AMD-модулей:

import MyModule = require('NameOf/Some/Amd/Module');

Динамические зависимости в TS-модуле

Иногда в силу ряда причин разработчик не может подключить сразу все зависимости модуля статически. Есть возможность подключать некоторые зависимости динамически, например при наступлении какого-либо пользовательского сценария.

Для этого следует использовать dynamic imports, которые описаны в стандарте ES6:

import('Types/collection').then((collection) => {
   let list = new collection.List();
   //Do something with list
}).catch((err) => {
   //Do something with err
});

Зависимости TS-модуля для side effect

Существуют задачи импортировать что-то для создания side effect’а, например для загрузки стилей через css-плагин.

Для решения таких задач используйте синтаксис side effects:

import 'css!Some/Module';

См. также