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

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

Запись от 8Observer8 размещена 28.10.2019 в 23:58
Обновил(-а) 8Observer8 28.10.2019 в 23:59

Если у вас пример из нескольких классов на 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

Пошаговая инструкция, как расположить данный пример в песочнице Plunker, используя библиотеку Require.js и компиляцию TypeScript кода в AMD:
  • Перейдите на сайте песочницы: https://next.plnkr.co/
  • Авторизируйтесь, например, используя аккаунт GitHub
  • Нажмите кнопку "New"
  • Выберите шаблон "JS Default"
  • Удалите все файлы и папки кроме файла "index.html"
  • Скопируйте данный код в файл "index.html":
    HTML5
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <!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":
    Javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    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":
    Javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    export default class MyClass
    {
        private _helloWorld: string = null;
     
        public constructor()
        {
            this._helloWorld = "Hello World!";
        }
     
        public get HelloWorld(): string
        {
            return this._helloWorld;
        }
    }
  • Создайте файл с именем "tsconfig.json"
    Javascript
    1
    2
    3
    4
    5
    6
    7
    
    {
        "compilerOptions": {
            "module": "amd",
            "sourceMap": false,
            "target": "es5"
        }
    }
  • Создайте файл с именем "RequireConfig.ts"
    Javascript
    1
    2
    3
    4
    5
    
    requirejs.config({
        baseUrl: "."
    });
     
    requirejs(["Program"], (Program) => { });
  • Нажмите кнопку "Save" и нажмите кнопку "Preview", чтобы запустить пример
  • Скопируйте ссылку на свой пример из адресной строки браузера
  • Результат: https://next.plnkr.co/edit/d3cPBLfHsaztAIyW?preview
Размещено в Без категории
Просмотров 74 Комментарии 0
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.