如何通过ESLint控制开发者属性输入到组件?

Question

我正在构建一个设计系统，它可以导入到任何人的Angular库中。

我希望能够，假设他们安装了这个自定义ESLint插件，当开发人员使用设计系统(由预构建的Angular组件组成)并向组件传递(或不传递任何东西)无效数据时，抛出错误或警告消息。

例如，我创建了一个按钮组件。

这个按钮组件有一个Input样式-即Primary, Secondary, Tertiary。每个样式修改按钮的外观和感觉。

然而，如果有人要传递'MadeUpStyle'到它-我如何创建一个ESLint插件来专门抛出一个错误或警告，告诉他们他们正在做的是不推荐的?

此外，如果他们没有向这个Input传递任何东西，那么就会出现一个错误，指出这是一个必需的输入。

虽然我的研究帮助我发现了这样的页面，但我似乎找不到任何在线的东西，专门显示有人使用插件来验证组件输入的例子。

任何帮助或指出正确的方向将不胜感激。

Answer 1

我的理解是你希望实现两件事:

• 类型组件输入属性的安全性
• 要求的输入属性

对于类型安全的输入属性，你可以利用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
}