Question

React - 如何编写 API 映射器？

2021-11-07

267

reactjs typescript

我正在研究 React 和 TypeScript。抱歉我的英语不好...

我正在尝试制作 Web 服务，并且需要在我的 React 项目中制作 API 键映射器（使用 TypeScript）。首先，我的服务器是用 python 编写的，因此键名称约定是 snake_case 。但我使用的是 TypeScript，所以我想编写 JSON 映射器，而无需任何模块或类。

我这样编写映射器：

// api result: { "hello_world": "hello world!" }

const Mapper = {
  HELLO_WORLD: 'hello_world', // snake_case because server is written with python
} as const;

interface APIResult {
  [Mapper.HELLO_WORLD]: string;
}

但是，当我必须使用 API 结果对象时，我需要这样编写：

// in React components

const text = result[Mapper.HELLO_WORLD]

我认为这是相当丑陋的代码.. 有没有更好的 API 映射器方法？

Answer 1

您可以创建一个清理函数将 raw_API_Response 转换为您的 expectedAPIResponse，如下所示：

interface RawResponse {
  hello_world: string;
  another_world: number;
  snack_case_to_camel_case: string;
}

interface expectedResponse {
  helloWorld: string;
  anotherWorld: number;
  snackCaseToCamelCase: string;
}


function sanitizeResponse(raw: RawResponse) : expectedResponse {
  const result: expectedResponse = {
    helloWorld: raw.hello_world,
    anotherWorld: raw.another_world,
    snackCaseToCamelCase: raw.snack_case_to_camel_case,
  };
  return result;
}

console.log(sanitizeResponse({
  hello_world: 'string',
  another_world: 100,
  snack_case_to_camel_case: 'another string'
}));