面试题：TypeScript中如何对React组件Props进行基本类型约束

Question

假设你有一个React组件，接收一个`name`属性用于显示用户名称，用TypeScript写出对该`name`属性进行字符串类型约束的代码，并说明如何在组件中使用这种约束。

Answer 1

1. 对name属性进行字符串类型约束的代码：

import React from'react';

// 定义组件的props类型
interface UserComponentProps {
  name: string;
}

const UserComponent: React.FC<UserComponentProps> = ({ name }) => {
  return <div>{name}</div>;
};

export default UserComponent;

2. 在组件中使用这种约束： 在使用UserComponent组件时，传入的name属性必须是字符串类型，如下：

import React from'react';
import UserComponent from './UserComponent';

const App: React.FC = () => {
  return (
    <div>
      <UserComponent name="John Doe" />
    </div>
  );
};

export default App;

如果传入非字符串类型的值，TypeScript编译器会报错，确保了类型安全。