如何通过 ESLint 控制开发人员对组件的属性输入？

Posted 2023-03-27

【中文标题】如何通过 ESLint 控制开发人员对组件的属性输入？

【英文标题】：How to control developer property input to components via ESLint?

【发布时间】：2021-12-08 04:50:42

【问题描述】：

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

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

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

此按钮组件具有样式的输入 - I.E Primary、Secondary、Tertiary。每种样式都会修改按钮的外观。

但是，如果有人将“MadeUpStyle”传入其中 - 我将如何创建一个 ESLint 插件来专门抛出错误或警告以告知他们不推荐他们正在做的事情？

此外，如果他们不向此 Input 传递任何内容，则会显示错误，指出这是必需的 Input。

虽然我的研究帮助我发现了诸如 this 之类的页面，但我似乎无法在网上找到任何专门展示某人使用插件来验证组件输入的示例。

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

【问题讨论】：

你描述的叫type-safety，默认由TypeScript处理。为组件中可能的输入指定类型，如果使用错误，每个使用它的人都会出错。

非常感谢您的回复。如何定义自定义规则来控制这一点

我真的不明白你为什么要使用 eslint（提示，它提供了 linting 建议）。为了实现我所写的，您所要做的就是创建一个包含所需组件的角度库。这些组件应明确指定其输入（@Input foo: 'primary' | 'secondary' | '..';），而不是隐含或过于模糊（@Input foo: any; 或@Input foo: string;）。

我明白你的意思 - 我们已经通过上面的示例或接口/枚举明确控制输入，但是如果有人要指定组件的标题，但如果我们想添加例如，如果他们添加了一个少于 3 个字符的字符串，但不一定是错误？

呸，明白了。我看不出这怎么可能，抱歉。也许其他人有个好主意:) // 编辑：显然@Ritesh 提到了@Decorators - 这应该是一个很好的起点。

【参考方案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
    

【讨论】：

这太棒了，谢谢！这似乎是一种享受，但是当指定一个值时，我得到“错误类型错误：无法重新定义属性：a”错误。如果我删除 setter，我会得到“错误类型错误：无法设置只有 getter 的 [object Object] 的属性 a”。有什么想法吗？

你能制作一个stackblitz吗？这就是我使用它的方式，没有发现任何问题 - stackblitz.com/edit/…

我刚刚尝试过——尽管所有依赖项的版本相同，代码各方面都相同，但我在本地环境中遇到错误，但在 stackblitz 中却没有：stackblitz.com/edit/angular-ekhqhj?file=src/app/test-comp/…跨度>

检查您的 tsConfig.json 文件。

设法通过将另一个configurable: true 添加到父Object.defineProperty 来解决