TypeScript 中替代 Interface 的方案

在 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;// 使用更高效的 startsWithreturn 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. 其他方案的特殊场景：

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

   • 类：需要实例化和方法

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

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

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