Форум программистов, компьютерный форум, киберфорум
8Observer8
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  

Компиляция из TypeScript в ES3 или ES5 для использования в браузере

Запись от 8Observer8 размещена 17.12.2018 в 12:06
Показов 2563 Комментарии 0
Метки typescript

Содержание блога

Есть много способов, как скомпилировать в ES3 или ES5, чтобы использовать в браузере.

Я знаю хорошо два способа:
  • Gulp + Browserify. Здесь подробная инструкция: Gulp · TypeScript
  • Использование "module": "amd" и библиотеку Require.js

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

Пример в песочнице, который выводит информацию на окно браузера:https://plnkr.co/edit/QmAov1yC... ?p=preview

Результат:
Hello from main
triangle1 color = green
triangle2 color = yellow
Локально на своей машине вы:
  • создаёте пустую папку для проекта
  • создаёте файл package.json с помощью команды:
    npm init -y
  • устанавливаете файл с типами для Require.js:
    npm i -D @types/requirejs

Минимальный tsconfig.json:

JSON
1
2
3
4
5
6
{
    "compilerOptions": {
        "target": "es5",
        "module": "amd"
    }
}
Напишем два модуля. Есть главный модуль Program, в который импортируется модуль Trinangle. В классе Triangle хранится свойство "color", которое мы выводим на экран в функции main класса Program.

Program.ts

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Triangle } from "./Triangle";
 
// Playground: https://plnkr.co/edit/QmAov1yCDCFChmKKjuyj?p=preview
 
class Program
{
    public static main()
    {
        document.write("Hello from main<br>");
 
        let triangle1 = new Triangle();
        document.write(`triangle1 color = ${ triangle1.color }<br>`);
 
        let triangle2 = new Triangle("yellow");
        document.write(`triangle2 color = ${ triangle2.color }`);
        document.close();
    }
}
Program.main();
Triangle.ts

JavaScript
1
2
3
4
5
6
7
8
9
export class Triangle
{
    public color: string;
 
    public constructor(color = "green")
    {
        this.color = color;
    }
}
Файл RequireConfig.ts определяет корень проекта baseUrl и определяет главный модуль:

JavaScript
1
2
3
4
5
6
7
8
requirejs.config({
    baseUrl: "."
});
 
requirejs(["Program"], (Program) =>
{
 
});
Загружаем сначала файл require.min.js, потом RequireConfig.js, а далее загружается главный модуль и все оcтальные модули, которые требуются в import

index.html
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Minimal Example in TypeScript and Require.js</title>
    <script data-main="RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
 
<body>
 
</body>
 
</html>
Enter the command to the terminal for compilation:
tsc
Now we can open "index.html" in browser and we can see that all modules was loaded.
Метки typescript
Размещено в Без категории
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 0
Комментарии
 
Новые блоги и статьи
Кредитный калькулятор
Maks 05.08.2026
Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .
У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35".
kumehtar 04.08.2026
С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .
Как ИИ начал спорить и врать (возможно почуяв опасность для себя от индустрии - уход от электроники).
Hrethgir 04.08.2026
Недельный диалог, на фоне событий с НПЗ. Да, из спирта можно получать бензин, и это не сложно. Но потом в схеме я решил избавиться от насоса, при этом полностью сделав контроль подачи спирта в. . .
Термопринтер QR701
Argus19 03.08.2026
Термопринтер QR701 Купил два термопринтера QR701. На сэлф-тесте написано: Language: PC936 (GB18030). Что означает, что принтеры могут печатать только латиницу и китайские иероглифы. Так же. . .
Создание формы заимствованного документа
Maks 03.08.2026
Задача: Необходимо создать собственную форму заимствованного документа. На форме должен быть реквизит "Покупатель", а также табличная часть со следующими реквизитами: - Расчетный счет покупателя. . .
Задача предоставления скидок покупателям
Maks 03.08.2026
Задача: В документе "Продажи" необходимо реализовать функционал предоставления скидок покупателям. Скидка должна автоматически рассчитываться и подставляться в соответствующее поле при выборе. . .
Почему SEO не начинается с ключевых слов: что проверить до написания текстов
Neotwalker 01.08.2026
Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .
Знание — сила: Доктрина интенциональности знаний, углубление в формулу
Hrethgir 01.08.2026
https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru