4 - pick

[DEV4N4]

// your answers
type MyPick<T, K extends keyof T> = {
    [key in K]: T[key]
}

1. keyof 설명

keyof는 주어진 객체 타입에서 모든 키를 Union 타입으로 변환합니다.

예를 들어, userInfo라는 인터페이스가 있을 때:

interface userInfo {
  name: string;
  age: number;
}

type keyofValue = keyof userInfo;
// keyofValue = "name" | "age"

위 코드에서 keyof userInfo는 userInfo 인터페이스의 모든 키를 union 타입으로 반환합니다. 즉, keyofValue는 "name" | "age"가 됩니다. 이는 userInfo 객체에서 name과 age라는 키를 선택할 수 있다는 의미입니다.

2. in 설명

in은 객체나 배열을 구성할 때 사용됩니다. in을 사용하면 연합 타입의 값을 하나씩 뽑아내어 객체의 키로 사용할 수 있습니다.

예를 들어, 다음과 같이 사용됩니다:

type name = 'firstname' | 'lastname';

type TName = {
  [key in name]: string;
};
// TName = { firstname: string, lastname: string }

여기서 key in name은 'firstname'과 'lastname'을 하나씩 뽑아서 객체의 키로 사용하고, 그 값의 타입은 string으로 설정하는 것입니다. 결과적으로 TName 타입은 { firstname: string, lastname: string }이 됩니다.

3. 실제 개발에서의 예시

(1) 제너릭을 사용한 getValue 함수

다음은 객체에서 특정 값을 가져오는 getValue 함수입니다:

function getValue(o: object, key: string) {
  return o[key];
}

const obj1 = { name: '张三', age: 18 };
const values = getValue(obj1, 'name');

이렇게 작성하면 key에 어떤 값을 넣든지 오류가 발생하지 않지만, 타입스크립트의 장점이 사라집니다. 왜냐하면, getValue 함수는 key가 obj1 객체의 키인지 확인하지 않기 때문입니다.

(2) 타입 안전성을 위한 개선

타입스크립트에서는 제너릭을 사용하여 key가 실제로 객체의 키 중 하나인지 체크할 수 있습니다. 개선된 버전은 다음과 같습니다:

function getValue<T extends Object, K extends keyof T>(o: T, key: K): T[K] {
  return o[key];
}

const obj1 = { name: '张三', age: 18 };
const values = getValue(obj1, 'name');
// values의 타입은 string이 됩니다.

이렇게 작성하면, key는 반드시 obj1 객체의 키 중 하나여야 하고, 반환값의 타입도 obj1[key]에 해당하는 타입으로 자동으로 추론됩니다. 예를 들어 obj1에서 key가 'name'일 경우, values는 string 타입이 됩니다.

(3) 잘못된 키 사용 시 오류 발생

만약 key로 obj1 객체에 없는 키를 전달하면, 타입스크립트는 오류를 발생시킵니다:

const invalidValue = getValue(obj1, 'address'); // 오류 발생

이 경우 address는 obj1 객체의 키에 없기 때문에, 타입스크립트는 오류를 발생시킵니다. 이렇게 하면 타입 안정성을 보장할 수 있습니다.

정리

• keyof: 객체의 키들을 연합 타입으로 반환합니다.
• in: 연합 타입의 값을 하나씩 뽑아내어 객체의 키로 사용할 때 사용합니다.
• 제너릭을 활용하면 객체의 특정 키를 안전하게 다룰 수 있고, 타입스크립트의 타입 체크 기능을 유용하게 사용할 수 있습니다.