TypeScript install – Установка среды

TypeScript install – Установка среды

От автора: TypeScript install: все начинается с установки! Мы уже установили программную среду TypeScript онлайн, так что вы можете попробовать на практике все доступные примеры в режиме онлайн сразу после изучения теории. Эта опция позволит лучше освоить материал, который вы читаете, и даст возможность проверить результат с несколькими вариантами. Вы можете видоизменить любой пример и выполнить его онлайн.

Попробуйте выполнить следующий пример с помощью онлайн-компилятора на CodingGround:

var message:string = "Hello World" console.log(message)

При компиляции он сгенерирует такой JavaScript код:

//Сгенерирован посредством typescript 1.8.10
var message = "Hello World";
console.log(message);

В этом разделе мы поговорим о том, как установить TypeScript на платформе Windows. Мы также расскажем, как установить Brackets IDE.

TypeScript ─ Онлайн-опция Try it

Вы можете протестировать скрипты онлайн с помощью TypeScript на www.typescriptlang.org/Playground. Онлайн редактор показывает соответствующий JavaScript после его обработки компилятором.

TypeScript install – Установка среды

Попробуйте выполнить следующий пример, используя Playground.

var num:number = 12 console.log(num)

При компиляции он сгенерирует такой JavaScript код:

//Сгенерирован посредством 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 install – Установка среды

Компилятор TypeScript генерирует JavaScript версию переданного ему .ts файла. Другими словами, этот компилятор создает эквивалентный исходный код JavaScript из вложенного файла Typescript. Этот процесс называется транспиляцией.
Однако, компилятор не принимает сырые JavaScript файлы. Он работает только с .ts или .d.ts файлами.

Установка Node.js

Node.js – это межплатформенная среда выполнения JavaScript на стороне сервера с открытым кодом. Node.js работает с JavaScript без поддержки браузера. Для выполнения кода он использует движок Google V8 JavaScript. Вы можете загрузить исходный код Node.js или заранее подготовленную программу установки для вашей платформы. Node вы можете скачать здесь − https://nodejs.org/en/download

Установка на Windows

Чтобы установить Node.js на Windows, выполните следующие действия:

Шаг 1 – Скачайте и запустите .msi программу установки для Node.

TypeScript install – Установка среды

Шаг 2 – Чтобы убедиться, что установка прошла успешно, введите в окне терминала команду node –v.

TypeScript install – Установка среды

Шаг 3 – Введите нижеприведенную команду в окне терминала, чтобы установить TypeScript.

npm install -g typescript

TypeScript install – Установка среды

Установка на Mac OS X

Для того, чтобы установить node.js на Mac OS X, нужно скачать предварительно скомпилированный пакет, содержащий двоичные модули. Перейдите на http://nodejs.org/ и нажмите на кнопку установки, чтобы скачать самый новый пакет.

TypeScript install – Установка среды

Установите пакет из .dmg, следуя инструкциям мастера установки, который завершит установку как node, так и npm. npm – это диспетчер пакетов Node, который выполняет установку дополнительных пакетов для node.js.

TypeScript install – Установка среды

Установка на Linux

Перед тем, как устанавливать Node.js и NPM, вам нужно будет установить еще несколько средств поддержки зависимостей.

Ruby и GCC. Вам понадобится Ruby 1.8.6 или новее и GCC 4.2 или новее.

Homebrew. Homebrew – это диспетчер пакетов, первоначально спроектированный для Mac, но перенесенный на Linux как Linuxbrew. Больше о Homebrew вы можете узнать здесь — http://brew.sh/, о Linuxbrew здесь — http://brew.sh/linuxbrew

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

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 доступен на − https://code.visualstudio.com/

Установка на Windows

Шаг 1 − Скачайте Visual Studio Code для Windows.

TypeScript install – Установка среды

Шаг 2 – Кликните два раза VSCodeSetup.exe, чтобы запустить процесс установки. Это займет всего минуту.

TypeScript install – Установка среды

Шаг 3 – Скриншот IDE представлен ниже.

TypeScript install – Установка среды

Шаг 4 – Вы можете напрямую перейти к файлу, кликнув на него → открыть в командной строке. Похожим образом команда Открыть показывает файл в проводнике.

TypeScript install – Установка среды

Установка на Mac OS X

Смотрите руководство по установке Visual Studio Code на Mac OS X здесь: https://code.visualstudio.com/Docs/editor/setup

Установка на Linux

Смотрите руководство по установке Visual Studio Code на Linux здесь: https://code.visualstudio.com/Docs/editor/setup

Brackets

Brackets — это бесплатный редактор с открытым исходным кодом для веб-разработки, созданный Adobe Systems. Он доступен для Linux, Windows и Mac OS X. Brackets доступен на http://brackets.io/

TypeScript install – Установка среды

TypeScript расширение для Brackets

Brackets поддерживает расширения для дополнительного функционала посредством Extension Manager. Ниже приведена последовательность действий по установке расширения TypeScript.

После установки кликните на иконку менеджера расширений с правой стороны редактора. Введите в окне поиска typescript.

Установите плагины Brackets TSLint и Brackets TypeScript.

TypeScript install – Установка среды

Вы можете использовать командную строку / оболочку DOS в самом Brackets, добавив еще одного расширение Brackets Shell.

TypeScript install – Установка среды

Непосредственно после установки вы найдете иконку оболочки с правой стороны окна редактора. Нажав на нее, вы увидите окно оболочки, как показано ниже:

TypeScript install – Установка среды

Примечание – Typescript также доступен как плагин для сред выполнения Visual Studio 2012 и 2013 (https://www.typescriptlang.org/#Download).VS 2015 и выше включают плагин Typescript по умолчанию. Теперь мы готовы к работе!!!

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.