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" }]何时选择哪种方案？
优先使用
type：大多数情况下可以替代
interface更简洁，支持联合类型、元组等高级类型
使用
interface的情况：需要扩展接口时 (
extends)需要声明合并（多次声明同一接口）
类需要实现接口时
其他方案的特殊场景：
内联类型：只在一个地方使用的简单类型
类：需要实例化和方法
泛型：创建高度可复用的工具函数
工具类型：从现有类型创建新类型
枚举：定义一组命名常量