타입스크립트 공부 (3)

타입스크립트는 건망증이 심하다.

• 방지하는 코드를 작성해줘야함.

interface Axios {
  get(): void;
}

class CustomError extends Error {
  response?: {
    data: any;
  };
}

declare const axios: Axios;

(async () => {
  try {
    await axios.get();
  } catch (error: unknown) {
    // (1회성).
    // 타입스크립트는 건망증이 심함. 앞에 에러를 CustomError로 정의해줬는데 뒤에서 기억못함.
    console.error((error as CustomError).response?.data);
    error.response?.data; // error.
    // ---------
    // 위와 같이 매번 as로 단언해주지 않기 위해 아래와 같은 방법으로 사용 가능.
    // 변수에 따로 저장해줌.
    const customError = error as CustomError;
    console.error(customError.response?.data);
    customError.response?.data; // 중복 사용 가능
    
    // 실제 프로젝트에서는 위의 코드들처럼 작성하면 안됨.
    // if로 타입 검사 먼저
    if (error instanceof CustomError) {
      console.error(error.response?.data);
      error.response?.data;
    }
  }
})();

• 인터페이스와 클래스 (어떤 상황에서 어떤 걸 써야하는가 ?)
  • 인터페이스
    • 자바스크립트 코드에서 사라진다.
    • (error instanceof CustomError)와 같은 코드에서, instanceof를 사용할 수 없다.
  • 클래스
    • 자바스크립트 코드에 남아있으면서, 인터페이스와 비슷한 역할을 함.
    • instanceof로 인터페이스 속성에 남아있는지 확인할 수 있음.

interface Axios {
  get(): void;
}

class CustomError extends Error {
  response?: {
    data: any;
  };
}

declare const axios: Axios;

(async () => {
  try {
    await axios.get();
  } catch (error: unknown) {
    const customError = error as CustomError;
    console.error(customError.response?.data);
    customError.response?.data; // 중복 사용 가능
    
    // 실제 프로젝트에서는 위의 코드들처럼 작성하면 안됨.
    // if로 타입 검사 먼저
    if (error instanceof CustomError) {
      console.error(error.response?.data);
      error.response?.data;
    }
  }
})();

※ 즉, 다른 라이브러리에서 타입 unknown을 하면, as로 타입 캐스팅을 해야하는데, 타입 가드로 좁혀놨으면 그 안에서 as 안써도 된다.

Utility Types

• Partial type 분석

interface Profile {
  name: string;
  age: number;
  married: boolean;
}

// 기본
const human1: Profile = {
  name: "nini",
  age: 27,
  married: false,
};

// 인터페이스 속성 중 일부를 안넣고 싶을 때
// 1) Partial
// <>에 나오는 타입의 속성을 모두 옵셔널로 만들어줌.
const human2: Partial<Profile> = {
  name: "lili",
  age: 26,
};

• Partial 사용은 좋은건가 ?
  Partial로 타입을 주면 모든 필수 속성들이 옵셔널이 되기 때문에 해당 타입으로 아무것도 안넣을 수도 있다.
  => 이렇게 쓰는 건 별로 ! Partial 보다 Pick, Omit을 쓰는 것이 더 나음. (타입이 더 명확)

• Pick, Omit 타입

// 1. Pick
// Pick에 넣어준 Profile 타입에서 필요한 몇 개를 가져온다.
// type P<T, S extends keyof T> = {
//  [Key in keyof S]: T[Key];
// };
const human2: Pick<Profile, "name" | "age"> = {
  name: "lili",
  age: 26,
};

// 2. Omit
// 타입의 속성이 많을 때, 빼고 싶은 속성을 나타냄.
const human2: Omit<Profile, "married"> = {
  name: "lili",
  age: 26,
};

※ 제네릭을 사용할 때 제한조건을 먼저 걸어주자.

• Omit
  type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
  • exclude ?
    주어진 키를 빼고 나머지 들고 옴
    type Exclude<T, U> = T extends U ? never : T;
    T에서 U 타입을 뺀다.
    
  • extract
    type Extract<T, U> = T extends U ? T : never;
    주어진 키를 가져오는 것
    

• Required
  

• Record
  

• NonNullable
  

• infer (추론하다)
  infer는 extends에서만 사용 가능하다.
  infer 위치를 바꿈으로써 타입스크립트가 알아서 리턴값 위치 가져올 수 있다.