[Q]在TypeScript中选择object的房产

Question

我在 React 中学习 TypeScript，我在通过方法参数访问属性时遇到问题。

    const [product, setProduct] = useState("electricity");
        const defaultProps = {
        price: {
              electricity: 0.51,
              gas: 4.7,
              oranges: 3.79,
            },
          };
 const selectPrice = (select: any) => {
    console.log(defaultProps.price[select]);
  };
        const handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
        setProduct(e.target.value);
      };
        <Cash
                price={selectPrice(product)}
              />
    
    <select value={product} onChange={handleSelect}>
              <option value="electricity">electricity</option>
              <option value="gas">gas</option>
              <option value="oranges">oranges</option>
            </select>

问题出在 selectPrice 方法中。 我有错误“元素隐式具有‘任何’类型，因为类型‘任何’的表达式不能用于索引类型‘{电：数字；气体：数字；橙子：数字；}'.ts(7053)” . 我不知道如何在 object defaultProps 中访问 object 价格的属性。 在指南中，老师使用的是 javascript，它工作正常。

Answer 1

您可以创建 select 的可能选项类型。

const selectPrice = (select: 'electricity'| 'gas' | 'oranges') => {
  console.log(defaultProps.price[select]);
};

Answer 2

将select: any更改为select: string后，此问题应该得到解决。 由于price只能使用字符串进行索引，因此当您设置select: any时， select 可能是一个number 、 boolean或其他类型，这将导致运行时错误，这就是 Typescript 抱怨的原因。

由于使用 Typescript 而不是 Javascript 的好处是更强大的类型系统，因此您应该尽可能避免使用any以利用 Typescript 捕获由不匹配类型引起的运行时错误的能力