Ключ объекта необязательный для машинописного текста, но в состоянии вызвать его

Question

У меня есть следующее interfaces объявленное

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

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

В моем реактивном компоненте я хочу иметь возможность доступа к 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

Я предлагаю вам использовать необязательный параметр .

Например, в вашем случае я бы сделал следующее:

export interface UserDataState {
  credentials: User | undefined;
}

Для доступа first с crendentials с state (предположим, state обнуляем) вместо того, чтобы делать:

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

Вам просто нужно использовать дополнительный оператор цепочки ?.

state?.credentials?.first

Делая это, вы не поставите под угрозу безопасность типов вашей кодовой базы с явным приведением, например приведением к any.

Эта идиома довольно стандартна для Typescript 3.7 и выше.

Answer 2

Вы можете сделать что-то вроде этого, поэтому в основном вы выполняете принудительное задание типа, который будет типом User:

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

Answer 3

Я работал с

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;

Не уверен, что это лучшая практика, если у кого-то есть лучший метод, который хотел бы услышать это