axios 타입지정

interface resData {
  data: {
    access_token: string;
  };
}

interface signUpData {
  userClusterName: string;
  accessToken: string;
}
export const startRegister = async (code: string | ParsedQs | string[] | ParsedQs[] | undefined): Promise<any> => {
  const res: resData = await client.post('<https://api.intra.42.fr/oauth/token>', {
    grant_type: 'authorization_code',
    client_id: process.env.REACT_APP_REGISTER_CLIENT_UID,
    client_secret: process.env.REACT_APP_REGISTER_CLIENT_SERECT,
    code: code,
    redirect_uri: '<http://localhost:3000/register>',
  });
  const info42 = await client.get('<https://api.intra.42.fr/v2/me>', {
    headers: {
      Authorization: `Bearer ${res.data.access_token}`,
    },
  });

  return { info: info42, accessToken: res.data.access_token };
};

export const signUp = async (data: signUpData): Promise<any> =>
  await client.post(`/${data.userClusterName}`, {
    accessToken: data.accessToken,
    userPassword: '123',
    userDeadline: '2022-01-29',
    userEmail: '[email protected]',
  });

axios 의 res 를 받더라도, 그 값을 사용하기 위해서는 interface로 타입을 지정해주어야 한다. 실제로 data를 쓰기 위해서 access_token의 값을 지정해준 모습을 확인 할 수 있음.
props 또한 타입을 지정해주어야 하는데, code의 경우 parse해온 값이라 그런지 parsqs라는 타입이 떴다. 내 생각에는 string이면 될 것 같은데 왜 저 값을 주어야 하는지 찾아봐야할듯
async 를 사용시 promise 리턴에 대한 타입을 지정해주어야 함. 이때, any가 아닌 다른 타입지정이 필요해보이는데 이 부분 아직 공부하지못함
async await 가 강제되는데, 이때 평소와 같이 return 이 없는 상태로 진행하면 promise가 리턴된다. 또는 위의 start와 같이 원하는 형태의 값을 리턴해주어도 문제 없음.
process를 `` 형태로 문자열 값을 쓰려고 하니 오류가 났었는데, undefind의 가능성이 있기 때문이라고 한다. 값을 같이 사용할때에는 확실한 타입이 미리 지정이 되어 있어야 한다는 것. 일반 값으로 사용하니 string으로 인식되어 문제가 없었다.
42 api v2/me 를 사용할때 받아오는 값에 대해서 리턴 값을 모두 타입지정을 해주어야 한다고한다. 다만 원하는 값만 있다면 해당 값만 따로 만들어 리턴해주면 그 값에 대해서만 지정을 해주면 되지 않을까?
any , array 와 같은 추론이 가능해지는 값은 타입스크립트에서 지정은 가능하지만 사용을 하면 안된다고 한다. 확실한 타입 지정을 통한 에러 삭제가 목적이기 때문인듯. 실제로 특정 컴파일러 기준에서는 아예 에러로 취급하기도 한다고 한다.

const getUser = async (): Promise<any> => {
    try {
      const query = QueryString.parse(location.search, {
        ignoreQueryPrefix: true,
      });
      const res = await startRegister(query.code);
      setUser(res);
    } catch (e) {
      console.log(e);
    }
  };

실제 코드에서 사용하는 경우 똑같이 try catch 를 통해 사용할 수 있었음. 다만, 이 부분에서도 promise타입 지정에 대한 부분이 필요하다고 떴었다. 이외에 에러는 동일하게 리턴됨을 확인함

const getUser = async (): Promise<void> => {
    try {
      const query = QueryString.parse(location.search, {
        ignoreQueryPrefix: true,
      });
      const res = await startRegister(query.code as string);
      setUser(res);
    } catch (e) {
      console.log(e);
    }
  };

useEffect(() => {
    (() => {
      getUser()
        .then((data) => console.log(data))
        .catch((err) => console.error(err));
    })();
    return () => {};
  }, []);

해당 함수 getuser를 오류 없이 불러오기에는 .then 과 catch가 필요하다. 하지만 우리에게 꼭 필요한 부분이 아니기 때문에 쓰고싶지 않을때는 void를 이용하면 되는듯하다.

useEffect(() => {
    void getUser();
  }, []);

이는 페이지 no-floating-promises 관련 오류이다

no-floating-promises | TypeScript ESLint