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

所有评论(0)