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

A few TypeScript files on Sandbox

Запись от 8Observer8 размещена 20.02.2019 в 17:27
Показов 1420 Комментарии 0
Метки typescript

Blog content

There is a few TypeScript files in our example. We want to place these scripts on Sandbox.

This is the result on the Sandbox: click. Open the debug console in your browser to see the result: "Ctrl+Shift+J" in Chrome.

You will see in the debug console this messages:
Rectangle was created
Rectangle was drawn
Create these files on Sandbox: https://plnkr.co/edit/

Program.ts

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Rectangle } from "./Rectangle";
 
export class Program
{
    public static Main(): void
    {
        // Create a rectangle
        let rectangle = new Rectangle();
 
        // Draw the rectangle
        rectangle.Draw();
    }
}
Program.Main();
Rectangle.ts

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export class Rectangle
{
    public x: number;
    public y: number;
 
    public constructor(x: number = 0, y: number = 0)
    {
        /* ... */
        console.log("Rectangle was created");
    }
 
    public Draw(): void
    {
        /* ... */
        console.log("Rectangle was drawn");
    }
}
We need to compile these files to AMD. For this, create the "tsconfig.json" file on the Sandbox:

tsconfig.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "compilerOptions": {
        "module": "amd",
        "outDir": ".",
        "sourceMap": true
    },
    "include": [
        "*.ts"
    ],
    "exclude": [
        ""
    ]
}
Create the RequereConfig.ts file on the Sandbox:

RequireConfig.ts

JavaScript
1
2
3
4
5
6
7
8
requirejs.config({
    baseUrl: "."
});
 
requirejs(["Program"], (Program) =>
{
 
});
Add "require.min.js" in the "index.html" file:

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>A few TypeScript files on sandbox</title>
    <script data-main="RequireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
 
<body>
    <h3>See the console output. Press "Ctrl+Shiprt+J" in the Chrome browser.</h3>
</body>
 
</html>
This is the result on the Sandbox: click. Open the debug console in your browser to see the result: "Ctrl+Shift+J" in Chrome.

You will see in the debug console this messages:
Rectangle was created
Rectangle was drawn
P.S. If you need to work locally you need to run these commands:

npm init -y
npm i -D @types/requirejs
P.S.S. Read this book to learn more about AMD and RequireJS: Mastering TypeScript - 2nd Edition - Nathan Rozentals
Метки typescript
Размещено в Без категории
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 0
Комментарии
 
Новые блоги и статьи
[golang] Алгоритм «Хак Госпера»
alhaos 17.05.2026
Алгоритм «Хак Госпера» Хак Госпера (Gosper's Hack) — алгоритм нахождения следующего по величине числа с тем же количеством установленных бит. Придуман Биллом Госпером в 1970-х, опубликован в. . .
Рисование бинарного древа до 6-го колена на js, svg.
russiannick 17.05.2026
<svg width="335" height="240" viewBox="0 0 335 240" fill="#e5e1bb"> <style> <!]> </ style> <g id="bush"> </ g> </ svg> function fn(){ let rost;/ / высота древа let xx=165,yy=210,w=256;
FSharp: interface of module
DevAlt 16.05.2026
Интерфейс модуля F# позволяет управлять доступностью членов, содержащихся в реализации модуля. По-умолчанию все члены модуля доступны: module Foo let x = 10 let boo () = printfn "boo" . . .
Хитросплетение родственных связей пантеона греческих богов.
russiannick 14.05.2026
Однооконник, позволяющий узреть и изучить отдельных героев древней Греции. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible". . .
[golang] Угол между стрелками часов
alhaos 12.05.2026
По заданным значениям часа и минуты необходимо определить значение меньшего угла между стрелками аналогового циферблата часов. import "math" func angleClock(hour int, minutes int) float64 { . . .
Debian 13: Установка Lazarus QT5
ВитГо 09.05.2026
Эта инструкция моя компиляция инструкций volvo https:/ / www. cyberforum. ru/ blogs/ 203668/ 10753. html и его же старой инструкции по установке Lazarus с gtk2. . .
Нейросеть на алгоритме "эстафета хвоста" как перспектива.
Hrethgir 06.05.2026
На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .
Асинхронный приём данных из COM-порта
Argus19 01.05.2026
Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru