如何在TypeScript中设置规则禁止直接使用对象、仅允许访问其属性

你遇到的问题本质是默认TS规则不会将普通对象类型判定为非法React子元素，因此无法提前拦截这类运行时错误，有两种成熟方案可以实现你的需求：

方案1：改造Content类型实现编译期拦截 #

给Content接口新增唯一标识的brand属性，让该类型无法匹配React.ReactNode的合法类型范围，只要直接把该类型对象作为React子元素就会触发TS报错：

interface Content {
  Content_Type: string;
  Text: string;
  // 新增唯一私有标识，不会影响实际运行时逻辑
  readonly __content_brand: unique symbol;
}

// API请求返回数据时做一层类型断言即可
const getContent = async () => {
  const rawData = await apiRequest();
  return rawData as Content;
}

配置后如果直接写<p>{Claim_Text}</p>，TS会直接抛出类型不兼容错误，只有访问Claim_Text.Text属性才能通过校验。

方案2：配置ESLint规则做针对性校验 #

如果不想修改原有类型定义，可以通过ESLint的@typescript-eslint/no-restricted-types规则限制Content类型的直接使用：

// .eslintrc.json 规则配置
{
  "rules": {
    "@typescript-eslint/no-restricted-types": [
      "error",
      {
        "name": "Content",
        "message": "Content类型禁止直接使用，请访问其Text属性获取文本内容"
      }
    ]
  }
}

配置后只要代码中出现单独使用Content类型的场景，ESLint就会抛出错误提示，完全覆盖你的需求。

如果你的项目开启了TypeScript严格模式，额外配置@typescript-eslint/no-unsafe-expression规则也能拦截未明确类型的对象直接作为React子元素的场景，只是针对性弱于上面两种方案。

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