TypeScript组件Prop值不匹配正则时如何触发警告？

你提到的需求可以通过以下几种方式实现，在ID不符合/^[A-Z]_[0-9]{4}$/规则时给出警告：

1. TypeScript高级类型实现编译期精确校验 #

TypeScript虽然不支持直接用正则作为类型，但可以通过模板字符串类型+联合类型模拟出符合规则的类型，在编译阶段就拦截不符合格式的ID：

// 定义单个大写字母的联合类型
type UppercaseLetter = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
// 定义单个数字的联合类型
type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
// 组合出四位数字的类型
type FourDigits = `${Digit}${Digit}${Digit}${Digit}`;
// 最终符合规则的ID类型
type ValidId = `${UppercaseLetter}_${FourDigits}`;

interface MyComponentProps {
  id: ValidId;
}

const MyComponent = ({ id }: MyComponentProps) => {
  // 组件逻辑
  return <div>{id}</div>;
};

// 合法示例：无警告
const validComp = <MyComponent id="X_1234" />;
// 非法示例：TypeScript会直接抛出警告
const invalidComp1 = <MyComponent id="x_1234" />; // 小写开头不允许
const invalidComp2 = <MyComponent id="X_123" />; // 数字不足四位
const invalidComp3 = <MyComponent id="XY_1234" />; // 开头超过一个大写字母

这种方案不需要额外工具，完全依赖TypeScript的类型系统，精度足够，能在编码阶段就发现问题。

2. ESLint自定义规则实现编辑器实时警告 #

如果需要在编辑器层面给出更醒目的提示，或者要覆盖动态生成ID的场景，可以自定义ESLint规则：

先编写一个ESLint规则文件（比如rules/my-component-id-rule.js）：

module.exports = {
  meta: {
    type: "problem",
    docs: {
      description: "校验MyComponent的id属性必须匹配格式：大写字母_四位数字",
    },
    schema: [],
  },
  create(context) {
    return {
      JSXOpeningElement(node) {
        // 只检查MyComponent组件
        if (node.name.name === "MyComponent") {
          // 找到id属性
          const idAttr = node.attributes.find(
            attr => attr.type === "JSXAttribute" && attr.name.name === "id"
          );
          // 检查属性值是否为字面量并匹配正则
          if (idAttr && idAttr.value.type === "Literal") {
            const idValue = idAttr.value.value;
            if (!/^[A-Z]_[0-9]{4}$/.test(idValue)) {
              context.report({
                node: idAttr,
                message: `MyComponent的id格式错误，需符合「大写字母_四位数字」（例如：X_1234）`,
              });
            }
          }
        }
      },
    };
  },
};

然后在ESLint配置文件中引入该规则：

module.exports = {
  // ...其他配置
  plugins: ["my-custom-rules"],
  rules: {
    "my-custom-rules/my-component-id-rule": "warn",
  },
  settings: {
    "my-custom-rules": {
      rulesDir: "./rules",
    },
  },
};

这样在编辑器中编写代码时，不符合规则的ID会直接显示ESLint警告。

3. 运行时校验兜底 #

如果担心有漏网的情况（比如动态生成的ID在编译期无法被TypeScript捕获），可以在组件内部加入运行时检查，在开发环境给出警告：

const MyComponent = ({ id }: MyComponentProps) => {
  // 在开发环境开启校验
  if (process.env.NODE_ENV === "development") {
    const isValid = /^[A-Z]_[0-9]{4}$/.test(id);
    if (!isValid) {
      console.warn(`[MyComponent] id格式错误：${id}，需符合「大写字母_四位数字」格式`);
    }
  }

  // 组件逻辑
  return <div>{id}</div>;
};

这种方式可以在运行阶段发现问题，适合作为最后一层兜底。

内容的提问来源于stack exchange，提问作者yglts03