flowtype - TypeScript-typ eller gränssnitt för normaliserade data


TLDR: Hur skapar man ett gränssnitt för normaliserade data?

Jag bygger en React-applikation med TypeScript. Jag använder Normalizr för att normalisera datan från mina API-anrop.

För att ge ett exempel från dokumentationen, ett API-svar som detta:

Snabbstart Överväg ett typiskt blogginlägg. API-svaret för ett enskilt inlägg kan se ut ungefär så här:

{
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [
    {
      "id": "324",
      "commenter": {
        "id": "2",
        "name": "Nicole"
      }
    }
  ]
}

Kan normaliseras till detta:

{
  result: "123",
  entities: {
    "articles": {
      "123": {
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: [ "324" ]
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
  }
}

Jag skulle vilja skapa gränssnitt för mina funktioner som använder Normalizr. Här är vad jag har försökt hittills:

export interface House {
  uuid: string;
  address: string;
}

export interface Citizen {
  uuid: string;
  name: string;
}

export interface NormalizedData<T> {
  [uuid: string]: T;
}

export interface Entity<T> {
  [name: string]: NormalizedData<T>;
}

export interface NormalizerResult<T> {
  result: any;
  entities: Entity<T>;
}

Eftersom jag måste ange en generisk typ T här, kan detta tillvägagångssätt bara hantera en enhet. Problemet är att entities-nyckeln kan ha flera enheter av olika typer, t.ex. House och Citizen (och fler). Hur skulle jag ta hänsyn till detta? Normalzirs egna typer ger bara tillbaka { result: any, entities: any }.

Svar #1

Jag antar att du vill ha något sådant här

export interface NormalizerResult<T extends House | Citizen> {
  result: any;
  entities: Entity<T>;
}

P.S. Typescript är mer användbart när du 100% vet strukturen på svaret och är mindre användbart om svaret är olika varje gång. Om det förstnämnda är korrekt, då bör du göra typer för varje svar, t.ex.

export interface NormalizerResultForHousesAndCitizensRequest {
  result: any;
  entities: {
    houses: NormalizedData<House>,
    citizens: NormalizedData<Citizen>,
  };
}

Relaterade artiklar