[TypeScript] Indexed Access & 여러 타입.

출처: 이정환의 한 입 크기로 잘라먹는 타입스크립트

 

1. 인덱스드 엑세스 타입 (Indexed Access Type) :

객체 또는 배열에서 특정 요소의 타입을 가져오는데 사용됨.

type PostList = {    //interface 는 객체타입 정의에만 특화되어있기 때문에 배열을 정의하긴 불편
  title: string;
  content: string;
  author: {
    id: number;
    name: string;
    age: number;
  };
}[];

function printAuthorInfo(author: PostList[number]["author"]) {
  //인덱스라고 부름
  console.log(`${author.name}-${author.id}`);
}

const post: PostList[number] = {
  title: "게시글 제목",
  content: "게시글 본문",
  author: {
    id: 1,
    name: "홍길동",
    age: 27,
  },
};

printAuthorInfo(post.author);  // 홍길동-1

• `PostList[number]` 는 `PostList` 배열의 요소 타입을 가져온다.
• `PostList[number]["author"]`는 해당 요소의 `author` 속성 타입을 가져온다.

PostList[number] 에서 왜 number를 지칭하나 ? 

1. PostList는 배열 타입이다.

2. 배열의 인덱스 타입은 `number` 이다.

3. 따라서 PostList[number] 는 이 배열의 요소 타입을 가져오는 역할을 함.

 

즉. 배열의 인덱스를 `number` 타입으로 접근할 수 있기 때문에 PostList[number]가 배열 요소 타입을 가져올 수 있음.

 

그래서 `number`말고 숫자를 넣어도 된다. But 특정 숫자를 넣으면 특정 인덱스 요소 타입을 가져옴.

 

12 튜플에서의 사용

튜플에서도 특정 인덱스의 타입을 추출할 수 있다

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

• `Tup[number]` 는 튜플의 모든 요소 타입을 유니언 타입으로 반환한다.

 

2. `keyof` 연산자 :

객체 타입의 키를 문자열 유니언 타입으로 변환한다.

const person = {
	name: "홍길동",
    age: 27,
};

type Person = typeof person;

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

getPropertyKey(person, "name"); // 홍길동

• `keyof Person` 은 ` { name: string; age: number; }` 의 키인 `'name' | 'age'` 를 반환한다.

 

3. 맵드 타입 (Mapped Types) : 인터페이스에서 사용 불가능.

기존 타입을 변형하여 새로운 타입을 생성할 때 유용하다 

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

 

부분타입, 불리언 변환 타입, 읽기전용에 대한 예제

// 부분 타입 (Partial)

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


// 불리언 변환 타입

// 위의 "id" | "name" | "age" 이걸 keyof로 간단하게 참조할 수 있다.
type BooleanUser = {
	[key in keyof User]: boolean;
};


// 읽기 전용 타입 (Readonly)

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

• "id" | "name" | "age" -> keyof  로 응용가능.

예제

// 한 명의 유저 정보를 불러오는 기능
function fetchUser(): ReadonlyUser {
  return {
    id: 1,
    name: "홍길동",
    age: 27,
  };
}
const user = fetchUser();
//user.id = 1; // 읽기 전용으로 설정해 놨기 때문에 오류 발생.

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

updateUser({
  age: 25,
});

 

 

4. 템플릿 리터럴 타입 (Template Literal Types)

기존 문자열 리터럴 타입을 조합하여 새로운 문자열 패턴을 만들 때 유용.

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

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

• `ColoredAnimal 은 `"red-dog" | "red-cat" | "red-chicken" | "black-dog" ....` 과 같은 패턴을 자동으로 생성

활용 예제.

type ButtonSize = "small" | "medium" | "large";
type ButtonVariant = "primary" | "secondary";

type ButtonClass = `btn-${ButtonSize}-${ButtonVariant}`;