Question

我声明了以下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>)})

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

Answer 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及更高版本中是非常标准的。

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;

对象键（可选），带有打字稿，但可以调用

3 个答案: