[TypeScript] 타입 조작 - 인덱스드 엑세스 타입

🐾 타입 조작

기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 기능

 

제네릭 또한 타입을 조작하는 기능에 포함이 된다.

 

 

 

 

 

 

---

🐾 인덱스드 엑세스 타입

인덱스를 이용해 다른 타입 내의 특정 프로퍼티의 타입을 추출하는 타입

 

 

1. 객체 프로퍼티의 타입 추출

 

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

const post:Post = {
    title: '게시글 제목',
    content: '게시글 본문',
    author: {
        id: 1,
        name: '기지',
        age: 27,
    },
};

게시글을 표현하는 객체 타입 Post를 가지고 post 변수가 있다. 

 

이 게시글에서 작성자의 이름과 아이디를 붙여 출력하는 함수를 인덱스드 엑세스 타입을 이용해 만들어보자.

function printAuthorInfo(author:Post['author']){ // []<-인덱스라 부름 
    console.log(`${author.name} - ${author.id}`);
}

• Post['author'] 는 Post 타입으로부터 author 프로퍼티의 타입을 추출한다.
  • -> author 매개변수의 타입은 {id: number, name: string, age: number} 가 됨
• 대괄호 속에 들어가는 string literal 타입을 인덱스라고 부른다.
  • -> 인덱스를 이용해 특정 타입에 접근하므로 인덱스드 엑세드 타입이라 부름

 

 

⚠️ 인덱스에는 값이 아니라 타입만 들어갈 수 있다. ⚠️

// 인덱스 안에는 타입만 들어올 수 있음
// -> 변수를 넣으면 에러가 발생
const key = 'author';
function printAuthorInfo(author:Post[key]){  // ❌
    console.log(`${author.name} - ${author.id}`);
}

 

 

⚠️ 인덱스에는 값이 아니라 타입만 들어갈 수 있다. ⚠️

function printAuthorInfo(author: Post["what"]) { // ❌
  console.log(`${author.id} - ${author.name}`);
}

 

 

또, 인덱스를 중첩하여 사용할 수 있다.

// 인덱스의 중첩도 가능
// author의 id만 필요한 경우
function printAuthorInfo(author:Post['author']['id']){ 
    console.log(`${author}`);
}

 

 

 

 

---

2. 배열 요소의 타입 추출

 

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


const Post2:PostList[number] = { // 배열의 요소 타입을 추출할 때는 인덱스에 number 타입을 넣음
    title: '게시글 제목',
    content: '게시글 본문',
    author: {
        id: 1,
        name: '기지',
        age: 27,
    }, 
}

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

Post 타입을 PostList 배열 타입으로 수정한 후 인덱스드 엑세스 타입을 이용한다.

 

• 배열 요소의 타입을 추출할때는 인덱스에 number 타입을 넣는다.

number literal 타입을 넣어도 동일하게 작동한다. 또는 숫자를 넣어도 된다.

 

 

 

 

---

3. 튜플의 요소 타입 추출

type Tup = [number, string, boolean];

type Tup0 = Tup[0]; // number

type Tup1 = Tup[1]; // string

type Tup2 = Tup[2]; // boolean

type Tup3 = Tup[3]; // ❌

type TupNum = Tup[number]; // number | string | boolean

• 인덱스에 number 타입을 넣으면 튜플을 배열 처럼 인식하기 때문에 배열 요소의 타입을 추출한다.

 

 

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의