[TIL] 23/12/18 TypeScript : Promise<AxiosResponse<any, any>>
숙제 5 level 늦은 제출, 막혔던 부분 catch up~
TIL
내가 생각한 typescript의 이해..
내가 사용하려는 값(위에서 선언한 변수이든 함수의 리턴값이든 매개변수든)이 무슨 타입인지
나는 알지만 컴퓨터도 알게 하자.
typescript로 리액트 쿼리 사용하기
javascript로 짠 코드를 typescript로 바꾸는 시작부터 막혔다.. 답을 찾아가는 방법.. 어떻게든 되게 하는 방법??
todolist 조회 함수이다.
// 1. as-is
// 모든 todos를 가져오는 api
const getTodos = async () => {
const response = await axios.get(SERVER_URL);
return response;
}; //(처음에는 response를 통째로 반환하려고했다. 이것이 난관에 봉착한 이유다. @_@)
사용하는 곳
const { isLoading, isError, data: todos } = useQuery("todos", getTodos);
//data: todos 는 => data 대신 todos라는 이름으로 쓰겠다
//data는 getTodos의 반환값이 들어온다.
당연하게도 todos를 사용하는 곳에서 todos (즉 data) 가 누구인지 모르니까 에러가 나는 중 ~
사실은 여기서 사용할 때 todos.data 이렇게 써줘야 원하는 todolist 를 쓰는 것이겠다. -.-;
지금 상태로는 todos는 response이다. 잘못된 사용의 예...
어쨌든 사용하는 data가 누구인지 알게 하고 싶다. = getTodos의 반환값의 타입을 적어줘야한다.
1. getTodos에 마우스를 올려본다.
2. Promise<AxiosResponse<any, any>>
3. ????????????여기서 막힘???????저게 뭔데????????
다시 다시,
1. response 에 마우스를 올려본다.
2. axiosResponse<any,any> 가 나오는데 뭐하는 놈인지 모르겠다.. 그래서 어쩌라고.. any 대신 뭘줘야하는데..
2. 내가 알기로는 response는 엄청 많은 오브젝트들이 들어있고 그안에 data가 들어있다는 것이다.
3. 그리고 그 data는 내가 아는 놈이다. = Todolist
4. 아는 놈만 반환해보자.
// 2. as-is
const getTodos = async () => {
const response = await axios.get(SERVER_URL);
return response.data;
};
아직까지 타입을 안줬기 때문에 당연하게도 todos (즉 data) 가 누구인지 모른다고 에러가 나는 중~
any는 안돼! 몰라!
1. getTodos에 마우스를 올려본다.
2. Promise<any> 타입이다. (왜때문이냐면 async 함수이기 때문이다. promise를 반환한다.)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
3. 내가 반환 하는 것은 내가 정의한 todolist 타입이니까 any 대신 todolist 타입을 써준다.
//3. To-be 완성
// types/types.ts 타입 저장해둔 파일
export type TodoType = {
id: string;
title: string;
content: string;
isDone: boolean;
};
//api/todos.ts :리액트 쿼리의 api 정의하는 파일
import { TodoType } from "../types/types";
const getTodos = async () :Promise<TodoType[]> => {
const response = await axios.get(SERVER_URL);
return response.data;
};
todo 객체를 type으로 지정해주었고, todo객체 배열을 Promise<> 안에 적어 주었다.
이제 받아오는 곳에서 todos가 누구인지 알게 되었다.
완 성 ~
다시 그래서 어쩌라고.. 부분으로 돌아가보자.. 어째야하는지 오늘 리뷰를 하며 팀원님이 공유를 해주었다.
결론적으로 코드를 이렇게 해도 똑같이 동작 가능~
// 4. To-be 다른 버전
const getTodos = async () => {
const response = await axios.get<TodoType[]>(SERVER_URL);
return response.data;
};
axiosResponse<any,any>
이 type을 살펴보려면 get 함수에 마우스를 올려본다. 자세히 안나오면 ctrl + 클릭
get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
이런게 나온다.
<T = 타입을 넣어줘, R = 타입넣은 response야 , D= 컨피그야.. (지금은 몰라도 돼)>
: 반환 값은 Promise<위에서 만든 R> 이야
이정도로 이해하면 될 것 같다.
이해가 안되도 이렇게 하면된다..
get의 generic에 첫번째 인자로 내가 얻어가려는 data의 TYPE을 넣어주자~ (여기서는 TodoType[])
그러면 response가 자동으로 추론되고 getTodos의 반환값도 자동으로 추론된다.
끝~