타입 조작하기

타입 조작하기

인덱스트 엑세스 타입

/**
 * 인덱스드 엑세스 타입
 * 인덱스를 이용해 다른 타입내의 특정 프로퍼티 타입을 추출하는 타입
 * 객체, 배열, 튜플에 사용 가능
 */

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

// 아래와 같은 코드로 Post[key] 대체하면 오류, Post["author"]에는 오로지 타입만 명시할 수 있다.
// const key = "author";

// Post["author"]["id"] 중첩으로 대괄호도 쓸 수 있다

// 인덱스드 엑세스 타입을 이용할 때 대괄호 안에 number 타입을 넣어주면 배열 타입으로부터 하나의 요소의 타입만 가져올 수 있다.
// PostList[number] = PostList[0]

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

const post: PostList[number] = {
  title: "게시글 제목",
  content: "게시글 본문",
  author: {
    id: 1,
    name: "이정환",
    age: 27,
    location: "South Korea",
  },
};

printAuthorInfo(post.author);

// 튜플과 함께 사용하는 법
// 튜플 -> 길이 고정, 존재하지 않는 인덱스 접근시 오류
type Tup = [number, string, boolean];

type Tup0 = Tup[0];

type Tup1 = Tup[1];

type Tup2 = Tup[2];

// [number]를 명시해주면 해당 tuple에 존재하는 타입의 최적의 타입(유니온 타입)을 추출한다.
type TupNum = Tup[number];

keyof 연산자

/**
 * keyof 연산자
 * 객체 타입으로부터 프로퍼티의 모든 key들을 String Literal Union 타입으로 추출하는 연산자
 */

// 아래 typeof 코드로 대체 가능
// interface Person {
//   name: string;
//   age: number;
// }

type Person = typeof person;

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

const person = {
  name: "이정환",
  age: 27,
};

getPropertyKey(person, "name"); // 이정환

맵드 타입

/**
 * 맵드 타입
 */

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];
};

// 한 명의 유저 정보를 불러오는 기능
function fetchUser(): User {
  // ... 기능
  return {
    id: 1,
    name: "Rachel",
    age: 25,
  };
}

// 한 명의 유저 정보를 수정하는 기능
function updateUser(user: PartialUser) {
  // ... 수정하는 기능
}

updateUser({
  id: 1,
  name: "Rachel",
  age: 24,
});

템플릿 리터럴 타입

/**
 * 템플릿 리터럴 타입
 */

type Color = "red" | "black" | "green";

type Animal = "dog" | "cat" | "chicken";

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

const coloredAnimal: ColoredAnimal = "red-cat";

[참고]

한 입 크기로 잘라먹는 타입스크립트

• Section 8. 타입 조작하기 강의를 듣고 정리한 내용입니다.