2024.03.04 TIL

requestHandler를 적용하는 과정에서 응답 데이터에 대한 타입 에러 발생

export const login = async (data: SignupProps) => { 
	return await requestHandler<LoginResponse>("post", "/users/login", data); 
};

// 'token' 속성이 'SignupProps' 형식에 없지만 'LoginResponse' 형식에서 필수입니다.
// ts(2345) auth.api.ts(17, 3): 여기서는 'token'이(가) 선언됩니다.

• requestHandler에 payload에 대한 타입은 제네릭 <T>로 설정하였지만, 반환받는 응답 데이터의 타입도 같은 제네릭<T>로 설정되기 때문에, 발생한 문제다.
• requestHandler의 반환값인 응답 데이터에도 타입을 지정해주기 위해서는 <T>가 아닌, 다른 용도의 제네릭을 추가적으로 설정해줘야한다.

//http.ts

type RequestMethod = "get" | "post" | "put" | "delete"; 

export const requestHandler = async <R = undefined, T = undefined>(
    method: RequestMethod, 
    url: string, 
    payload?: T
) => { 
	let response; 

	switch (method) { 
		case "post": 
          response = await httpClient.post<R>(url, {params: payload}); 
          break; 
		case "get": 
          response = await httpClient.get<R>(url); 
          break; 
		case "put":
          response = await httpClient.post<R>(url, payload); 
          break; 
		case "delete":
          response = await httpClient.delete<R>(url); 
          break; 
		} 
	return response.data; 
};

requestHandler fetchBooks의 params값 객체로 전달 시 에러 발생

// books.api.ts
export const fetchBooks = async (params: FetchBooksParams) => {
  try {
    return requestHandler<FetchBooksResponse, FetchBooksParams>("get", "/books", {params: parmas});
  } catch (error) {
    return {
      books: [],
      pagination: {
        totalCount: 0,
        currentPage: 1,
      },
    };
  }![](https://velog.velcdn.com/images/one_ik/post/9738ad8d-cba4-4633-ac88-1dc469ea63a7/image.png)

};

// 개체 리터럴은 알려진 속성만 지정할 수 있으며 'FetchBooksParams' 형식에 'params'이(가) 없습니다.ts(2353)

• requestHandler는 3번째 인자로 'payload'를 기대하는데, 여기서는 {params: params} 객체를 전달한다
• requestHandler는 FetchBooksParams 타입의 객체를 직접 전달받기를 기대한다.
• FetchBooksParams 타입은 params 속성을 정의하지 않는다.
• 즉, 이 타입은 params라는 이름의 속성을 포함하고 있지 않기 때문에, {params: params}와 같은 형태로 객체를 전달하면 TypeScript는 이를 오류로 간주한다.
• 그래서 {params: params}의 형태로 보내지 않고, params로 보낸 후, { params: payload }를 할당해준다