타입스크립트 교과서 6장 정리

AxiosStatic

• axios의 변수타입은 AxiosStatic으로 정의되어 있다. AxiosStatic이라는 interface는 AxiosInstance를 상속받는다.

export interface AxiosStatic extends AxiosInstance {
  create(config?: CreateAxiosDefaults): AxiosInstance;
  Cancel: CancelStatic;
  CancelToken: CancelTokenStatic;
  Axios: typeof Axios;
  AxiosError: typeof AxiosError;
  HttpStatusCode: typeof HttpStatusCode;
  readonly VERSION: string;
  isCancel: typeof isCancel;
  all: typeof all;
  spread: typeof spread;
  isAxiosError: typeof isAxiosError;
  toFormData: typeof toFormData;
  formToJSON: typeof formToJSON;
  getAdapter: typeof getAdapter;
  CanceledError: typeof CanceledError;
  AxiosHeaders: typeof AxiosHeaders;
}

declare const axios: AxiosStatic;

AxiosInstance

• AxiosInstance 인터페이스는 Axios Interface를 상속받는다.

export interface AxiosInstance extends Axios {
  <T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
  <T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;

  defaults: Omit<AxiosDefaults, 'headers'> & {
    headers: HeadersDefaults & {
      [key: string]: AxiosHeaderValue
    }
  };
}

Axios

export class Axios {
  constructor(config?: AxiosRequestConfig);
  defaults: AxiosDefaults;
  interceptors: {
    request: AxiosInterceptorManager<InternalAxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse>;
  };
  getUri(config?: AxiosRequestConfig): string;
  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
  get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  delete<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  head<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  options<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  post<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
  put<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
  patch<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
  postForm<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
  putForm<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
  patchForm<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
}

• Axios는 다음과 같은 interface이다. => get 함수를 예시로 분석해보자

• 타입을 분석할 때 가시적으로 들어오지 않는경우 먼저 제네릭을 빼고 생각해본다. 제네릭을 제외하면 get이라는 함수는 url과 confing이라는 파라미터를 받고 Promise를 반환하는 함수라고 볼 수 있다.

  
get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;

get(url: string, config?: AxiosRequestConfig): Promise;
  
  
export interface AxiosResponse<T = any, D = any> {
  data: T;
  status: number;
  statusText: string;
  headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
  config: InternalAxiosRequestConfig<D>;
  request?: any;
}
  
 export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
  transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
  headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
  params?: any;
  paramsSerializer?: ParamsSerializerOptions | CustomParamsSerializer;
  data?: D;
  ...
  
  }

• 여기서 get함수는 타입으로 3개의 제너릭을 받는다. T, R, D인데,

• T는 => AxiosResponse의 제너릭으로 전달되는 타입이다. 제너릭으로 전달된 T는 데이터의 타입이 된다.

(데이터 타입을 정의해주기 위해서 사용)

• R은 AxiosReponse를 기본값으로 가지고, Promise의 제너릭으로 전달되는 타입이다.
  
• 즉 "Promise은 Promise<AxiosResponse>" 가 된다. 프로미스의 제너릭은 프로미스의 반환값 type을 나타낸다.
  
• D는 AxiosRequestConfig의 제너릭으로 전달되는 타입이다. => 서버로 데이터를 보내야하는 post와 같은 메소드일때 데이터 타입을 제너릭으로 정의해주기 위해 사용한다.
• AxiosRequest나 AxiosResponse와 같은 type들은 클라이언트와 서버가 서로 요청을 주고 받을때 필수적으로 줘야하는 값들이 미리 정해져있다.
• 고정적인 type은 미리 정의하고, 가변적인 data type만 빼서 따로 제너릭으로 정의한 것!

interface Promise<T> {
   
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

 
    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}

unknown Error vs Axios Error

• catch절에서 Error를 처리할 때 Error Type에 따라 타입가드해주는것이 중요하다.
• instanceof AxiosError라던지 axios.isAxiosError() 메소드를 이용해 타입을 판별 할 수 있다.