🔵 [React/TypeScript] 타입 호환성

타입 호환성

=> 넘버 타입은 넘버 리터럴 타입을 포함하고 있는 상위 집합
=> 넘버 타입에 넘버 리터럴 타입을 넣는 것은 가능하지만 반대는 불가능

let num1: number = 10;
let num2: 10 = 10;

// 코끼리에 개미를 넣는다
// 가능 (업캐스팅: 모든 상황에 가능)
num1 = num2;

// 개미에 코끼리는 못넣어!
// 불가능 (다운캐스팅: any만 가능하고 다른애들은 다 불가능)
num2 = num1;

 

(가능)업캐스팅: 하위 집합을 상위 집합에 넣는다.

(불가능)다운 캐스팅: 상위 집합을 하위 집합에 넣는다. => 예외: any는 가능

 

// 업 캐스팅 & 다운 캐스팅

// unknown 타입 (최상위 집합)

// 업 캐스팅으로 모두 가능
let a: unknown = 1;
let b: unknown = "hello";
let c: unknown = true;
let d: unknown = null;
let e: unknown = undefined;

let unknownVar: unknown;

// 다운 캐스팅 불가능
// let num: number = unknownVar;
// let num: string = unknownVar;
// let num: boolean = unknownVar;

function neverExam(){
  function neverFunc(): never {
    while(true){}
  }

  let num: number = neverFunc();
  let str: string = neverFunc();
  let bool: boolean = neverFunc();

  // 불가
  // let never1: never = 10;
  // let never2: never = "string";
  // let never3: never = true;

  // void
  function voidExam(){
    function voidFunc(): void{
      console.log('void');
    }

    let voidVar: void = undefined;
  }
}

// any
function anyExam(){
  let unknownVar : unknown;
  let anyVar: any;
  let undefinedVar: undefined;
  let neverVar: never;

  // 다운캐스팅 가능 (never 타입 빼고)
  // any 타입은 다운캐스팅 업캐스팅 모두 가능한 치트키 타입이기 때문
  anyVar = unknownVar;
  undefinedVar = anyVar;

  // never 타입은 any타입도 다운캐스팅을 할 수 없음
  // neverVar = anyVar;
}

 

 

// 기본 타입간 호환성
let num1: number = 10;
let num2: 10 = 10;

num1 = num2;

// 상위 (더 적게 가지고 있는게 상위)
type Animal = {
  name: string;
  color: string;
};

// 하위
type Dog = {
  name: string;
  color: string;
  breed: string;
};

let animal: Animal = {
  name: "기린",
  color: "yellow"
}

let dog: Dog = {
  name: "돌돌이",
  color: "brown",
  breed: "진도"
}

animal = dog;
// 다운캐스팅이기 때문에 불가
// breed라고 하는 요소를 animal이 갖고 있지 않기 때문
// dog = animal;


type Book = {
  name: string;
  price: number;
};

type ProgrammingBook = {
  name: string;
  price: number;
  skill: string;
}

let book: Book;
let programmingBook: ProgrammingBook = {
  name: "리액트 기초",
  price: 24000,
  skill: "리액트"
}

// 초과 프로퍼티 검사를 회피할 수 있음
book = programmingBook;
// programmingBook = book;

// 초과 프로퍼티 검사가 발동해서 에러가 발생
// let book2: Book = {
//   name: "리액트 기초",
//   price: 24000,
//   skill: "reactjs" // Book에 없는 객체이기 때문에 에러
// };

function func(book: Book){}

func(book);
// 초과 프로퍼티 검사를 회피 (하위 집합을 넣었기 때문)
func(programmingBook);

// 초과 프로퍼티 검사 발생하여 에러
// func({
//   name: "리액트 기초",
//   price: 24000,
//   skill: "reactjs" // Book에 없는 객체이기 때문에 에러
// });