В следующем руководстве мы узнаем, как создать проект TypeScript с помощью Visual Studio Code с менеджером пакетов Node (npm).

Что вам следует знать?
Основные знания в области программирования, использования Visual Studio Code (VS Code) и выполнения команд оболочки.

Что вам нужно?
Visual Studio Code — популярный редактор исходного кода с множеством плагинов
Node.js — интерпретатор JavaScript для запуска кода JavaScript на сервере

Что такое TypeScript?
TypeScript — это надмножество языка JavaScript. Подробнее о TypeScript вы можете прочитать на официальных страницах. https://www.typescriptlang.org

1. Установите код Visual Studio

Мы начнем с установки кода Visual Studio (VS Code). Скачать установочный пакет можно с официальной страницы (https://code.visualstudio.com).

VS Code доступен для всех популярных платформ (Mac OS, Windows и Linux).

Список сочетаний клавиш доступен здесь Key Bindings for Visual Studio Code или версия для печати:

2. Установите Node.js

Далее нам нужно установить исполняемый файл Node.js. С установкой Node.js поставляется также диспетчер пакетов Node (npm), который значительно упрощает установку дополнительных пакетов Node.js. Установки для разных платформ доступны на официальной странице Node.js. https://nodejs.org

3. Создайте папку проекта

С помощью командной строки создайте новую папку, в которую вы добавите файлы проекта.

$ mkdir ts-project

4. Откройте папку в Visual Studio Code

Вы можете запустить VS Code и перейти к вновь созданной папке или запустить VS Code из командной строки.

$ cd ts-project $ code .

5. Откройте командную строку в VS Code

Мы будем использовать инструменты командной строки для компиляции исходного кода TypeScript и запуска наших скриптов. Вы можете открыть новое окно терминала, выбрав Терминал › Новый терминал в верхнем меню.

6. Установите компилятор TypeScript

На этом этапе мы будем использовать npm для установки компилятора TypeScript. Мы будем использовать компилятор из командной строки, поэтому установим его глобально (обратите внимание на флаг -g). Таким образом, у нас будет компилятор TypeScript, доступный из командной строки для всей системы.

$ npm install typescript -g

Для VS Code вы можете следовать подробным инструкциям по использованию компилятора TypeScript в официальной документации для VS Code. https://code.visualstudio.com/docs/languages/typescript

На данный момент мы готовы начать кодирование.

7. Создайте конфигурацию компилятора TypeScript

Прежде чем мы сможем преобразовать исходный код TypeScript в JavaScript, нам нужно предоставить некоторые базовые настройки компилятору TypeScript. В корне папки проекта мы создадим новый файл с именем tsconfig.json.

{ 
  "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "declaration": true, 
    "sourceMap": true, 
    "outDir": "dist", 
    "strict": true 
  }, 
  "include": ["src/**/*"] 
}

Мы говорим компилятору скомпилировать наш код TypeScript в скрипты, совместимые со спецификацией JavaScript Ecma 5. С настройкой «модуль» мы указали, что наш код будет работать на сервере (commonjs), а не в браузере. Кроме того, компилятор создаст исходную карту и файлы объявлений.

Мы настроили включить все в папку src (включая атрибут) и вывести скомпилированные файлы в папку dist.

8. Привет, мир

Теперь создадим простую программу на TypeScript, которая будет писать в системный поток out. Создайте новый файл startup.ts в папке src.

class Startup { 
  
  public static main():number {
   console.log('Hello World'); 
   return 0; 
  } 
}
Startup.main();

Структура папок нашего проекта должна выглядеть так:

9. Скомпилируйте и запустите

Теперь мы можем скомпилировать исходный код TypeScript с помощью командной строки.

$ tsc

Чтобы просмотреть дополнительные параметры компилятора, нажмите Параметры компилятора TypeScript.

Мы видим, что создана новая папка dist, содержащая три файла: startup.d.ts, startup.js.map, и startup.js.

Используя node.js, мы можем запустить скомпилированный скрипт.

$ node dist\startup.js

Вывод

В этом руководстве мы создали базовый проект TypeScript. Мы скомпилировали и запустили простой скрипт с Node.js.

Это упрощенное использование TypeScript. Проекты, такие как Angular, имеют сложную систему сборки, которая скрывает простоту голого TypeScript.

Первоначально опубликовано на plavc.wordpress.com 3 ноября 2018 г.