Блог

Если я сделаю что-то подобное в TypeScript app.ts:

 interface Stuff {
    _someStuff: string;
    _someNumberStuff: number;
}

class MyElement extends HTMLElement implements Stuff {

    _someStuff: string;
    _someNumberStuff: number;    

    static get formAssociated() { return false; }
    static get observedAttributes() { return ['someStuff', 'someNumberStuff']; }

    get someStuff() {
        return this._someStuff;
    }
    set someStuff(value: string) {
        this._someStuff = value;
    }
    get someNumberStuff() {
        return this._someNumberStuff;
    }
    set someNumberStuff(value: number) {
        this._someNumberStuff = value;
    }

    constructor() {
        super();
    }

    connectedCallback() {
        this.someStuff = $(this).attr('someStuff');
        this.someNumberStuff = parseFloat($(this).attr('SomeNumberStuff')) || 0;

        this.innerHTML = 'Here is some stuff: <b>'   this.someStuff   '</b> numbers too <code>'   this.someNumberStuff   '</code> and this is your inner html <blockquote>'   this.innerHTML   '</blockquote>';
    }

    disconnectedCallback() {
    }

    attributeChangedCallback(name, oldValue, newValue) {
    }

    adoptedCallback() {
    }
}

customElements.define("my-element", MyElement);
  

Затем в Index.cshtml работает следующее, но я не могу получить Intellisense для атрибутов:

 <my-element someStuff="also stuff">This does stuff.</my-element>
  

Есть ли способ сделать это? Я попробовал это в верхней части cshtml, просто чтобы посмотреть, но это не сработало:

 @{///<reference path="/TypeScript/app.ts"></reference>
}
@{ ///<reference path="/js/app.js"></reference>
}
@{ ///<reference path="/wwwroot/js/app.js"></reference>
}
  

 [HtmlTargetElement("my-element", Attributes = "someStuff, someNumberStuff")]
public class MyElementTagHelper : TagHelper
{
    [HtmlAttributeName("someStuff")]
    public string SomeStuff { get; set; }

    [HtmlAttributeName("someNumberStuff")]
    public double SomeNumberStuff { get; set; }
}
  

Переопределение метода Process не требуется, если обработка выполняется в TypeScript, а не на стороне сервера.

В Index.cshtml:

 @addTagHelper *, YourProjectAssembly
  

Будут доступны перестроение и Intellisense.