json - 无法获取嵌套 JSON 对象属性 Typescript

Question

我想从 https://api.exchangeratesapi.io/latest 获取 CAD 值 我已经使用了很多类型的代码，它说“TypeError:无法读取未定义的属性'CAD'” 真的需要您的帮助，非常感谢。

如果我控制台此代码，它会输出所有货币

((this.state.data as any).rates)

但是当我想获取 CAD 货币时，它显示错误

我已经尝试过这些代码:

((this.state.data as any).rates as any).CAD
(this.state.data as any)["Rates"]["CAD"];
(this.state.data as any)["Rates"].CAD;

我获取数据的方式是

interface IState {
  data?: object | null;
  isCurrency?: boolean;
  Currency?: string;
  Rate?: number;
}

export default class Header extends Component<{}, IState> {
  service: UserService = new UserService();
  state = {
    isCurrency: false,
    Currency: "USD",
    Rate: 1,
    data: [] = []
  };

  async componentDidMount() {
    let result = await this.service.getAllCurrency();
    this.setState({
      data: (result as Pick<IState, keyof IState>).data
    });
    console.log(result);
  }
}

1.4591(基于最新API)

Answer 1

您应该为您的数据创建一个类型。因为它来自外部源，所以 typescript 无法推断这一点。然后解析您的 JSON 并将其转换为该类型。

// Create a type for the expernal data.
interface Data {
    rates: {
        [currency: string]: number
    }
    base: string
    date: string
}

// Result of `JSON.parse()` will be `any`, since typescript can't parse it.
const untypedData = JSON.parse(`{
  "rates": {
    "CAD": 1.4591,
    "HKD": 8.6851,
    "ISK": 135.9,
    "PHP": 56.797,
    "DKK": 7.4648
  },
  "base": "EUR",
  "date": "2019-07-25"
}`)

// Cast the untyped JSON to the type you expect it to be.
const data: Data = untypedData

// Use the data according to it's type.
alert(data.rates.CAD)

Working demo on typescript playground