typescript 动态访问 object

Question

我在 typescript 中收到此错误

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 

当我尝试动态访问 object 属性时：

import React, { useState } from "react";

const cities = {
  ny: {
    label: "New York"
  },
  ld: {
    label: "London"
  }
};

export default function App() {
  const [city, setCity] = useState<string>("ny");

  console.log(cities[city].label); //what's wrong here

  return (
    <div className="App">
      hi
    </div>
  );
}

任何线索如何摆脱这种错误？

Answer 1

您说城市在声明时只有两个键：“ny”和“ld”，但是您允许任何城市成为您的城市元素的键。

改变：

useState<string>

至

useState<"ny" | "ld">("ny")

应该可以解决您的问题。

如果你想允许更多的城市，你也可以用这种方法 go ：

type City = {
  [key: string]: {
    label: string;
  };
};

const cities: City = {
  ny: {
    label: "New York",
  },
  ld: {
    label: "London",
  },
};

并保持你的 useState。

最后，您可以使用以下命令根据您的城市 const 动态生成可能的密钥：

const [city, setCity] = useState<keyof typeof cities>("ny");

Answer 2

您不能使用string类型来访问没有索引类型的 object 上的属性。 但是如果你使用useState<keyof typeof cities>("ny"); 这将表明它不仅仅是一个字符串，而是对象中的特定字符串（在这种情况下为“ny”和“ld”）。

如果需要，您还可以使用enum和索引类型:)

Answer 3

cities是无类型的， cities.ny也是，它的字面意思是“隐式具有'任何'类型”。 为了摆脱这个错误，你应该为你的变量提供类型，例如你可以这样做：

interface City {
    label: string
}

const cities: {[name: string]: City} = {
    ny: {
        label: "New York"
    },
    ld: {
        label: "London"
    }
};

编译器会知道label的类型。