Как установить typescript

Download TypeScript

TypeScript can be installed through three installation routes depending on how you intend to use it: an npm module, a NuGet package or a Visual Studio Extension.

If you are using Node.js, you want the npm version. If you are using MSBuild in your project, you want the NuGet package or Visual Studio extension.

TypeScript in Your Project

Having TypeScript set up on a per-project basis lets you have many projects with many different versions of TypeScript, this keeps each project working consistently.

via npm

TypeScript is available as a package on the npm registry available as «typescript» .

You will need a copy of Node.js as an environment to run the package. Then you use a dependency manager like npm, yarn or pnpm to download TypeScript into your project.

npm install typescript —save-dev

All of these dependency managers support lockfiles, ensuring that everyone on your team is using the same version of the language. You can then run the TypeScript compiler using one of the following commands:

with Visual Studio

For most project types, you can get TypeScript as a package in Nuget for your MSBuild projects, for example an ASP.NET Core app.

• The Manage NuGet Packages window (which you can get to by right-clicking on a project node)
• The Nuget Package Manager Console (found in Tools > NuGet Package Manager > Package Manager Console) and then running:
  Install-Package Microsoft.TypeScript.MSBuild

For project types which don’t support Nuget, you can use the TypeScript Visual Studio extension. You can install the extension using Extensions > Manage Extensions in Visual Studio.

The examples below are for more advanced use cases.

Globally Installing TypeScript

It can be handy to have TypeScript available across all projects, often to test one-off ideas. Long-term, codebases should prefer a project-wide installation over a global install so that they can benefit from reproducible builds across different machines.

via npm

You can use npm to install TypeScript globally, this means that you can use the tsc command anywhere in your terminal.

To do this, run npm install -g typescript . This will install the latest version (currently 5.2 ).

via Visual Studio Marketplace

You can install TypeScript as a Visual Studio extension, which will allow you to use TypeScript across many MSBuild projects in Visual Studio.

Working with TypeScript-compatible transpilers

There are other tools which convert TypeScript files to JavaScript files. You might use these tools for speed or consistency with your existing build tooling.

Each of these projects handle the file conversion, but do not handle the type-checking aspects of the TypeScript compiler. So it’s likely that you will still need to keep the above TypeScript dependency around, and you will want to enable isolatedModules .

Babel

Babel is a very popular JavaScript transpiler which supports TypeScript files via the plugin @babel/plugin-transform-typescript.

swc

swc is a fast transpiler created in Rust which supports many of Babel’s features including TypeScript.

Sucrase

Sucrase is a Babel fork focused on speed for using in development mode. Sucrase supports TypeScript natively.

Next Steps

Get Started

• JS to TS
• New to Programming
• OOP to JS
• Functional to JS
• Installation

УСТАНОВКА TYPESCRIPT В VISUAL STUDIO CODE

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

Настройка среды

Есть несколько способов как работать с TypeScript. Сам TS (сокращенно от TypeScript) это препроцессор поэтому мы должны поставить какую-нибудь среду для работы с ним.

1. Самый простой способ «поиграться с typescript» — это перейти на сайтwww.typescriptlang.org/play/

2. Способ второй можно скачать абсолютно беспутную и мощную IDE ( intelligent development environment ) от Microsoft по ссылке https :// www . visualstudio . com / ru / название IDE — Visual Studio Community 2017 при этом TS плагин уже встроен в неё. Если вы уже пользуетесь например VS 2015 и плагина для работы с TS еще нет, то скачать его можно по ссылке под видеоhttps://www.microsoft.com/ru-ru/download/details.aspx?id=48593 или наберите в поисковой строке google -а «typescript for visual studio»

3. Способ третий можно использовать любой редактор кода. Обычно редакторы проще IDE и весят меньше, да и почти не нагружают вашу систему, поэтому редакторы иногда использовать удобнее. Я рекомендую использовать еще один мощный и бесплатный продукт опять же от Microsoft, который называется visual studio code. Данный редактор кроссплатформенный и доступен как для мак так и для линукс. Хорошо, что Бил Гейтс ушел на пенсию, друзья. Это побудило MS изменить политику в опенсорсную сторону. Ссылка для скачивания:https://code.visualstudio.com/ также найдете под видео. Установите visual studio code как обычно.

После установки откройте редактор visual studio code и перейдите во вкладку File-> open folder. В открывшемся диалоговом окне выберите расположение будущей папки и создайте её. Например, с именем “Test”, после чего нажмите ок.

В обозревателе решения наведите на папку Test и нажмите на иконку добавить файл.

Добавьте два файла index . html и App . ts ( app это сокращение от слова application )

Давайте сделаем красивую тему для файлов. (Внимание — это пункт вы можете пропустить.)

Мне не нравится бедный стиль фалов, которые выглядят сейчас довольно скучно. Давайте изменим стиль отображения файлов в обозревателе решения.

Для этого нажмите сочетание клавиш shift + ctrl + p и напечатайте “ icon ”

Обратите внимание из списка настроек мы видим надпись « Preferences : File Icon Theme »

Выберите этот пункт и нажмите “ enter ”. Появится еще один список где вы можете видеть доступные темы для файлов. Я люблю тему “ Seti ( Visual Studio Code )” – минимально и симпатично. Выберите её и нажмите “ enter ”.

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

Другой способ установить тему, более консервативный. Нажмите на File-> References -> settings

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

Настройка рабочего окружения TypeScript

Для начала работы с TypeScript нам потребуются следующие инструменты:

Node.js — среда, в которой будет работать компилятор TypeScript. Обратите внимание, что вам не нужно знать Node.js.

Компилятор TypeScript — модуль Node.js, который компилирует TypeScript в JavaScript. Вы можете установить модуль ts-node . Это средство выполнения TypeScript и REPL для Node.js.

Visual Studio Code — редактор кода, поддерживающий TypeScript. Также можно установить расширение для ускорения процесса разработки — Live Server — позволяет запустить локальный сервер разработки с функцией горячей перезагрузки.

Примечание: «Горячая перезагрузка» — это возможность внедрить обновленный исходный код в работающее приложение. Это означает, что вы можете увидеть результаты изменений вашего кода почти мгновенно, не дожидаясь, пока приложение перестроится или перезапустится.

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

Шаг №2: Скачайте версию Node.js, подходящую для вашей операционной системы.

Шаг №3: Запустите скачанный файл-установщик Node.js. Процесс установки довольно прост.

Шаг №4: Проверьте правильность установки, открыв терминал на macOS/Linux или командную строку в Windows, и введите команду node -v . Если отображается версия, которую вы скачали, значит Node.js успешно установлен.

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

Чтобы установить компилятор TypeScript, запустите терминал на macOS/Linux или командную строку в Windows, и введите следующую команду:

npm install — g typescript

После установки вы сможете ввести следующую команду, чтобы проверить текущую версию компилятора TypeScript:

tsc .cmd — v

Результатом должна быть версия TypeScript:

Обратите внимание, что ваша версия может быть «новее» представленной на скриншоте.

Если вы пользуетесь Windows и получили следующую ошибку:

‘tsc’ is not recognized as an internal or external command,
operable program or batch file.

… тогда нужно добавить путь C:\Users\AppData\Roaming\npm в переменную PATH .

Чтобы установить модуль ts-node глобально, выполните следующую команду в терминале на macOS/Linux или в командной строке Windows:

npm install — g ts — node

Установка Visual Studio Code

Шаг №2: Скачайте последнюю версию Visual Studio Code, подходящую для вашей ОС (Windows, macOS или Linux).

Шаг №3: Запустите скачанный файл-установщик. Процесс установки также довольно прост.

Шаг №4: Запустите Visual Studio Code. Нажмите на «Next Section ->» :

Затем нажмите на «Mark Done» :

Вы увидите интерфейс Visual Studio Code, как показано на следующем изображении:

Установка расширения Live Server в Visual Studio Code

Чтобы установить расширение Live Server, выполните следующие действия:

Шаг №1: Нажмите на вкладку «Extensions» .

Шаг №2: Введите в поиск live server .

Шаг №3: Нажмите кнопку «Install» , чтобы установить расширение.

Запуск сценариев TypeScript с помощью ts-node

TypeScript становится все популярнее, поскольку он является расширенным набором JavaScript и позволяет компилировать ваши файлы TypeScript в чистый JavaScript до того, как движок V8 сможет их понять. Также вы можете следить за изменениями файлов и автоматизировать компиляцию. Но иногда все эти функции не нужны – например, если вы просто хотите запустить свой скрипт и получить результаты. Здесь на помощь приходит ts-node, который позволяет с легкостью выполнять сценарии TypeScript.

Требования

• Последняя версия Node, установленная на вашем компьютере. Вы можете сделать это, следуя мануалу для вашего дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
• Базовое знакомство с npm. Чтобы узнать больше о работе с этим инструментом, прочтите руководство Управление модулями Node.js с помощью npm и package.json.
• Навыки работы с TypeScript. Если не знаете, с чего начать, прочитайте статью Как создать новый проект TypeScript.

1: Начало работы

Для начала нужно установить typescript и ts-node:

npm install typescript ts-node

Поскольку ts-node — это исполняемый файл, который можно запускать, вам не нужно ничего импортировать в ваши сценарии или добавлять в требования.

Если у вас еще нет проекта TypeScript, на котором вы могли бы потренироваться, вы можете просто использовать этот скрипт reptile.ts:

class Reptile < private reptiles: Array= [ 'Alligator', 'Crocodile', 'Chameleon', 'Komodo Dragon', 'Iguana', 'Salamander', 'Snake', 'Lizard', 'Python', 'Tortoise', 'Turtle', ]; shuffle(): void < for (let i = this.reptiles.length - 1; i >0; i--) < let j: number = Math.floor(Math.random() * (i + 1)); let temp: string = this.reptiles[i]; this.reptiles[i] = this.reptiles[j]; this.reptiles[j] = temp; >> random(count: number = 1, allowDupes?: boolean): Array  < let selected: Array= []; if (!allowDupes && count > this.reptiles.length) < throw new Error(`Can't ensure no dupes for that count`); >for (let i: number = 0; i < count; i++) < if (allowDupes) < // Dupes are cool, so let's just pull random reptiles selected.push(this.reptiles[ Math.floor(Math.random() * this.reptiles.length) ]); >else < // Dupes are no go, shuffle the array and grab a few this.shuffle(); selected = this.reptiles.slice(0, count); >> return selected; > > const reptile = new Reptile(); console.log(`With Dupes: $`); console.log(`And Without: $`);

Приведенный выше скрипт извлекает случайные значения из массива и возвращает два списка данных: в одном из них могут быть повторы, во втором – нет. Опять же, вы можете использовать любой другой скрипт, если хотите.

Убедитесь, что ваш скрипт возвращает значение и выводит что-то в консоль. Теперь, когда ваш сценарий TypeScript готов, вы можете перейти к его запуску.

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

Прежде чем приступить к работе с ts-node, давайте посмотрим, что происходит, когда вы запускаете сценарий TypeScript с помощью Node.

Запустите скрипт reptile.ts (или другой скрипт TypeScript) с помощью команды node:

После выполнения этой команды вы увидите сообщение об ошибке:

SyntaxError: Unexpected identifier

Сообщение SyntaxError указывает на переменную закрытого класса во второй строке reptile.ts.

Итак, использование Node для запуска скриптов TypeScript возвращает ошибку. Теперь, когда вы знаете, чего не следует делать и чего ожидать от Node, пора попробовать ts-node.

Используйте ts-node для запуска скрипта reptile.ts:

npx ts-node reptile.ts

Команда npx – это инструмент, который теперь поставляется с npm и позволяет запускать локальные для проекта двоичные файлы из командной строки.

Вы увидите такой вывод при запуске этого скрипта:

With Dupes: Komodo Dragon,Python,Tortoise,Iguana,Turtle,Salamander,Python,Python,Salamander,Snake And Without: Alligator,Iguana,Lizard,Snake,Tortoise,Chameleon,Crocodile,Komodo Dragon,Turtle,Salamander

Запуск reptile.ts через ts-node вернет два списка данных. Как видите, команда ts-node эффективно запускает сценарии TypeScript. Но есть способ сделать это еще быстрее.

3: Оптимизация ts-node

ts-node работает так: он берет ваш скрипт, выполняет базовую семантическую проверку, чтобы убедиться, что код не содержит ошибок, а затем компилирует TypeScript в JavaScript.

Это самый безопасный вариант. Но если вас не беспокоят ошибки, вы можете передать флаг -T или –transpileOnly. Тогда ts-node будет выполнять транспиляцию в JavaScript без проверки ошибок в коде TypeScript.

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

npx ts-node -T reptile.ts

Запуск этой команды даст вам тот же результат, что и этой:

npx ts-node reptile.ts

Но ts-node способен на большее – эта команда также предлагает поддержку TypeScript REPL.

4: Как работает TypeScript REPL

Еще одним дополнительным преимуществом ts-node является возможность использовать TypeScript REPL (read-evaluate-print loop), что работает аналогично команде node без каких-либо параметров.

Этот TypeScript REPL позволяет писать TypeScript прямо в командной строке, что очень удобно для быстрого тестирования чего-либо.

Чтобы получить доступ к TypeScript REPL, запустите ts-node без аргументов:

Теперь вы можете наслаждаться всеми преимуществами TypeScript прямо в своем любимом терминале.

Заключение

В этой статье вы узнали, что такое ts-node и как использовать его для запуска сценариев TypeScript. Также вы научились использовать TypeScript REPL с помощью ts-node.