TS: 한입크기로 잘라먹는 타입스크립트 챌린지_day5

🥗 진도

 

3. 타입스크립트 이해하기 (6/9)

• 객체 타입의 호환성
• 대수 타입
• 타입 추론

🏈 요약 !

 

객체 타입의 호환성

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

num1 = num2; // num2 = num1;

// 객체 타입 간의 호환성
// -> 어떤 객체 타입을 다른 객체타입으로 취급해도 괜찮을까?!

type Animal = {
    name: string;
    color: string;
};

type Dog = {
    name: string;
    color: string;
    breed: string;
};

let animal: Animal = {
    name: "giraffe",
    color: "yellow",
};

let dog: Dog = {
    name: "syrious",
    color: "black",
    breed: "gray hound",
};

animal = dog; // dog = animal;

// 초과 프로퍼티검사
type Book1 = {
    name: string;
    price: number;
};

let book2: Book1 = {
    name: "dynosour book",
    price: 52000,
    // skill: "algorism",
};

let book3: Book1 = programmingBook;

function func(book: Book) {}
    func({ name: "dynosour book", 
    price: 52000, 
    // skill: "algorism" 
});
    func(programmingBook);

 

대수 타입

• 여러개의 타입을 합성해서 새롭게 만들어낸 타입
• 합집합 타입과 교집합 타입이 존재함

/**
 *  1. 합집합 Union Type
 */

let a: string | number | boolean;
a = 1;
a = "hello";
a = true;

type Dog = {
    name: string;
    color: string;
};

type Person = {
    name: string;
    language: string;
};

type Union1 = Dog | Person;

let union1:Union1 = {
    name: "",
    color: "",
}

let union2:Union1 = {
    name: "",
    language: "",
}

let union3: Union1 = {
    name: "",
    color: "",
    language: "",
};

// Dog의 집합도, Person의 집합도 아니니 union4는 불가
// let union4: Union1 = {
//     name: ""
// }


/**
 *  2. 교집합 Intersection Type
 */

let veriable: number & string;

type Dog2 = {
    name: string;
    color: string;
};

type Person2 = {
    name: string;
    language: string;
};

type Intersection = Dog2 & Person2;

// A & B 의 타입일 경우 A와 B의 내용물이 하나라도 없으면 안된다 모두 들어가 있어야 함
let intersection: Intersection = {
    name: "",
    color: "",
    language:  "",
}

 

타입 추론

/**
 *  타입 추론 Type Inference
 */

let a = 10;
let b = "hello";
let c = {
    id: 1,
    name: "지은",
    profile: {
        nickname: "jieunw",
        introduce: "nice to meet you",
    },
    urls: ["https://velog.io/@jieunwang"],
};
let { id, name, profile } = c;
let [one, two, three] = [1, "hello", true];

// 함수의 반환값 타입을 추론할 때는 초기화하는 값이 아닌 
// return문 다음의 반환값을 기준으로 추론함
function func(message = "hello") {
    return "hello";
}

let d; // 암묵적 any 추론. 명시적으로 let d:any 로 정의할 때는 진화 같은 것 없이 계속 any타입인데, 암묵적 any면 타입 진화함
d = 10; // <- any 에서 number로
d.toFixed(1);
d = "hi"; // string으로
d.toUpperCase();
// Evolution of any type. 초기값을 지정하지 않으면 암묵적으로 진화할 수 있다. 하지만 좋지 않은 방법
// 나중에 알아맞춰야하는 상황이 올 수도 있으니 사용하는 걸 추천하지 않음

const num = 10;
const differenceOfConst = "AAAAA"; // const differenceOfConst: "AAAAA"
let differenceOfLet = "BB"; //let differenceOfLet: string
let any = [1, "string"]; // let any: (string | number)[]

// 타입스크립트는 웬만한 변수는 모두 타입 추론해줌 
// = > const로 선언된 변수가 아니면 타입 넓히기를 통해 타입을 추론해준다

 

 

 

🏴‍☠️ 과제

 

Q1. 아래 코드의 4개의 변수 a,b,c,d의 타입은 각각 어떻게 추론될까요?

let a = 10;
const b = 20;
const c = [1, 2];
const d = [1, "hello", true];
const e = [1, 2, 3] as const;

/* 1-1 변수 a의 타입은 무엇으로 추론될까요? */
type A = any;

/* 1-2 변수 b의 타입은 무엇으로 추론될까요? */
type B = any;

/* 1-3 변수 c의 타입은 무엇으로 추론될까요? */
type C = any;

/* 1-4 변수 d의 타입은 무엇으로 추론될까요? */
type D = any;

/* 1-5 변수 e의 타입은 무엇으로 추론될까요? */
type E = any;

import { Equal, Expect, NotAny } from "@type-challenges/utils";

type TestCases = [
  Expect<Equal<A, number>>,
  Expect<Equal<B, 20>>,
  Expect<Equal<C, number[]>>,
  Expect<Equal<D, (number | string | boolean)[]>>,
  Expect<Equal<E, [1, 2, 3]>>
];

 

제출 ➡️

1-1 ) type A = number;

1-2 ) type B = 20;

1-3 ) type C = number[];

1-4 ) type D = (number | string | boolean)[];

1-5 ) type E = [1,2,3];

 

 

Q2. 다음 요구사항을 만족하는 Animal, DogCat(개냥이) 타입을 완성하세요.

• Animal 타입은 Dog 타입일 수도 Cat 타입일 수도 있습니다.
• DogCat 타입은 Dog이자 Cat입니다.

/* 아래의 코드를 완성해 오류를 제거하세요 */
type Dog = {
  name: string;
  color: string;
};

type Cat = {
  name: string;
  age: number;
};

type Animal = never;
type DogCat = never;

/* [Test] 여기부터는 정답을 체크하기 위한 용도로 수정하지 않습니다 */
const animals: Animal[] = [
  {
    name: "토뭉이",
    color: "brown",
  },
  {
    name: "쨔미",
    age: 10,
  },
];

const dogCat: DogCat = {
  name: "개냥이",
  age: 2,
  color: "치즈색",
};

 

제출 ➡️

type Dog = {
  name: string;
  color: string;
};

type Cat = {
  name: string;
  age: number;
};

type Animal = Dog | Cat;
type DogCat = Dog & Cat;