Инструкция, как расположить несколько классов на TypeScript в песочнице Plunker

8Observer8 · 12.Декабрь.2019 14:27:04

Если у вас пример из нескольких классов на TypeScript и вам нужно расположить его в песочнице для демонстрации, то можно использовать песочницу Plunker: https://next.plnkr.co/ Я написал пошаговую инструкцию. Надеюсь, что эта инструкция кому-нибудь пригодится для демонстрации своих примеров и вопросов в песочнице.

Поставим цель, например, написать пример вывода “Hello World!” из TypeScript на элемент “div”. В приложении будет два класса в разных файлах: Program и Main. С метода Main в классе Program начинается выполнение приложения. В методе Main создаётся экземпляр класса MyClass, у которого есть свойство HelloWorld, которое возвращает строку “Hello World”. В методе Main получаем “id” элемента “div” и выводим в него строку “Hello World!”. Код будет дан в пошаговой инструкции ниже.

Готовый пример в песочнице: https://next.plnkr.co/edit/d3cPBLfHsaztAIyW?preview
Можете сразу сделать Fork этого примера и использовать его за основу для своих примеров.

Пошаговая инструкция, как расположить данный пример в песочнице Plunker, используя библиотеку Require.js и компиляцию TypeScript кода в AMD:

Перейдите на сайте песочницы: https://next.plnkr.co/
Авторизируйтесь, например, используя аккаунт GitHub
Нажмите кнопку “New”
Выберите шаблон “JS Default”
Удалите все файлы и папки кроме файла “index.html”
Скопируйте данный код в файл “index.html”:

    <!doctype html>
     
    <html>
        <head>
          <script data-main="RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
        </head>
     
        <body>
          <div id="output"></div>
        </body>
    </html>

Кликните правой кнопкой мыши по “Project”, выберите “Create file…”, введите имя “Program.ts” и скопируйте данный код в файл “Program.ts”:

import MyClass from "./MyClass";
 
class Program
{
    public static Main(): void
    {
        let myClass = new MyClass();
 
        let outputElement = document.getElementById("output");
        outputElement.innerHTML = myClass.HelloWorld;
    }
}
 
Program.Main();

По аналогии создайте файл с именем “MyClass.ts”:

export default class MyClass
{
    private _helloWorld: string = null;
 
    public constructor()
    {
        this._helloWorld = "Hello World!";
    }
 
    public get HelloWorld(): string
    {
        return this._helloWorld;
    }
}

Создайте файл с именем “tsconfig.json”

{
    "compilerOptions": {
        "module": "AMD",
        "sourceMap": false,
        "target": "ES5"
    }
}

Создайте файл с именем “RequireConfig.ts”

requirejs.config({
    baseUrl: "."
});
 
requirejs(["Program"], (Program) => { });

Нажмите кнопку “Save” и нажмите кнопку “Preview”, чтобы запустить пример
Скопируйте ссылку на свой пример из адресной строки браузера
Результат: https://next.plnkr.co/edit/d3cPBLfHsaztAIyW?preview

Из данной инструкции вытекает следующая: Инструкция, как подключить стороннюю библиотеку к своему примеру на TypeScript в песочнице Plunker