面试题：TypeScript映射类型与React组件属性处理

Question

在React项目中，有一个通用的卡片组件`Card`，它接收一些通用属性如`title`、`description`等，同时可以接收一些自定义属性。现在要求利用TypeScript的映射类型，创建一个类型，使得当传入不同的自定义属性时，能自动推导出对应的属性类型，并在组件中正确使用这些属性。例如，如果传入`{ link: 'https://example.com' }`，能推导出`link`是字符串类型。请写出完整的TypeScript代码，包括组件定义和类型定义。

Answer 1

import React from'react';

// 定义映射类型
type CustomProps<T extends Record<string, unknown>> = {
    title: string;
    description: string;
} & T;

// 定义Card组件
const Card = <T extends Record<string, unknown>>({ title, description, ...customProps }: CustomProps<T>) => {
    return (
        <div>
            <h2>{title}</h2>
            <p>{description}</p>
            {/* 这里可以根据customProps进行自定义渲染 */}
        </div>
    );
};

// 使用示例
const App: React.FC = () => {
    const customData = { link: 'https://example.com' };
    return (
        <Card title="示例卡片" description="这是一个示例描述" {...customData} />
    );
};

export default App;