如何訪問 React TypeScript 中的嵌套數據接口

Question

在 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

Answer 1

TypeScript 只是類型安全的 JavaScript，即您將練習相同的方法並找到例如

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

由於這里的prices是Array類型（並且取決於您的應用程序），您需要知道哪個索引是相關的並更改x 。 或者，如果有多個，您可能會找到map 、 filter或reduce來方便地提取您想要的項目。