[Axios] Typescript에서 Axios post 사용하기

axios.post에 url을 작성하고 body에 넣고 싶은 내용을 넣는다.

그리고 응답을 콘솔에 찍어보려고 하면 빨간 줄이 죽죽 생긴다.

axios
    .post('http://localhost:8000/users/signup', {
      account: idValue,
      password: pwValue,
      nickname: nameValue,
      email: emailValue,
    })
    .then((res)=>console.log(res))

axios 공식문서

 

 

 

이런 에러가 뜨는 걸로 봐서는 axios를 타입스크립트에서 사용하려면 요청 보내는 데이터와 응답받아서 오는 데이터의 타입을 지정해줘야 하는 것 같다.

Property 'message' does not exist on type 'AxiosResponse<any, any>'.

 

 

 

요청 타입, 응답 타입을 정해준다. 그러면 빨간 줄이 사라진다!

export interface SignUpType {
  account: string;
  password: string;
  nickname: string;
  email: string;
}

export interface SignUpRes {
  message: string;
}

axios
    .post<SignUpType, SignUpRes>('http://localhost:8000/users/signup', {
      account: idValue,
      password: pwValue,
      nickname: nameValue,
      email: emailValue,
    })
    .then((res)=>console.log(res))