Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

A few TypeScript files on Sandbox

Запись от 8Observer8 размещена 20.02.2019 в 17:27
Обновил(-а) 8Observer8 21.02.2019 в 13:48

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
Размещено в Без категории
Просмотров 98 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru