规范化数据的 TypeScript 类型或接口

Posted 2023-02-22

【中文标题】规范化数据的 TypeScript 类型或接口

【英文标题】：TypeScript Type or Interface for Normalized Data

【发布时间】：2019-03-21 22:29:09

【问题描述】：

TLDR：如何为规范化数据创建接口？

我正在使用 TypeScript 构建一个 React 应用程序。我使用Normalizr 对来自我的 API 调用的数据进行规范化。

举个文档中的例子，A​​PI 响应如下：

快速入门 考虑一篇典型的博客文章。单个帖子的 API 响应可能如下所示：

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

可能被归一化为：

  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" 
    
  

我想为使用 Normalizr 的函数创建接口。到目前为止，这是我尝试过的：

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

由于我必须在这里给出一个泛型类型 T，所以这种方法只能处理一个实体。问题是实体键可以有多个不同类型的实体，例如。众议院和公民（以及更多）。我将如何解释这个？ Normalizr 自己的类型只是回馈 result: any, entities: any 。

【参考方案1】：

我猜你想要这样的东西

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

附：当您 100% 了解响应的结构时，Typescript 会更有用，而如果每次响应都不同，则 Typescript 的用处会降低。如果前者是正确的，那么您应该为每个响应制作类型，例如

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

【讨论】：

如果没有任何隐式的强类型，如何实现？

@iamcastelli 大概您知道这些实体的密钥类型。如果它们是数字，你会想要 result: number 或 result: number[]