TypeScript报错2538：undefined不能用作索引类型如何解决？

报错原因说明 #

• 第一个 ts(2538) 报错：你将action定义为可选属性，值可能为undefined，而JavaScript对象不允许用undefined作为索引取值。
• 第二个 ts(7053) 报错：去掉可选修饰符后action的类型是宽泛的string，但你定义的secondData只有sites、analysers两个固定键，TypeScript不允许用任意字符串索引仅包含固定键的对象。

解决方案 #

按你的业务场景二选一即可：

场景1：action是可选属性

先收窄action的合法取值范围，再增加合法性校验即可：

// 限定action只能是secondData的两个键值之一
type ValidAction = 'sites' | 'analysers'

interface AA {
  action?: ValidAction;
  actionArgs?: string;
}

const ArticleList: React.FC<AA> = (props) => {
  const data = useSelector((state: RootStateOrAny) => {
    const secondData = {
      sites: state.articles.sites,
      analysers: state.siteArticles.analysers,
    };
    // 校验action为合法值后再索引，不符合则返回兜底值，可按业务调整
    if (props.action && Object.hasOwn(secondData, props.action)) {
      return secondData[props.action];
    }
    return undefined;
  });
  // 剩余业务逻辑
}

场景2：action是必传属性

直接收窄action的类型即可，无需额外校验：

type ValidAction = 'sites' | 'analysers'

interface AA {
  // 去掉可选修饰符，同时限定取值范围
  action: ValidAction;
  actionArgs?: string;
}

const ArticleList: React.FC<AA> = (props) => {
  const data = useSelector((state: RootStateOrAny) => {
    const secondData = {
      sites: state.articles.sites,
      analysers: state.siteArticles.analysers,
    };
    // 直接索引不会报错
    return secondData[props.action];
  });
  // 剩余业务逻辑
}

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