[TIL] 241016_Typescript: 타입 조작하기

지코·2024년 10월 16일
0

Today I Learned

목록 보기
35/66
post-thumbnail

⚡️ Indexed Access Type

인덱스드 액세스 타입이란 인덱스를 사용해서 다른 타입 내에 특정 property의 타입을 추출하는 타입이다.

1️⃣ 객체

위와 같이 Post 객체에서 author라는 property를 뽑아오기 위해 인덱스드 액세스 타입을 사용할 수 있다.

인덱스드 액세스 타입을 사용하지 않는다면, 함수 선언 위에 적어놓은 주석처럼 객체 형태 그대로 적어주어야 한다. 이 경우, 만약 객체의 프로퍼티가 추가되거나 타입이 변경된다면 함수 선언에서도 변경해줘야 하기 때문에 매우 번거롭다.

2️⃣ 배열

객체 배열을 선언하는 방법 익숙해지기!

위와 같이 배열로 선언한 PostList 객체에서 author라는 property를 뽑아오기 위해 인덱스드 액세스 타입을 사용할 수 있다.

이 때 PostList[number]처럼 인덱스로 number를 사용한 것은 배열의 한 요소를 사용한다는 뜻이다.
post2 객체를 선언할 때도 이 객체가 배열이 아니라 객체 하나이므로 같은 방식을 사용했다.

3️⃣ 튜플

튜플은 간단하다. 배열에서 인덱스를 사용하는 것처럼, 튜플에서 인덱스를 사용해서 각 요소의 타입을 추출할 수 있다.

이 때 인덱스에 number를 사용한 TupNum은 튜플 요소들의 최적의 공통 타입인 number | string | boolean 타입을 가진다.

⚡️ keyof 연산자

keyof 연산자는 타입 앞에 붙여 사용하며, 해당 타입이 가지는 모든 property들을 불러올 때 사용한다. 함수 getPropertyKey()의 매개변수 key의 타입 선언 부분을 보자. string과 같은 일반 타입으로 선언하면 에러가 나는 것을 확인할 수 있다.

위에서 선언한 Person 타입의 key라는 것을 알려주기 위해 keyof 연산자를 활용하여 작성하면 된다.

⚡️ Mapped Type

맵드 타입은 기존의 객체 타입을 다양한 방식으로 바꿔서 사용 가능하게 해주는 타입이다.

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

위와 같이 User라는 기본 타입이 있을 때, 한 명의 유저 정보를 수정하는 기능을 가진 함수를 선언한다고 해보자. 보통 객체의 정보를 수정할 때는 수정하려고 하는 정보만 작성하는 경우가 많은데, 이 때 mapped type 이 유용하게 사용된다❗️

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

mapped type 은 interface에서는 사용하지 못하고, type에서만 사용 가능하다.

또한 위와 같이 in 키워드를 사용해서 key를 선언해주는데, 이 key는 value에서 인덱스로 활용된다. optional 키워드를 사용했기 때문에, 한 명의 유저 정보를 수정하는 기능을 가진 함수를 작성할 때 원하는 프로퍼티의 값만 return하도록 작성할 수 있다.

type StringUser = {
  // keyof 연산자를 사용해서 프로퍼티를 불러올 수 있음.
  [key in keyof User]: String;
};

그리고 프로퍼티를 작성할 때 유니온 타입으로 작성하기엔 프로퍼티 수가 많을 경우, keyof 연산자를 활용하여 위와 같이 간결하게 작성할 수도 있다.

⚡️ Template Literal Type

템플릿 리터럴 타입은 문자열로 여러 가지 상황들을 표현해야 하는 경우에 유용하게 사용 가능하다.

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

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

물론 수동으로 다 작성할 수도 있지만, 종류가 많아질 경우 매우 번거롭기 때문에! 위와 같이 백틱(``)을 사용해서 간결하게 작성한다.

Reference

👩🏻‍🏫 한입 크기로 잘라 먹는 타입스크립트(TypeScript)
https://www.inflearn.com/course/한입-크기-타입스크립트

profile
꾸준하고 성실하게, FE 개발자 역량을 키워보자 !

0개의 댓글