对象键(可选),带有打字稿,但可以调用

时间:2020-04-15 04:02:49

标签: reactjs typescript

我声明了以下interfaces

export interface User {
  ...
  first: string;
  ...
}

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

在我的react组件中,我希望能够像这样访问first中的UserDataState

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>)})

我不想让用户首先成为可选用户,并且我需要能够返回一个空对象作为凭据。这很烦人。

3 个答案:

答案 0 :(得分:1)

我建议您使用optional chaning

例如,在您的情况下,我将执行以下操作:

export interface UserDataState {
  credentials: User | undefined;
}

要从{{1}的first访问crendentials(假设state是可空的),而不是这样做:

state

您只需要使用可选的链接运算符state && state.credentials && state.credentials.first

?.

这样做,您将不会通过显式强制转换(例如强制转换为state?.credentials?.first )来损害代码库的类型安全。

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

答案 1 :(得分:0)

我了解了

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;

不确定这是否是最佳做法,如果有人有更好的方法愿意听它

答案 2 :(得分:0)

您可以执行以下操作,因此基本上您在执行的操作是强制将其变为User类型:

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