Как запустить typescript

Как установить и запустить Typescript в Windows — руководство для начинающих

Typescript не работает в браузере. Он должен быть скомпилирован в обычный Javascript и находится внутри файлов с расширением .ts . Если вы хотите сначала освоиться с синтаксисом и избежать установки, вы можете использовать его онлайн, на игровой площадке, которую можно найти здесь: https://www.typescriptlang.org/play/. Способ его работы заключается в том, что вы пишете код Typescript на левой стороне и видите код, который он компилирует, на правой стороне (это работает на любой ОС, это не специфично для Windows).

Если вы хотите иметь его на своем компьютере и использовать в любое время, вам нужно будет установить его. Лично я использую его с кодом Visual Studio в качестве расширения, но когда я впервые начал изучать синтаксис, он был установлен через npm (диспетчер пакетов узла).

Шаги для установки Typescript на компьютере с Windows, используя npm:

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

Если вам не нужно установить другую версию (например, если вы делаете учебник, а преподаватель говорит вам установить конкретную версию), я бы посоветовал установить последнюю версию. Вы можете найти его здесь: https://nodejs.org/en/. Используйте вариант LTS (поддержка длительного времени). Если вы хотите проверить, был ли успешно установлен узел, откройте cmd и введите node -v . Если все в порядке, вы должны увидеть что-то вроде v12.16.1 (это текущая версия, которую я использую).

2. Установите Typescript

Запустите следующую команду в cmd.
npm install -g typescript установит Typescript глобально. Точно так же, если вы хотите проверить, установлен ли Typescript, введите tsc-v в cmd, и вы должны получить обратно что-то вроде Version 3.8.3 (возможно, что вы будете использовать другую версию, поэтому вы получите другие номера).

3. Создайте файл с расширением .ts

На вашем компьютере создайте файл с расширением .ts . Я назвал свой firstTest.ts . Откройте его в вашем редакторе (для простоты я использую Notepad ++) и напишите в нем любой Javascript, который вы хотите. Я написал:

4. Создайте файл .js из вашего .ts

Помните, что Typescript нельзя использовать как Javascript. Сначала его нужно скомпилировать (перевести) на обычный Js. В cmd перейдите в папку, содержащую ваш файл .ts , и выполните следующую команду tsc filename.ts . Это создаст в той же папке новый файл с тем же именем, но с расширением .js . Это шаг, на котором происходит «перевод». То, что содержит недавно созданный js-файл, — это в основном весь написанный нами Typescript, только скомпилированный в Javascript. В моем случае код Javascript практически идентичен, потому что я не использовал ни одну из функций letTypescript (хотя обратите внимание, что let ES6 была преобразована в var ).

5. Запустите свой код Javascript, используя Node. Чтобы увидеть результат вашего кода, мы можем запустить его с помощью Node. Итак, внутри cmd напишите node filename.ts . В моем случае это будет node firstTest.js . Результат, который я получил, был 5 .

Теперь давайте воспользуемся очень простым кодом Typescript. Мы собираемся явно установить наши две переменные, чтобы иметь номер типа. Не обращайте внимания на синтаксис, пример приведен только для того, чтобы показать вам, как выглядит код Javascript в конце.

Обратите внимание, что в файле .js типы не отображаются, и let был преобразован в var .

Следует иметь в виду, что каждый раз, когда вы вносите изменения в свой файл .ts , вы должны запускать Typescript, чтобы изменения также появлялись в файле .js . Для меньшего набора текста вы можете объединить эти две команды следующим образом tsc filename.ts && node filename.js (имена расширений могут не упоминаться и наш код будет выглядеть так tsc filename && node filename ).

Начало работы с TypeScript

В 2012 году компания Microsoft на основе JavaScript разработала TypeScript, язык программирования со статической типизацией, благодаря которой приложение становится более стабильным и отказоустойчивым. Ошибки, связанные с типами данных выявляются на этапе компиляции, а не в процессе работы программы.

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

Вот несколько операций с разными приведениями типов, которые позволяет JavaScript. Такое поведение нередко является причиной ошибок в логике приложения.

1 + ‘2’; // ’12’ 4 * ‘7’; // 28 5 + true; // 6 false — 4; // -4

Коротко о главных особенностях TypeScript:

• Позволяет задавать строгие типы данных к каждому объекту
• Позволяет описывать классы, модули и интерфейсы.
• Позволяет настраивать модификаторы доступа: public, protected и private.
• Позволяет работать с обобщенными функциями, классами и интерфейсами (generics)
• Обратно совместим с JavaScript. Это дает возможность писать комбинированный код.

Попробуем на практике оценить преимущества языка.

Подготовка

Установить TypeScript можно с помощью npm — менеджера пакетов для Node.js. После установки Node.js с официального сайта, npm в системе появится автоматически.

Выполним глобальную установку TypeScript, воспользовавшись командой в консоли:

npm install -g typescript

Идея

В качестве примера напишем простую функцию, которая будет выводить в консоль сообщения. Что должна уметь функция:

• Выводить сообщение
• Прикладывать к сообщению любые данные, которые надо залогировать
• [Опционально] Добавлять к сообщению префикс, чтобы понимать какой модуль выводит лог.
• [Опционально] Раскрашивать сообщение в зависимости от типа: log (обычное сообщение), info (уведомление), warn (предупреждение), error (ошибка).

_log(<message>, <arg>, <prefix>, <type>);
_log(‘Here is our user id:’, 123);
_log(‘Here is our user id:’, 123, ‘User Profile’, ‘info’);

Пишем приложение

Создадим новый проект, а в нем файл, logger.ts.

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

1. message — тип String
2. arg — данные для логирования, любого типа. Для таких случаев в TypeScript есть тип Any.
3. prefix — тип String.
4. type — стиль сообщения. Оформлять логи можно любыми способами, но мы для простоты будем использовать готовые методы Console API: log, info, warn, error. Чтобы защититься от передачи любых других типов, нужно строго перечислить допустимые значения. Для этого создадим собственный тип данных ConsoleMethod.

type ConsoleMethod = ‘log’ | ‘info’ | ‘warn’ | ‘error’; function _log(message: string, args: any, prefix: string, type: ConsoleMethod = ‘log’): void < prefix = prefix ? prefix + ': ' : ''; message = prefix + message; console[type](message, args); >// Пример вызова _log(‘Test logging message’, 123, ‘Logger’, ‘info’);

Скомпилируем .ts в .js. Для этого в директории проекта выполним команду:

tsc logger.ts

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

_log(‘Test logging message’, 123, ‘Logger’, ‘debug’);

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

Компиляция: watch mode

Чтобы каждый раз не запускать компиляцию вручную, можно активировать автоматическую перекомпиляцию при изменениях файлов:

tsc *.ts —watch

Вывод

Мы установили TypeScript, научились компилировать его в JavaScript и написали первое приложение. В следующих статьях расскажем о модификаторах доступа, поработаем с модулями и интерфейсами классов.

If you like this article, share a link with your friends

Read more

We talk about interesting technologies and share our experience of using them.

Компиляция кода TypeScript (Node.js)

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Используйте пакет npm TypeScript, чтобы добавить поддержку TypeScript в проекты на основе системы проектов JavaScript (JSPS) или .esproj. Начиная с Visual Studio 2019, рекомендуется использовать пакет npm вместо пакета SDK TypeScript. Пакет npm TypeScript обеспечивает большую переносимость на разных платформах и средах.

Для проектов ASP.NET Core используйте пакет NuGet вместо npm для добавления поддержки TypeScript.

Добавление поддержки TypeScript с использованием npm

Пакет npm TypeScript позволяет включить поддержку TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.

1. Следуя инструкциям, установите рабочую нагрузку разработки Node.js и среду выполнения Node.js. Для простой интеграции с Visual Studio создайте проект с помощью одного из шаблонов Node.js для TypeScript, например шаблона пустого веб-приложения Node.js. Либо используйте шаблон Node.js для JavaScript, предоставляемый в Visual Studio, и следуйте инструкциям в этом разделе. Или используйте проект Открытая папка
2. Установите пакет npm для TypeScript, если он еще не включен в ваш проект. В Обозревателе решений (область справа) откройте package.json в корневом каталоге проекта. Перечисленные пакеты соответствуют пакетам в узле npm в Обозревателе решений. Дополнительные сведения см. в разделе Управление пакетами npm. Установить пакет npm TypeScript для проекта Node.js можно с помощью командной строки или IDE. Чтобы установить пакет с помощью IDE, щелкните правой кнопкой мыши узел npm в Обозревателе решений, выберите Установить новый пакет npm, найдите TypeScript и установите пакет. Выберите параметр npm в окне Вывод, чтобы видеть ход установки пакета. Установленный пакет появится в узле npm в Обозревателе решений.
3. Если пакет не включен в проект, добавьте файл с tsconfig.json в корневой каталог проекта. Для этого щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите Файл конфигурации TypeScript JSON, а затем нажмите кнопку Добавить. Если вы не видите все шаблоны элементов, выберите «Показать все шаблоны» и выберите шаблон элемента. Visual Studio добавит файл tsconfig.json в корневую папку проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.
4. Откройте файл tsconfig.json и обновите его, задав необходимые параметры компилятора. Ниже приведен пример простого файла tsconfig.json.

< "compilerOptions": < "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5", "outDir": "dist" >, "include": [ "scripts/**/*" ] > 

• include указывает компилятору, где искать файлы TypeScript (*.ts).
• Параметр outDir указывает выходную папку для обычных файлов JavaScript, которые преобразуются компилятором TypeScript.
• Параметр sourceMap указывает, нужно ли компилятору создать файлы sourceMap.

В приведенной выше конфигурации представлен пример базовой конфигурации TypeScript. Сведения о других параметрах см. в разделе о файле tsconfig.json.

Сборка приложения

1. В проект добавьте файлы TypeScript (.ts) или TypeScript JSX (.tsx), а затем добавьте код TypeScript. Ниже приведен простой пример TypeScript:

let message: string = 'Hello World'; console.log(message); 

"scripts": < "build": "tsc --build", "clean": "tsc --build --clean" >, 

Для сборки с помощью стороннего средства, например webpack, можно добавить в файл package.json скрипт сборки для командной строки:

"scripts":

Пример использования webpack с React и файла конфигурации webpack см. в статье Учебник. Создание приложения Node.js и React в Visual Studio.

Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.js.

Примечание. При настройке сторонних средств в проектах Node.js не используются пути, заданные в разделе Средства>Параметры>Проекты и решения>Управление веб-пакетами>Внешние веб-инструменты. Эти параметры используются для проектов других типов.

Выполнение приложения

Инструкции по запуску приложения после его компиляции см. в разделе Создание приложения Node.js и Express.

Автоматизация задач сборки

Для автоматизации задач сторонних средств, таких как npm и webpack, вы можете использовать обозреватель запускателя задач в Visual Studio.

• Запускатель задач npm включает поддержку скриптов npm, определенных файле package.json. Поддерживает YARN.
• Запускатель задач webpack включает поддержку webpack.

Как запустить typescript

Чтобы начать работать с TypeScript, установим необходимый инструментарий. Установить TypeScript можно двумя способами: через пакетный менеджер NPM или как плагин к Visual Studio

Установка через NPM

Для установки через NPM вначале естественно необходимо установить Node.js (если он ранее не был установлен). После установки Node.js необходимо запустить следующую команду в командной строке (Windows) или терминале (Linux):

npm install -g typescript

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

sudo npm install -g typescript

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

npm update -g typescript

Для проверки версии необходимо ввести команду

tsc -v

Компиляция приложения

Для начала создадим каталог приложения. В моем случае это будут папка по пути C:/typescript . В каталог добавим файл index.html . Откроем этот файл в любом текстовом редакторе и определим в нем следующий код:

Это обычный файл html, в котором определен пустой заголовок — элемент — в него мы будем выводить некоторое содержимое. И также на веб-странице подключается файл app.js .

Теперь в том же каталоге создадим файл app.ts . Причем именно app.ts , а не app.js, то есть файл кода typescrypt. Это также обычный текстовый файл, который имеет расширение .ts . И в app.ts определим следующее содержание:

class User < name : string; constructor(_name:string)< this.name = _name; >> const tom : User = new User("Том"); const header = this.document.getElementById("header"); header.innerHTML = "Привет " + tom.name;

Что здесь происходит? Сначала определяет класс User — шаблон данных, которые будут использоваться на веб-странице. Этот класс имеет поле name , которое представляет тип string , то есть строку. Для передачи данных этому полю определен специальный метод — constructor , который принимает через параметр _name некоторую строку и передает ее в поле name :

class User < name : string; constructor(_name:string)< this.name = _name; >>

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

const tom : User = new User("Том");

Иначе говоря, константа tom представляет некоторого пользователя, у которого имя «Том».

Затем получаем элемент с id header на веб-странице в одноименную константу header :

const header = this.document.getElementById("header");

То есть этот элемент будет представлять определенный на веб-странице index.html заголовок .

Далее с помощью свойства innerHTML меняем содержимое элемента:

header.innerHTML = "Привет " + tom.name;

В данном случае свойству innerHTML передается строку, к которой добавляется значение свойства tom.name . То есть мы ожидаем, что в заголовок на веб-странице будет выводится создаваемая здесь строка.

Сохраним и скомпилируем этот файл. Для этого в командной строке/терминале с помощью команды cd перейдем к каталогу, где расположен файл app.ts (в моем случае это C:\typescript). И для компиляции выполним следующую команду:

tsc app.ts

После компиляции в каталоге проекта создается файл app.js , который будет выглядеть так:

var User = /** @class */ (function () < function User(_name) < this.name = _name; >return User; >()); var tom = new User("Том"); var header = this.document.getElementById("header"); header.innerHTML = "Привет " + tom.name;

И теперь мы можем кинуть веб-страницу index.html в браузер и увидеть результат работы написанного на TypeScript кода: