[Vue3, TypeScript] Type 'ResponseI' is missing the following properties from type 'ResultI' 에러해결

도대체 무슨 말인가 했는데 알고 보니 fetch한 데이터 타입, 컴포넌트에서 불러와서 저장하는 데이터 타입을 맞춰주면 됨.

 

1. 문제

 

// api/service.ts

export async function fetchData(): Promise<ResponseI> {
    const response = await axios({
        url: '/detailMock.json',
        method: 'GET',
    });

    return Promise.resolve(response.data.result);
}

// pages/bookingDetail/DetailPage.vue

setup() {
	return {
    	bookingItem: {} as Ref<ResultI>,
    }
},
async mounted() {
	try {
    	const result = await fetchData();
        this.bookingItem = result;
        
    } catch (e) {
    	...
    }
}

 

목데이터를 불러와서 컴포넌트에서 사용하는 구조가 대충 위와 같음. 그런데 원래대로의 백엔드 api 요청 경로를 통해 받는 응답값의 형태와, 내가 만들어 둔 목데이터의 형태가 안 맞아서 타입에러가 생겼던 것. 네트워크 창엔 똑같이 나오는데 뭐가 문제지? 하면서 vscode 껐다 키고, 서버도 몇번이나 껐다 켜 봤지만 역시나 내가 이것저것 만지다가 생긴 사소한 실수였다.

 

2. 해결

 

// api/service.ts

export async function fetchData(): Promise<ResultI> {
    const response = await axios({
        url: '/detailMock.json',
        method: 'GET',
    });

    return Promise.resolve(response.data.result);
}

 

리턴값의 타입을 제대로 맞춰 주면 해결이 된다.