在 TypeScript 中,虽然 interface 是最常用的类型定义方式,但有多种替代方案可以用于定义 LinkItem 类型。以下是各种替代方案的详细说明和代码示例:

1. 使用类型别名 (Type Alias)

// 使用 type 替代 interface
type LinkItem = {
  value: string;
  link: string;
};

const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

2. 内联类型定义

// 直接在函数参数中定义类型
const createFilter = (queryString: string) => {
  return (restaurant: { value: string; link: string }) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

3. 使用类 (Class)

// 使用类定义类型
class LinkItem {
  constructor(
    public value: string,
    public link: string
  ) {}
}

const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

4. 使用泛型

// 使用泛型定义更通用的过滤器
const createFilter = <T extends { value: string }>(queryString: string) => {
  return (item: T) => {
    return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

// 使用示例
const filterRestaurants = createFilter<LinkItem>("ma");

5. 使用类型工具 (Utility Types)

// 使用 Record 工具类型
type LinkItem = Record<"value" | "link", string>;

// 或者使用 Pick/Omit
type ValueItem = Pick<LinkItem, "value">; // 只包含 value 属性

const createFilter = (queryString: string) => {
  return (restaurant: ValueItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

6. 使用函数类型

// 定义函数类型
type FilterFunction = (item: { value: string }) => boolean;

const createFilter = (queryString: string): FilterFunction => {
  const lowerQuery = queryString.toLowerCase();
  return (item) => item.value.toLowerCase().startsWith(lowerQuery);
};

7. 使用枚举 (Enums) - 当需要固定值时

// 当 value 是预定义值时
enum RestaurantValues {
  McDonalds = "McDonald's",
  BurgerKing = "Burger King",
  KFC = "KFC",
}

type LinkItem = {
  value: RestaurantValues;
  link: string;
};

const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

8. 使用联合类型 (Union Types)

// 当有多种可能类型时
type LinkItem = 
  | { type: "restaurant"; value: string; link: string }
  | { type: "product"; name: string; url: string; price: number };

const createFilter = (queryString: string) => {
  return (item: LinkItem) => {
    if (item.type === "restaurant") {
      return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
    }
    return item.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

9. 使用元组 (Tuples) - 当有固定结构时

// 使用元组定义简单结构
type LinkItemTuple = [string, string]; // [value, link]

const createFilter = (queryString: string) => {
  return (restaurant: LinkItemTuple) => {
    const [value] = restaurant;
    return value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

10. 使用命名空间 (Namespaces) - 组织复杂类型

namespace Types {
  export interface LinkItem {
    value: string;
    link: string;
  }
}

const createFilter = (queryString: string) => {
  return (restaurant: Types.LinkItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

完整优化示例

// 最佳实践:使用 type 定义类型
type LinkItem = {
  value: string;
  link: string;
};

/**
 * 创建餐厅名称过滤器
 * @param queryString 搜索查询字符串
 * @returns 过滤函数,检查餐厅名称是否以查询字符串开头
 */
const createFilter = (queryString: string) => {
  const lowerQuery = queryString.toLowerCase();
  
  return (restaurant: LinkItem) => {
    // 空查询匹配所有项目
    if (!lowerQuery) return true;
    
    // 使用更高效的 startsWith
    return restaurant.value.toLowerCase().startsWith(lowerQuery);
  };
};

// 使用示例
const restaurants: LinkItem[] = [
  { value: "McDonald's", link: "/mcdonalds" },
  { value: "Burger King", link: "/burger-king" },
  { value: "KFC", link: "/kfc" },
];

// 创建过滤器
const filterM = createFilter("m");
const mRestaurants = restaurants.filter(filterM);
console.log(mRestaurants); // 输出: [{ value: "McDonald's", link: "/mcdonalds" }]

何时选择哪种方案?

  1. 优先使用 type

    • 大多数情况下可以替代 interface

    • 更简洁,支持联合类型、元组等高级类型

  2. 使用 interface 的情况

    • 需要扩展接口时 (extends)

    • 需要声明合并(多次声明同一接口)

    • 类需要实现接口时

  3. 其他方案的特殊场景

    • 内联类型:只在一个地方使用的简单类型

    • 类:需要实例化和方法

    • 泛型:创建高度可复用的工具函数

    • 工具类型:从现有类型创建新类型

    • 枚举:定义一组命名常量

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐