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

Question

我想从https://api.exchangeratesapi.io/latest获得CAD值我已经使用了这么多类型的代码，它说"TypeError: Cannot read property 'CAD' of undefined"真的需要你的帮助，非常感谢。

如果我操控这段代码，它会输出所有的货币

((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