От автора: TypeScript install: все начинается с установки! Мы уже установили программную среду TypeScript онлайн, так что вы можете попробовать на практике все доступные примеры в режиме онлайн сразу после изучения теории. Эта опция позволит лучше освоить материал, который вы читаете, и даст возможность проверить результат с несколькими вариантами. Вы можете видоизменить любой пример и выполнить его онлайн.
Попробуйте выполнить следующий пример с помощью онлайн-компилятора на CodingGround:
1 2 |
var message:string = "Hello World" console.log(message) |
При компиляции он сгенерирует такой JavaScript код:
1 2 3 |
//Сгенерирован посредством typescript 1.8.10 var message = "Hello World"; console.log(message); |
В этом разделе мы поговорим о том, как установить TypeScript на платформе Windows. Мы также расскажем, как установить Brackets IDE.
TypeScript ─ Онлайн-опция Try it
Вы можете протестировать скрипты онлайн с помощью TypeScript на www.typescriptlang.org/Playground. Онлайн редактор показывает соответствующий JavaScript после его обработки компилятором.
Попробуйте выполнить следующий пример, используя Playground.
1 2 |
var num:number = 12 console.log(num) |
При компиляции он сгенерирует такой JavaScript код:
1 2 3 |
//Сгенерирован посредством typescript 1.8.10 var num = 12; console.log(num); |
Результат вышеуказанной программы выглядит так: 12
Установка локальной среды
Typescript – это технология с открытым исходным кодом. Она работает с любым браузером, хостингом и любой ОС. Чтобы написать и протестировать программу Typescript, вам понадобятся следующие инструменты:
Текстовый редактор
Текстовый редактор поможет вам написать исходный код. В качестве примеров текстовых редакторов можно привести Windows Notepad, Notepad++, Emacs, vim или vi и т.д. Выбор редактора зависит от операционной системы. Исходным файлам обычно задают имена с расширением .ts
Компилятор TypeScript
Компилятор TypeScript– это сам .ts файл, скомпилированный в файл JavaScript (.js). TSC (TypeScript компилятор) – это компилятор типа «исходный код в исходный код» (транскомпилятор / транспилятор).
Компилятор TypeScript генерирует JavaScript версию переданного ему .ts файла. Другими словами, этот компилятор создает эквивалентный исходный код JavaScript из вложенного файла Typescript. Этот процесс называется транспиляцией.
Однако, компилятор не принимает сырые JavaScript файлы. Он работает только с .ts или .d.ts файлами.
Установка Node.js
Node.js – это межплатформенная среда выполнения JavaScript на стороне сервера с открытым кодом. Node.js работает с JavaScript без поддержки браузера. Для выполнения кода он использует движок Google V8 JavaScript. Вы можете загрузить исходный код Node.js или заранее подготовленную программу установки для вашей платформы. Node вы можете скачать здесь − //nodejs.org/en/download
Установка на Windows
Чтобы установить Node.js на Windows, выполните следующие действия:
Шаг 1 – Скачайте и запустите .msi программу установки для Node.
Шаг 2 – Чтобы убедиться, что установка прошла успешно, введите в окне терминала команду node –v.
Шаг 3 – Введите нижеприведенную команду в окне терминала, чтобы установить TypeScript.
1 |
npm install -g typescript |
Установка на Mac OS X
Для того, чтобы установить node.js на Mac OS X, нужно скачать предварительно скомпилированный пакет, содержащий двоичные модули. Перейдите на //nodejs.org/ и нажмите на кнопку установки, чтобы скачать самый новый пакет.
Установите пакет из .dmg, следуя инструкциям мастера установки, который завершит установку как node, так и npm. npm – это диспетчер пакетов Node, который выполняет установку дополнительных пакетов для node.js.
Установка на Linux
Перед тем, как устанавливать Node.js и NPM, вам нужно будет установить еще несколько средств поддержки зависимостей.
Ruby и GCC. Вам понадобится Ruby 1.8.6 или новее и GCC 4.2 или новее.
Homebrew. Homebrew – это диспетчер пакетов, первоначально спроектированный для Mac, но перенесенный на Linux как Linuxbrew. Больше о Homebrew вы можете узнать здесь — //brew.sh/, о Linuxbrew здесь — //brew.sh/linuxbrew
После того, как вы установили средства поддержки зависимостей, можно установить Node.js, используя следующую команду в терминале:
1 |
brew install node. |
Поддержка IDE
Typescript может быть построен во многих средах разработки, например в Visual Studio, Sublime Text 2, WebStorm/PHPStorm, Eclipse, Brackets и т.д. Мы рассмотрим IDE Visual Studio Code и Brackets. Здесь был использован Visual Studio Code (платформа Windows).
Visual Studio Code
Это IDE с открытым исходным кодом от Visual Studio. Она доступна для Mac OS X, Linux и Windows. VScode доступен на − //code.visualstudio.com/
Установка на Windows
Шаг 1 − Скачайте Visual Studio Code для Windows.
Шаг 2 – Кликните два раза VSCodeSetup.exe, чтобы запустить процесс установки. Это займет всего минуту.
Шаг 3 – Скриншот IDE представлен ниже.
Шаг 4 – Вы можете напрямую перейти к файлу, кликнув на него → открыть в командной строке. Похожим образом команда Открыть показывает файл в проводнике.
Установка на Mac OS X
Смотрите руководство по установке Visual Studio Code на Mac OS X здесь: //code.visualstudio.com/Docs/editor/setup
Установка на Linux
Смотрите руководство по установке Visual Studio Code на Linux здесь: //code.visualstudio.com/Docs/editor/setup
Brackets
Brackets — это бесплатный редактор с открытым исходным кодом для веб-разработки, созданный Adobe Systems. Он доступен для Linux, Windows и Mac OS X. Brackets доступен на //brackets.io/
TypeScript расширение для Brackets
Brackets поддерживает расширения для дополнительного функционала посредством Extension Manager. Ниже приведена последовательность действий по установке расширения TypeScript.
После установки кликните на иконку менеджера расширений с правой стороны редактора. Введите в окне поиска typescript.
Установите плагины Brackets TSLint и Brackets TypeScript.
Вы можете использовать командную строку / оболочку DOS в самом Brackets, добавив еще одного расширение Brackets Shell.
Непосредственно после установки вы найдете иконку оболочки с правой стороны окна редактора. Нажав на нее, вы увидите окно оболочки, как показано ниже:
Примечание – Typescript также доступен как плагин для сред выполнения Visual Studio 2012 и 2013 (//www.typescriptlang.org/#Download).VS 2015 и выше включают плагин Typescript по умолчанию. Теперь мы готовы к работе!!!
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.