TS 문법 3

공변성 반공 변성

 

타입 예시

function a(x: string): number {
  return 0;
}
//매개변수로 문자를 받아 숫자를 리턴

type B = (x: string) => number | string;
let b: B = a;

함수 a는 문자를 받아서 숫자로 리턴하는 함수

근데 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;

(x: string) => number 또는 (x:number)=> number

이렇게 생각하면 안 되고 

매개변수는 좁은 타입으로 대입된다.

리턴 값이랑 반대라고 생각해야 한다!!

 

반대 예시

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

이건 매개변수가 더 넓은 곳으로 가니까

대입이 되지 않는다.

 

 

정리

리턴 값: 넓은 곳으로 대입 가능

매개변수: 좁은 곳으로 대입 가능

 

 

함수 오버 로딩

같은 타입을 여러 번 선언하는 것!

 

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: any, y: 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;

여러 개를 선언하면 타입스크립트가 여러개 선언한 것 중 한 개에 걸리게(설정되게) 해준다.