Frontend/Typescript

러닝 타입스크립트 - 4장. 객체

rachel_13 2023. 7. 4. 09:54

 

 

1. 타입스크립트가 객체 타입 리터럴의 타입을 해석하는 방법

기존 객체에서 타입을 추론하게 하는 것도 좋지만, 가끔 명시적으로 객체 타입을 선언하고 싶을 때가 있을 것이다.

객체 타입은 객체 리터럴과 유사하지만, 필드 값 대신 타입을 사용해 설명한다는 특징이 있다.

 

  1) 별칭 객체 타입

 

[덕 타이핑 참고하기 좋은 글]

https://velog.io/@thms200/Typescript-Duck-Typing-%EB%8D%95%ED%83%80%EC%9D%B4%ED%95%91

 

Typescript Duck Typing (덕타이핑)

타입스크립트의 인터페이스에 대한 글을 읽다가 Duck Typing에 대해 알게되었다. 먼저 코드로 개념을 이해해보자. (위의 코드는 [Typesrcipt playground](https://www.typescriptlang.org/play?#code/JYOwLgpg

velog.io

 

2. 중첩과 선택적 속성을 포함한 객체 리터럴 타입 소개

- 중첩 {...}

여기서의 중첩의 의미는 교집합이 아니다. 뎁스 안의 뎁스 안의 뎁스....이렇게 객체 안의 객체(또는 배열) 안의 객체(또는 배열)을 의미하는 것이다.

 

- 선택적 속성 : ?

 

 

3. 객체 리터럴 타입의 유니언 타입 선언, 추론 및 타입 내로잉

 

 

 

 

4. 판별된 유니언 타입과 판별값

type Pages = {
    name: string;
    pages: number;
    type: 'pages';
}

type Rhymes = {
    name: string;
    rhymes: boolean;
    type: 'rhymes';
}


type Poem = Pages | Rhymes;
//두 타입이 모두 될 수 있는 객체
//type 속성으로 어느 타입인지를 나타낸다.

const poem: Poem = Math.random() > 0.5 
? {name: 'Hello', pages: 1, type: 'pages'}
: {name: 'World', rhymes: false, type: 'rhymes'} 

if(poem.type === 'pages'){
    console.log(poem.pages)
}

if(poem.type === 'rhymes'){
    console.log(poem.rhymes)
}

- type Poem : 판별된 유니언

 

- 판별값 : 객체의 타입을 가리키는 속성 (type = 'pages' | type='rhymes')

  • 이 판별값으로 타입 내로잉을 하여 값에 존재하는 속성을 보장한다.
  • 따라서 if문에서 오류가 발생하지 않는 것을 알 수 있다.
poem.type; // 유니언 타입 'pages' | 'rhymes'

 

5. 교차 타입으로 객체 타입을 결합하는 방법

& : 교차 타입

type Artwork = {
    genre: string;
    name: string;
}

type Writing = {
    pages: number;
    name: string;
}

type WriiternArt = Artwork & Writing;
/*
{
    name: string;
    genre: string;
    pages: number;
}
*/

WritternArt 타입은 Artwork 타입과  Writing 타입을 합친것과 같다. (합집합)

 

교차 타입은 유니언 타입과 결합할 수 있다.

이는 하나의 타입으로 판별된 유니언에서 유용하게 사용할 수 있다.