[React.tsx] 'never'형식에 '...'속성이 없습니다 (Typescript Never Type)

생각해보면 당연한 내용이였는데 왜 안되는지 한참을 고민했기에, 기억을 강화하기 위해 작성한다.

never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다.

-- Typescript 가이드북

나는 React + Redux를 적용하는 도중 문제를 직면했다.

타입 지정

export interface UserSearchList {
    characterId: string;
    characterName: string;
    jobGrowId: string;
    jobGrowName: string;
    jobId: string;
    jobName: string;
    level: number;
    serverId: string;
    serverName: string;
}

export interface UserDefaultInfo extends UserSearchList {
    adventureName: string;
    guildId: string;
    guildName: string;
}

컴포넌트

// Collapse-Wrapper.tsx

import { useSelector } from 'react-redux';

const CollapseWrapper = () => {
    const searchType = useSelector((state: RootState) => state.userInfo.characterId); // characterId >> 'never' 형식에 'characterId' 속성이 없습니다.

    return (
        <div className="collapse-wrapper">
            ...
        </div>
    )
}

export default CollapseWrapper;

그리고 문제의 userInfo reducer.

// userInfo.ts

const DEFAULTINFO = 'USER/DEFAULTINFO' as const;

// action funcs
export const setUserDefaultInfo = ({
    characterId,
    characterName,
    jobGrowId,
    jobGrowName,
    jobId,
    jobName,
    level,
    serverId,
    serverName,
    adventureName,
    guildId,
    guildName,
}: UserDefaultInfo) => ({
    type: DEFAULTINFO,
    characterId,
    characterName,
    jobGrowId,
    jobGrowName,
    jobId,
    jobName,
    level,
    serverId,
    serverName,
    adventureName,
    guildId,
    guildName,
});

const inital = {
    characterId: '',
    characterName: '',
    jobGrowId: '',
    jobGrowName: '',
    jobId: '',
    jobName: '',
    level: '',
    serverId: '',
    serverName: '',
    adventureName: '',
    guildId: '',
    guildName: '',
};

const userInfo = (state = inital, action: UserAction) => {
    switch (action.type) {
        case DEFAULTINFO:
            return {
                ...state,
                characterId: action.characterId,
                characterName: action.characterName,
                jobGrowId: action.jobGrowId,
                jobGrowName: action.jobGrowName,
                jobId: action.jobId,
                jobName: action.jobName,
                level: action.level,
                serverId: action.serverId,
                serverName: action.serverName,
                adventureName: action.adventureName,
                guildId: action.guildId,
                guildName: action.guildName,
            };

        default:
            return state;
    }
};

export default userInfo;

코드는 장황하지만 오류는 너무나 단순했다 (ㅋㅋ 내시간)

const inital = {
    characterId: '',
    characterName: '',
    jobGrowId: '',
    jobGrowName: '',
    jobId: '',
    jobName: '',
    // level: '',	=> Number타입을 String에 넣으려고 하니 에러가 나죠..
    level: 0,	// 이걸로 바꿈
    serverId: '',
    serverName: '',
    adventureName: '',
    guildId: '',
    guildName: '',
};

Number타입으로 지정해두고 String을 넣으려고 하니까 에러가 발생한것이였다.