인프런 커뮤니티 질문&답변

현 강의를 시청하는 중 "layout/workspace" 의 useSWR를 사용할때 제너릭을  <IUser | false> 로 지정해 준 후 기존에 적혀있는 userData에서 아래와 같은 타입에러가 나기 시작했습니다.

Property 'email' does not exist on type 'false | IUser'. Property 'email' does not exist on type 'false'.

 

깃헙 코드와 비교해보았지만 다른점은 없었고, 어떤부분이 문제가되어 이러한 오류가 발생하는 걸까요?

해당 오류 때문에 제너릭을 지우고 아래 Workspaces.map((ws) => ...) 부분의 ws : IWorkspace 로 타입지정을 해주면 이상없이 동작하기는 합니다.

구글링을 해보아도 현재버전 타입스크립트 이슈가 따로 있지는 않은것 같고, 어디 실수한 부분이 있을까요?

 

import { IUser } from '../../DataTypes';

const { data: userData, mutate } = useSWR<IUser | false>('http://localhost:3095/api/users', fetcher);

//..//

<span onClick={onClickUserProfile}>
  <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} />
  {showUserMenu && (
    <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}>
      <img src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} />
      <div>
        <span id={'profile-name'}>{userData.nickname}</span>
        <span id={'profile-active'}>Active</span>
      </div>
      <LogOutButton onClick={onLogout}>Logout</LogOutButton>
    </Menu>
  )}
</span>

{userData?.Workspaces.map((ws) => {
  return (
    <Link key={ws.id} to={`/workspaces/${123}/channel/일반`}>
      <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton>
    </Link>
  );
})}