如何通过接口对功能组件中的useState做出反应？

Question

我正在尝试将接口向下传递以响应useState，但这样做时却收到此错误。

类型'“”'的参数不能分配给类型的参数 'EditProfileInterface | （（）=> EditProfileInterface）'

我在做什么错？我试图告诉打字稿检查bio是否为字符串。我知道我可以做类似useState<String>('')的事情，但是我想使用一个界面。

interface EditProfileInterface {
    bio: string;
    gravatar: string;
}

function EditProfile(props: any) {
    const [bio, setBio] = useState<EditProfileInterface>('');
    .....
}

Answer 1

您应该改为这样做：

const [bio, setBio] = useState<EditProfileInterface['bio']>('');

这将缩小bio界面中所需的特定属性（EditProfileInterface）。

Answer 2

您将字符串（''）作为默认值，但使用EditProfileInterface作为类型。 EditProfileInterface是定义两个属性（字符串）的接口。