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

8Observer8 · 12.Декабрь.2019 14:35:06

Данная инструкция вытекает из этой: Инструкция, как расположить несколько классов на TypeScript в песочнице Plunker

В данной инструкции покажу, как подключить стороннюю библиотеку. Например, подключим библиотеку glMatrix, которая используется для работы с линейной алгеброй (матрицы, вектора и операции с ними). Продолжим писать пример выше. Добавим свойство “Identity” в класс “MyClass”, которое будет возвращать единичную матрицу, а метод “Main” из класса “Program” будет выводить единичную матрицу на экран.

Предыдущий пример: https://next.plnkr.co/edit/d3cPBLfHsaztAIyW?preview
Готовый пример: https://next.plnkr.co/edit/JLFSvIw9XS5HIFw5?preview

Откройте предыдущий пример: https://next.plnkr.co/edit/d3cPBLfHsaztAIyW?preview
Откройте файл “RequireConfig.ts” и добавьте подключение библиотеки “gl-matrix”:

requirejs.config({
    baseUrl: ".",
    paths: {
        "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min"
    }
});

requirejs(["Program"], (Program) => { });

Скопируйте код “MyClass.ts”, который импортирует модуль “gl-matrix” и содержит свойство Identity, возвращающее единичную матрицу:

import { mat4 } from "gl-matrix";
 
export default class MyClass
{
    private readonly _identity: mat4 = null;
 
    public constructor()
    {
        // Creates a new identity mat4
        this._identity = mat4.create();
    }
 
    public get Identity(): string
    {
        return this._identity;
    }
}

Скопируйте код класса “Program” в файл “Program.ts”, который создаёт экземпляр класса “MyClass”, берёт ссылку на элемент “div” по “id” и выводит свойство Identity, возвращающее единичную матрицу, на страницу:

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

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