打字稿和自定義元素屬性編譯問題

Question

我有以下自定義元素：

class CustomElement extends HTMLElement{
 constructor(){ super(); }
config: ConfigModel;
}
window.customElements.define('my-element', CustomElement);

然后，在代碼中的某處，我有這樣的東西：

const myElement = document.createElement('my-element');
myElement.config = config;

TS在此處引發錯誤： error TS2339: Property 'config' does not exist on type 'HTMLElement'.

任何想法如何解決這個問題？

編輯：建議強制轉換元素的類型。 雖然這樣做有效，但確實帶來了兩個問題：

1. 我不一定希望使用自定義元素的每個服務都了解自定義元素的類
2. 如果我模擬測試的自定義元素，則服務中的硬編碼自定義元素將不允許進行模擬。

這是解釋它的要點： https : //gist.github.com/YonatanKra/de42be2fa5499157169ef141ba377998

Answer 1

您需要將元素強制轉換為預期的類型，因為在這種情況下Typescript無法識別類型。

const myElement = <CustomElement>document.createElement('my-element');

另外，您還需要繼承CustomElement中的HTMLElement類：

class CustomElement extends HTMLElement {

根據其他問題編輯答案：

顯然，如果您想訪問CustomElement對象的屬性，則需要鍵入cast。 但是，在所有其他情況下，您都可以使用默認的HTMLElement類型。 它仍然應該允許您對對象執行某些操作，而不是與CustomElement相關的任何CustomElement 。 因此，並非每個服務都需要知道它是一個CustomElement對象。

為了進行CustomElementMock ，您可以創建一個CustomElementMock類，該類繼承自CustomElement

class CustomElementMock extends CustomElement {
}

模擬版本仍為CustomElement類型，並且您的原始代碼仍應接受它。 但是，在模擬類內部，您可以覆蓋所有功能以不執行任何操作或返回模擬數據。

Answer 2

使用document.createElement('my-element') as CustomElement