当前位置：首页 > news >正文

TypeScript 泛型 T 详细解释

news 2025/10/1 0:00:47

什么是泛型

T 是一个类型变量，代表"某种类型"

举个例子

loadMore: (page: number) => Promise<T[]>;
相当于说：这个函数返回一个Promise，Promise解析的结果是T类型的数组

实际使用时的具体化

// 当 T = Product 时：
loadMore: (page: number) => Promise<Product[]>;// 当 T = string 时：
loadMore: (page: number) => Promise<string[]>;// 当 T = User 时：
loadMore: (page: number) => Promise<User[]>;

在组件中的完整应用

// 定义泛型组件
interface InfiniteScrollProps<T = any> {loadMore: (page: number) => Promise<T[]>;  // T 在这里定义renderItem: (item: T, index: number) => React.ReactNode;  // 这里也用 T
}// 使用泛型组件时，T 会被具体类型替换
function ProductList() {return (<InfiniteScroll<Product>  // 这里明确指定 T = ProductloadMore={fetchProducts}  // 现在这个函数需要返回 Promise<Product[]>renderItem={(product) => (  // 这里的 product 自动就是 Product 类型<div>{product.name} - ${product.price}</div>)}/>);
}

举个例子

用户数据

// 定义用户类型
interface User {id: number;name: string;email: string;avatar: string;
}function UserList() {// 加载用户数据的函数 - 必须返回 User[]const loadUsers = async (page: number): Promise<User[]> => {const response = await fetch(`/api/users?page=${page}`);const data = await response.json();return data.users; // 这里必须是 User[] 类型};// 渲染用户项 - item 自动推断为 User 类型const renderUser = (user: User) => (<div className="user-card"><img src={user.avatar} alt={user.name} /><h3>{user.name}</h3><p>{user.email}</p></div>);return (<InfiniteScroll<User>  // 明确指定类型loadMore={loadUsers}renderItem={renderUser}/>);
}

文章数据

// 定义文章类型
interface Article {id: string;title: string;content: string;author: string;createdAt: Date;
}function ArticleList() {const loadArticles = async (page: number): Promise<Article[]> => {const response = await fetch(`/api/articles?page=${page}`);return response.json(); // 返回 Article[]};const renderArticle = (article: Article) => (<article><h2>{article.title}</h2><p>By {article.author}</p><div>{article.content}</div></article>);return (<InfiniteScroll<Article>loadMore={loadArticles}renderItem={renderArticle}/>);
}

类型自动推断

如果不显式指定，TypeScript 会尝试自动推断：

function Example() {// TypeScript 会根据 loadMore 的返回值推断 T = Productconst loadMore = async (page: number): Promise<Product[]> => {// ...};// 这里不需要显式写 <Product>return (<InfiniteScrollloadMore={loadMore}  // TypeScript 知道这里 T = ProductrenderItem={(product) => {  // product 自动就是 Product 类型product.id;    // ✅ 正确product.name;  // ✅ 正确  product.abc;   // ❌ 错误：Product 类型没有 abc 属性}}/>);
}

泛型的优势

类型安全

interface Product {id: number;name: string;price: number;
}// 如果 loadMore 返回了错误类型，TypeScript 会报错
const loadMore = async (page: number): Promise<Product[]> => {return [{ id: 1, name: "Phone", price: 999 },{ id: 2, name: "Tablet", price: 699 },{ id: 3, name: "Laptop" } // ❌ 错误：缺少 price 属性];
};

智能提示

const renderItem = (product: Product) => {// 编辑器会提供 Product 的所有属性提示：product. // 输入 . 后会提示：id, name, price
};

复杂类型示例

嵌套对象

interface Post {id: number;title: string;author: {id: number;name: string;avatar: string;};tags: string[];
}function PostList() {const loadMore = async (page: number): Promise<Post[]> => {// 必须返回 Post[] 类型};const renderItem = (post: Post) => (<div><h3>{post.title}</h3><img src={post.author.avatar} alt={post.author.name} /><div>{post.tags.map(tag => (<span key={tag}>{tag}</span>))}</div></div>);return (<InfiniteScroll<Post>loadMore={loadMore}renderItem={renderItem}/>);
}

默认类型

在类型定义中，我们可以给泛型一个默认类型：

// T = any 表示如果不指定类型，就使用 any
interface InfiniteScrollProps<T = any> {loadMore: (page: number) => Promise<T[]>;renderItem: (item: T, index: number) => React.ReactNode;
}// 这样使用时，T 就是 any 类型（不推荐，失去类型安全）
function AnyList() {return (<InfiniteScroll  // 没有指定 <T>loadMore={async (page) => [{ anything: 'here' }]}  // 返回 any[]renderItem={(item) => (<div>{item.anything}     // ✅ 不会报错，但也没有类型提示{item.something}    // ✅ 也不会报错</div>)}/>);
}