面试题：TypeScript接口在复杂场景下的类型推断与泛型结合

Question

编写一个泛型函数`fetchData`，它接受一个表示API路径的字符串参数和一个接口类型参数`T`。函数内部模拟通过`fetch`获取数据（可以用`Promise.resolve`模拟返回数据），返回的数据结构是一个包含`data`属性（类型为`T`）和`status`属性（字符串类型，表示状态）的对象。然后定义一个接口`Product`，包含`id`（数字类型）、`name`（字符串类型）和`price`（数字类型）属性。调用`fetchData`函数获取`Product`类型的数据，并处理返回结果，在控制台打印出产品的名称和价格。要求详细解释在这个过程中TypeScript接口是如何与泛型配合进行类型推断的，以及这样做的优势。

Answer 1

// 定义接口Product
interface Product {
    id: number;
    name: string;
    price: number;
}

// 编写泛型函数fetchData
function fetchData<T>(path: string): Promise<{ data: T, status: string }> {
    // 模拟通过fetch获取数据
    return Promise.resolve({
        data: {} as T,
        status: 'ok'
    });
}

// 调用fetchData函数获取Product类型的数据
fetchData<Product>('/products')
   .then(result => {
        console.log(`产品名称: ${result.data.name}, 价格: ${result.data.price}`);
    })
   .catch(error => {
        console.error('获取数据失败:', error);
    });

类型推断解释

1. 泛型参数T：在fetchData函数定义中，<T>表示一个类型参数。在调用fetchData<Product>('/products')时，将T指定为Product类型。这样，fetchData函数返回的Promise对象中的data属性就被推断为Product类型。
2. 接口Product：定义了Product接口，明确了数据应该具有的结构。在fetchData函数返回值类型中，<T>的实际类型Product满足data属性的类型要求。同时，在处理fetchData返回结果时，TypeScript知道result.data的类型是Product，所以可以安全地访问name和price属性。

优势

1. 代码复用：fetchData函数通过泛型T可以适用于任何数据类型，而不需要为每种数据类型单独编写获取数据的函数。
2. 类型安全：结合接口，TypeScript在编译时就能检查类型是否匹配。如果fetchData返回的数据结构与接口Product不匹配，编译时就会报错，减少运行时错误。
3. 可读性：接口和泛型的使用使得代码结构清晰，开发者能清楚知道数据的预期结构和函数的类型参数，提高代码的可维护性。