如何在 React TypeScript 中访问嵌套数据接口答案

【问题标题】：How to access nested data interface in React TypeScript如何在 React TypeScript 中访问嵌套数据接口
【发布时间】：2020-08-01 23:49:28
【问题描述】：

在 React TypeScript 中，在如下所示的嵌套接口中访问数据的适当方法是什么？

export interface School {
  prices: Array<{
    state: {
      response_header?: {
        school_type_opportunities?: Array<{ benefit_type_opportunity?: string }>;
        school_alternative_products?: Array<{
          school_alternative_cost_share_incentive?: string;
          school_alternative_description?: string;
          school_alternative_id?: string;
          school_attendance_required?: Array<{
            school_attendance_location?: string;
            school_attendance_blabla?: string;
            school_attendance_blabla2?: string;
          }>;
        }>;

我想访问：

school_type_opportunities
school_alternative_description
school_attendance_location

【问题讨论】：

我建议阅读例如developer.mozilla.org/en-US/docs/Web/JavaScript/Guide。如果你不了解基本的 JS，你在 TS 和 React 中将一事无成。
@jonrsharpe 好点，因为我来自 python 背景

标签： javascript arrays reactjs typescript react-native

【解决方案1】：

TypeScript 只是类型安全的 JavaScript，也就是说，您将练习相同的方法并找到例如

const schoolTypeOportunities =
  School.prices[x].state.response_header.school_type_opportunities;

由于prices 在此处属于Array 类型（取决于您的应用程序），您需要知道哪个索引是相关的并更改x。或者，如果有多个，您可以找到map、filter 或reduce 方便提取您想要的项目。

【讨论】：