对象键对于typescript是可选的，但可以调用它

Question

我有以下声明的interfaces

export interface User {
...
first: string;
...
}
export interface UserDataState {
credentials: User | {};
..
}

在我的react组件中，我希望能够访问UserDataState中的first，如下所示：

const userData = useSelector((state: RootState) => state.user.credentials);
Welcome, { userData.first }

然而，我得到这个错误

Property 'first' does not exist on type '{} | User'.

所以我尝试了以下方法：

let userFirst = '';
if (userData.hasOwnProperty('first')) {
userFirst = userData.first;
}
...
return ( <span>{userFirst}</span>)

和。。

return ( {userData && userData.first && (<span>{userData.first}</span>)})

我不想让用户优先是可选的，我需要能够将一个空对象作为凭据返回到。这很烦人。

Answer 1

我建议您使用可选的chaning。

例如，在您的情况下，我将执行以下操作：

export interface UserDataState {
credentials: User | undefined;
}

从crendentials从state访问first(假设state可以为null(，而不是执行：

state && state.credentials && state.credentials.first

您只需要使用可选的链式运算符?.

state?.credentials?.first

通过这样做，您不会通过显式强制转换(例如强制转换为any(来损害代码库的类型安全性。

这个习语在Typescript 3.7及更高版本中非常标准。

Answer 2

我让它与一起工作

const user = useSelector((state: RootState) => state.user.credentials);
const userData: any = user;
// or this works to
import { User as UserType } from '../types';
const userData: { first?: UserType['first'] } = user;

不确定这是否是最佳实践，如果有人有更好的方法，会很乐意听到

Answer 3

你可以这样做，所以基本上你所做的是强制执行它将是User类型的类型：

const userData = useSelector((state: RootState) => state.user.credentials) as User;