开启TypeScript noImplicitAny后，如何确定正确索引签名？

嘿，这个问题我熟！当你开启noImplicitAny严格模式后，TypeScript会更严格地校验类型合法性，你遇到的报错本质是：你定义的params类型只有foo和bar两个可选的number属性，但你用动态的obj[0]作为键去赋值时，TypeScript没法确认这个键是预先定义好的合法属性名，所以抛出了“隐式any类型”的错误。

下面给你两种实用的解决方案，根据你的实际需求选择：

方案一：添加明确的索引签名（允许其他参数） #

如果你希望params可以接受foo、bar之外的其他键，或者不想做额外的键判断，可以给params的类型添加索引签名，同时注意把URL参数的字符串值转换成number（因为你的属性定义是number类型）：

const getFromUri = () => { 
  const urlSearch = window.location.search.substring(1); 
  // 添加字符串索引签名，允许任意字符串键，值为number或undefined
  const params: { foo?: number; bar?: number; [key: string]: number | undefined } = {}; 
  if (urlSearch && urlSearch.length > 0) { 
    const urlParams = urlSearch.split("&"); 
    urlParams.forEach((e: string) => { 
      const [key, value] = e.split("=");
      // 转换字符串为number，处理空值避免NaN
      params[key] = value ? parseInt(value, 10) : undefined;
    }); 
  } 
  return params;
}; 

如果确定URL参数只会是foo或bar，也可以用更严格的索引签名：

const params: { [key in 'foo' | 'bar']?: number } = {};

方案二：先判断键的合法性（只处理指定参数） #

如果你的业务逻辑只需要处理foo和bar这两个参数，其他参数可以忽略，那可以在赋值前先判断当前键是否是合法的属性名，这样TypeScript就能明确知道键的类型，不会报错：

const getFromUri = () => { 
  const urlSearch = window.location.search.substring(1); 
  const params: { foo?: number; bar?: number } = {}; 
  if (urlSearch && urlSearch.length > 0) { 
    const urlParams = urlSearch.split("&"); 
    urlParams.forEach((e: string) => { 
      const [key, value] = e.split("=");
      // 先判断key是否是我们预先定义的属性
      if (key === 'foo' || key === 'bar') {
        // 转换字符串为number，处理空值
        params[key] = value ? parseInt(value, 10) : undefined;
      }
    }); 
  } 
  return params;
}; 

额外提醒 #

• URL参数的值可能是空字符串，所以一定要处理转换逻辑，避免得到NaN；
• 如果需要更严谨的类型检查，可以自定义类型守卫函数来判断键的合法性，比如：

  function isParamKey(key: string): key is 'foo' | 'bar' {
    return key === 'foo' || key === 'bar';
  }
  

  然后在forEach里用if (isParamKey(key))来判断，这样类型推断会更准确。

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