Today I Learned_230316

TypeScript

인프런 타입스크립트 강의 수강

• 함수에서 공변성과 반공변성 주의! → 함수간에 서로 대입할 수 있는지 없는지
• 이변성, 불변성 등등이 있음..
• 리턴값은 더 넓은 타입으로 대입할 수 있다.
  • number 리턴값은 number 또는 string 리턴 타입에 대입 가능하다.
  • 리턴값 넓은타입에서 좁은타입으로는 대입할 수 없다.
• 매개변수는 넓은 타입에서 좁은 타입으로 대입할 수 있다. (리턴값이랑은 반대임)

function a(x: string): number { //string을 받아서 number로 리턴함
  return 0;
}
// (x: string)=>string 또는 (x: string)=>number
type B = (x: string) => number | string; //string을 받아서 number 또는 string으로 리턴
let b: B = a; //여기에 이걸 넣을 수 있을지? -> 가능하다!

function a(x: string): number | string {
  return 0;
}
type B = (x: string) => number;
let b: B = a; // 이렇게 넓은 타입에서 좁은 타입으로는 대입이 불가능하다.

function a(x: string | number): number {
  return 0;
}
type B = (x: string) => number;
let b: B = a;

function a(x: string): number {
  return 0;
}
type B = (x: string | number) => number;
let b: B = a;

• 타입 넓히기 : 타입스크립트가 모든 상황을 고려하여 타입을 넓게 잡는 것

• 타입 좁히기 : 타입 가드

• 타입 오버로딩 : 같은 타입을 여러번 선언
• 함수 뿐만 아니라 타입도 오버로딩 가능
• 함수 오버로딩
• 타이핑을 한가지 방식으로 도저히 못하겠을 때 두가지로 한다.
• declare는 함수 정의만 하고 실제 body는 다른 곳에 구현하고 있다고 명시하는 것
• 인터페이스와 클래스 안에서도 오버로딩 가능
• 오버로딩 선언부에 타입을 정의해주고 있기 때문에, 구현부에서는 any를 써도 큰 문제가 안 된다.

function add(x: number, y: number): number
function add(x: string, y: string): string
function add(x: any, y: any) { //여기 있는 any는 실제 타입 검사 시 악영향을 끼치진 않음
  return x + y;
}

interface Add {
  (x: number, y: number): number;
  (x: string, y: string): string;
}
const add: Add = (x: any, y: any) => x + y;

• infer는 타입 내에서 추론된 값으로 다시 새로운 타입을 만드는 것(밑에 utility types 참고).
• 타입스크립트는 건망증이 심하다
  • 타입 정해주는거 → 일회성
  • as를 반복해서 쓰거나, 변수에다가 저장해서 쓰거나..
    • as 웬만해서 사용하지 말자.. as를 사용하지 않는 것이 좋은 코드이다.
    • as는 unknown일 때 어쩔 수 없이 써준다.
    • as는 사람이 붙이는 것 - 실수하기 쉽다.
    • 라이브러리에서 unknown으로 제공해주면 as를 써야 함
    • 대신 타입 가드를 쓰면 굳이 as를 사용하지 않아도 됨
  • 건망증이 심해서 타입을 저장해서 써줘야 한다.

(async () => {
    try{
        await axios.get();
    } catch (err: unknown) {
        console.error((err as CustomError).response?.data); //여기에서 err를 CustomError라고 정의해줘도
        err.response?.data; //여기서 까먹고 바로 에러 뱉음
    }
})();

대처 방법 1. as 계속 붙여서 사용하기(귀찮음)

try{
        await axios.get();
    } catch (err: unknown) {
        console.error((err as CustomError).response?.data);
        (err as CustomError).response?.data;
    }

대처 방법 2. 변수에 저장해서 사용

try{
        await axios.get();
    } catch (err: unknown) {
        const customError = err as CustomError;
        console.error(customError.response?.data);
        customError.response?.data;
    }