运行正常但写法怪异的TypeScript代码如何进行重构优化？

原有代码存在的问题 #

• 接口定义不规范：LocationResult重复定义，存在类型冲突；缺失Address、LocationOptions接口定义；接口名apiRequest不符合TS大驼峰命名规范
• 变量命名歧义：布尔类型的city变量容易被误认为是字符串类型；locationCities实际存储的是国家字段数组，和命名完全不符
• 隐含逻辑bug：从address中取country字段判断城市London是否存在，逻辑完全不匹配
• 写法语义化弱：用[].concat(...locationCities)拍平数组的写法不如内置flat()/flatMap()方法直观
• 冗余判断&提示模糊：if(city === true)属于多余的布尔值全等判断；抛出的错误只有error字样，完全无法定位问题

第一步：重构apiClient层代码 #

import axios from "axios";

// 补全缺失的接口定义
export interface LocationOptions {
  cityName: string;
}

interface Address {
  country: string;
  city: string;
}

interface FOLocations {
  locationId: number;
}

// 接口名统一大驼峰，删除重复定义，合并字段
export interface ApiRequest {
  locations: LocationOptions[];
}

export interface LocationResult {
  location: FOLocations[];
  address: Address;
}

export const locationCheck = async (
  apiKey: string,
  payload: ApiRequest
): Promise<LocationResult[]> => {
  const response = await axios.post<LocationResult[]>(
    `api...`,
    payload
  );
  return response.data;
};

第二步：重构业务逻辑代码 #

const locationPayload: ApiRequest = {
  locations: [{ cityName: "London" }, { cityName: "New York" }, { cityName: "Paris" }],
};
const locationResponse = await locationCheck(apiKey, locationPayload);

// 直接拉取所有地址的城市字段，判断是否存在伦敦
const isLondonExisted = locationResponse
  .map(location => location.address.city)
  .includes('London');

if (isLondonExisted) {
  console.log(`London location exist`);
} else {
  throw new Error("London location not found in query results");
}

如果实际业务中address是数组类型，只需要调整判断逻辑即可：

const isLondonExisted = locationResponse
  .flatMap(location => location.address.map(item => item.city))
  .includes('London');

重构优势说明 #

1. 类型完全合规：所有接口定义完整无冲突，符合TS类型规范，开发阶段就能避免类型错误
2. 逻辑清晰易读：变量命名见名知意，链式调用语义明确，不需要额外注释就能理解完整逻辑
3. 性能更优：省去了不必要的嵌套map和冗余数组操作，直接取所需字段判断即可
4. 可维护性强：错误提示明确，后续修改逻辑时不需要反向梳理原有歧义命名的变量含义

内容的提问来源于stack exchange，提问作者PoolWorld