打字稿不定式界面推断自身

Question

我正在寻找一种从此API响应中制作类型/接口的方法，嵌套注释属性对我来说是具有挑战性的。

"data": [
            {
                "id": 1,
                "comment": "This is the comment to another comment",
                "approved": true,
                "archived": 0,
                "pinned": 0,
                "reported": 0,
                "created_at": "2022-06-24T06:12:25.000000Z",
                "updated_at": "2022-06-24T06:12:25.000000Z",
                "comments": [
                    {
                        "id": 2,
                        "comment": "This is the comment to another comment",
                        "approved": true,
                        "archived": 0,
                        "pinned": 0,
                        "reported": 0,
                        "created_at": "2022-06-24T06:12:37.000000Z",
                        "updated_at": "2022-06-24T06:12:37.000000Z",
                        "comments": [
                            {
                                "id": 3,
                                "comment": "This is the comment to another comment",
                                "approved": true,
                                "archived": 0,
                                "pinned": 0,
                                "reported": 0,
                                "created_at": "2022-06-24T06:32:52.000000Z",
                                "updated_at": "2022-06-24T06:32:52.000000Z",
                                "comments": [],
                                "commented": {
                                    "id": 1,
                                    "first_name": "Test",
                                    "last_name": "Testi",
                                    "full_name": "Test Testi"
                                }
                            },
                            {
                                "id": 4,
                                "comment": "This is the comment to another comment",
                                "approved": true,
                                "archived": 0,
                                "pinned": 0,
                                "reported": 0,
                                "created_at": "2022-06-24T06:32:57.000000Z",
                                "updated_at": "2022-06-24T06:32:57.000000Z",
                                "comments": [],
                                "commented": {
                                    "id": 1,
                                    "first_name": "Test",
                                    "last_name": "Testi",
                                    "full_name": "Test Testi"
                                }
                            }
                        ],
                        "commented": {
                            "id": 1,
                            "first_name": "Test",
                            "last_name": "Testi",
                            "full_name": "Test Testi"
                        }
                    }
                ],
                "commented": {
                    "id": 1,
                    "first_name": "Test",
                    "last_name": "Testi",
                    "full_name": "Test Testi"
                }
            },
        ],

Answer 1

export interface Comment {
  id: number;
  comment: string;
  approved: boolean;
  archived: boolean;
  pinned: boolean;
  reported: boolean;
  created_at: string;
  updated_at: string;
  comments: Comment[];
  commented: {
    id: number;
    first_name: string;
    last_name: string;
    full_name: string;
  };
}

Answer 2

Typescript Playground Link

Comment is part of lib.dom .d.ts，所以更好地使用commentdata而不是

interface CommentData {
  id: number;
  comment: string;
  approved: boolean;
  archived: number;
  pinned: number;
  reported: number;
  created_at: string;
  updated_at: string;
  comments: CommentData[];
  commented: User;
}

interface User {
  id: number;
  first_name: string;
  last_name: string;
  full_name: string;
}

interface Data {
  data: CommentData[];
}

const data: Data = {
  data: [
    {
      id: 1,
      comment: "This is the comment to another comment",
      approved: true,
      archived: 0,
      pinned: 0,
      reported: 0,
      created_at: "2022-06-24T06:12:25.000000Z",
      updated_at: "2022-06-24T06:12:25.000000Z",
      comments: [
        {
          id: 2,
          comment: "This is the comment to another comment",
          approved: true,
          archived: 0,
          pinned: 0,
          reported: 0,
          created_at: "2022-06-24T06:12:37.000000Z",
          updated_at: "2022-06-24T06:12:37.000000Z",
          comments: [
            {
              id: 3,
              comment: "This is the comment to another comment",
              approved: true,
              archived: 0,
              pinned: 0,
              reported: 0,
              created_at: "2022-06-24T06:32:52.000000Z",
              updated_at: "2022-06-24T06:32:52.000000Z",
              comments: [],
              commented: {
                id: 1,
                first_name: "Test",
                last_name: "Testi",
                full_name: "Test Testi",
              },
            },
            {
              id: 4,
              comment: "This is the comment to another comment",
              approved: true,
              archived: 0,
              pinned: 0,
              reported: 0,
              created_at: "2022-06-24T06:32:57.000000Z",
              updated_at: "2022-06-24T06:32:57.000000Z",
              comments: [],
              commented: {
                id: 1,
                first_name: "Test",
                last_name: "Testi",
                full_name: "Test Testi",
              },
            },
          ],
          commented: {
            id: 1,
            first_name: "Test",
            last_name: "Testi",
            full_name: "Test Testi",
          },
        },
      ],
      commented: {
        id: 1,
        first_name: "Test",
        last_name: "Testi",
        full_name: "Test Testi",
      },
    },
  ],
};

console.log(data);