타입스크립트 - 타입 조작하기

1. 인덱스드 액세스 타입

메서드의 매개변수에서 객체의 속성을 가져오도록 하는 문법.

interface Post {
    title: string,
    content: string,
    author : {
        id: number,
        name: string,
        age: number,
    }
}

위와 같은 인터페이스를 작성하였고

const post: Post = {
    title: '게시글 제목',
    content: '게시글 본문',
    author: {
        id: 1,
        name: 'junny',
        age: 100,
    },
}

post 객체를 구현하였을 때

//프로퍼티가 추가되어도 자동으로 추가된다.
function printAutorInfo(author: Post['author']) {
    console.log(`${author.id}-${author.name}`);
}

위와 같이 메서드 내에서 author: Post['author'] 를 하면 author 객체를 가져올 수 있다.

author의 내부가 추가되거나 수정되었을 때에도 자동으로 적용된다.

type PostList = {
    title: string,
    content: string,
    author : {
        id: number,
        name: string,
        age: number,
    }
}[];

const postList: PostList[number] = {
    title: '게시글 제목',
    content: '게시글 본문',
    author: {
        id: 1,
        name: 'junny',
        age: 100,
    },
}

function printAutorInfoList(author: PostList[number]['author']) {
    console.log(`${author.id}-${author.name}`);
}

배열의 경우에도 적용이 가능하다.

type Tup = [number, string, boolean];
type Tup0 = Tup[0];
type Tup1 = Tup[1];
type Tup2 = Tup[2];
type TupNumber = Tup[number];   //공통된 타입을 가져와야하므로 유니온 타입

튜플로 정의된 타입은 각 정의된 타입을 가져올 수 있고, [number]로 타입을 명시하면 공통된 타입의 유니온 타입으로 정의된다.

2. keyof 연산자

keyof 연산자는 TypeScript에서 객체 타입의 모든 키들을 유니온 타입으로 반환해주는 연산자이다. 이를 통해 특정 객체 타입에 존재하는 속성 이름들의 집합을 타입으로 다룰 수 있다.

interface Person {
    name: string,
    age: number,
}

const person: Person = {
    name: 'junny',
    age: 100,
}

타입(인터페이스)을 구성하고 그 타입을 가진 객체를 만들었다고 가정하고 테스트하자.

function getPropertyKey(person: Person, key: keyof Person) {
    return person[key];
}

메서드에서 첫 매개변수를 객체로 지정하고, 두 번째 매개변수는 keyof [타입] 으로 하면, 반환값으로 person[key]로 해당 속성을 찾을 수 있다.

getPropertyKey(person, 'name');

만약 Person의 타입이 추가되어도 getPropertyKey 메서드는 변경할 것이 없어진다.

//객체로부터 뽑아오는 방법
type PersonTest = typeof person;
function getPropertyKeyTest(person: Person, key: keyof typeof person) {
    return person[key];
}

또한 반대로 객체로부터 타입을 가져올 수 있다.

3. 맵드 타입 (Mapped Type)

매핑된 타입은 기존 타입의 프로퍼티들을 기반으로 새로운 타입을 만들 때 유용하다. 예를 들어, 모든 프로퍼티를 선택적(optional)으로 만들거나, 모든 프로퍼티를 읽기 전용(readonly)으로 변경할 때 사용된다.

interface User {
    id: number,
    name: string,
    age: number,
}

type PartialUser = {
    [key in 'id' | 'name' | 'age']?: User[key];
}

선택적으로 지정된 속성만 구성할 수 있다.

type BooleanUser = {
    [key in keyof User]: boolean;
}

또한 아예 모든 속성을 변경하는 새로운 타입을 구성할 수도 있다.

type ReadonlyUser = {
    readonly [key in keyof User]: User[key];
}

추가적으로 readonly로도 구성할 수 있다.

4. 템플릿 리터럴 타입

type Color = 'red' | 'black' | 'green';
type Animal = 'dog' | 'cat' | 'chicken';

타입의 모든 조합을 가진 유니온 타입을 만들고 싶을 때 사용한다.

// type ColoredAnimal = 'red-dog' | 'red-cat' | 'red-chicken' | 'black-dog';   //좋지 못한 방법

위와 같이 일일히 지정하면 유지보수와 가독성에도 좋지 않다.

type ColoredAnimal = `${Color}-${Animal}`;

템플릿 리터럴을 사용하여 타입을 지정하면 ColoredAnimal은 두 타입을 가진 모든 유니온타입을 나타낸다.