Typescript Class Decorators для пользовательских элементов - PullRequest
Новая
       5

Typescript Class Decorators для пользовательских элементов

0 голосов
/ 08 января 2019

Я пытаюсь понять, как декораторы классов работают с машинописью. Я сделал следующий код для создания декоратора @Component для добавления некоторой инициализации пользовательского элемента: 

export interface ComponentOptions {
    tag: string,
    style?: string,
    shadow?: boolean
}

export const Component = ( options: ComponentOptions ) => {

    // Check if the element tag name is a valid custom element selector
    validateSelector( options.tag );

    return ( target: any ) => {

        const element: any = class extends ( target as { new (): any } ) {

            constructor() {

                super();

                this._connected = false;
                this._canAttachShadowDom = ( options.shadow ) ? options.shadow : false;

                attachShadowDom( this );

            }

            connectedCallback() {

                if( super.connectedCallback ) {

                    super.connectedCallback();

                }

                this._connected = true;

            }

            disconnectedCallback() {

                if( super.disconnectedCallback ) {

                    super.disconnectedCallback();

                }

                this._connected = false;

            }

        };

        /**
        *   Check if custom element is already defined
        *   Create new custom element when element name is not defined;
        */
        if( !customElements.get( options.tag ) ) {

            customElements.define( options.tag, element );

        }

        return element;

    };

};

@Component({
    tag: 'counter-element',
    shadow: true
})
export class CounterElement extends HTMLElement {

    constructor() {
        super();
        console.log('initiliazing');
    }

}

Вопрос 1: я наткнулся на следующую ветку после создания декоратора: Класс Decorator в Typescript . В этой теме разработчик демонстрирует другой способ добавления функциональности в класс с помощью прототипа конструктора. Мой вопрос: есть ли разница между добавлением этого через прототип или способом, которым я делаю это через класс расширяется. (Я знаю, что CounterElement компилируется в var CounterElement = function () и CounterElement.prototype.title, например).

Вопрос 2: Есть ли способ напечатать target, element и расширять другим способом, а затем просто напечатать any?

...