我正在構建一個設計系統，可以將其匯入任何人的 Angular 庫。
我希望能夠，假設他們安裝了這個自定義 ESLint 插件，當開發人員使用設計系統（由預構建的 Angular 組件組成）并傳入（或不傳入任何內容）時拋出錯誤或警告訊息) 無效資料進入組件。
例如，假設我創建了一個按鈕組件。
此按鈕組件具有樣式的輸入 - IE Primary、Secondary、Tertiary。每種樣式都會修改按鈕的外觀和感覺。
但是，如果有人將“MadeUpStyle”傳入其中 - 我將如何創建一個 ESLint 插件來專門拋出錯誤或警告以告知他們不推薦他們正在做什么？
此外，如果他們沒有將任何內容傳遞到此輸入中，則會出現一個錯誤，指出這是必需的輸入。
雖然我的研究使我發現，如網頁此，我似乎無法找到任何網路，使用插件的人特別示出的例子來驗證分量輸入。
任何幫助或指向正確方向的點都將不勝感激。
uj5u.com熱心網友回復：
我的理解是您希望實作兩件事：
- 組件輸入屬性的安全型別
- 必需的輸入屬性
對于型別安全輸入屬性，您可以利用 Typescript 本身，在 tsConfig 檔案中，您需要啟用strict模板的型別檢查。有關它的更多詳細資訊，請參閱：https : //angular.io/guide/template-typecheck
對于所需的輸入，您可以像這樣創建自定義裝飾器：
function Required(target: object, propertyKey: string) {
Object.defineProperty(target, propertyKey, {
get() {
throw new Error(`Attribute ${propertyKey} is required`);
},
set(value) {
Object.defineProperty(target, propertyKey, {
value,
writable: true,
configurable: true,
});
},
});
}
然后在您的組件中：
Component({
selector: 'test-app',
template: '<div></div>',
});
export class TestComponent {
@Input() @Required a: number; // Usage of required
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/333908.html