📘 객체를 타입으로 변환 - keyof / typeof 사용법

타입스크립트 - keyof / typeof

 

typeof 연산자

• typeof : 객체 데이터를 객체 타입으로 변환해주는 연산자

아래의 코드의 obj는 객체이기 때문에, 당연히 객체 자체를 타입으로 사용할 수 없다.

그래서 만일 객체에 쓰인 타입 구조를 그대로 가져와 독립된 타입으로 만들어 사용하고 싶다면, 앞에 typeof 키워드를 명시해주면 해당 객체를 구성하는 타입 구조를 가져와 사용할 수 있다.

const obj = {
   red: 'apple',
   yellow: 'banana',
   green: 'cucumber',
};

// 위의 객체를 타입으로 변환하여 사용하고 싶을때
type Fruit = typeof obj;
/*
type Fruit = {
    red: string;
    yellow: string;
    green: string;
}
*/

let obj2: Fruit = {
   red: 'pepper',
   yellow: 'orange',
   green: 'pinnut',
};

 

함수도 타입으로 변환하여 재사용이 가능하다.

클래스 같은 경우 클래스 자체가 객체 타입이 될수 있으므로 typeof를 안붙여도 된다. (인터페이스는 자체가 타입이기에 불가능)

function fn(num: number, str: string): string {
   return num.toString();
}

type Fn_Type = typeof fn;
// type Fn_Type = (num: number, str: string) => string

const ff: Fn_Type = (num: number, str: string): string => {
   return str;
};

// --------------------------------------------------------------

class Classes {
   constructor(public name: string, public age: number) {}
}

type Class_Type = Classes;
// type Class_Type = { name: string, age, number }

const cc: Class_Type = {
   name: '임꺾정',
   age: 18888,
};

---

keyof 연산자

• keyof : 객체 형태의 타입을, 따로 속성들만 뽑아 모아 유니온 타입으로 만들어주는 연산자

type Type = {
   name: string;
   age: number;
   married: boolean;
}

type Union = keyof Type;
// type Union = name | age | married

const a:Union = 'name';
const b:Union = 'age';
const c:Union = 'married';

 

만일 obj 객체의 키값인 red, yellow, green을 상수 타입으로 사용하고 싶을 때는 typeof obj 자체에 keyof 키워드를 붙여주면 된다.

const obj = { red: 'apple', yellow: 'banana', green: 'cucumber' } as const; // 상수 타입을 구성하기 위해서는 타입 단언을 해준다.

// 위의 객체에서 red, yellow, green 부분만 꺼내와 타입으로서 사용하고 싶을떄
type Color = keyof typeof obj; // 객체의 key들만 가져와 상수 타입으로

let ob2: Color = 'red';
let ob3: Color = 'yellow';
let ob4: Color = 'green';

 

반대로 apple, banana, cucumber을 상수 타입으로 사용하고 싶다면 다음과 같이 사용하면 된다.

const obj = { red: 'apple', yellow: 'banana', green: 'cucumber' } as const;

type Key = typeof obj[keyof typeof obj]; // 객체의 value들만 가져와 상수 타입으로

let ob2: Key = 'apple';
let ob3: Key = 'banana';
let ob4: Key = 'cucumber';

---

keyof / typeof 활용하기

 

Enum 대체 상수 타입

열거형 타입 Enum을 사용하고 싶지않으면, 상수 타입으로 응용이 가능하다.

enum EDirection {
   Up,
   Down,
   Left,
   Right,
}

const ODirection = {
   Up: 0,
   Down: 1,
   Left: 2,
   Right: 3,
} as const;

console.log(EDirection.Left); // 2
console.log(ODirection.Right); // 3

// Enum을 타입으로 사용
function walk(dir: EDirection) {
   console.log(dir);
}

// 객체를 타입으로 사용하기 위해선 typeof 와 keyof 파라미터를 사용해야 한다
type Direction = typeof ODirection[keyof typeof ODirection];
function run(dir: Direction) {
   console.log(dir);
}

walk(EDirection.Left); // 2
run(ODirection.Right); // 3

 

제네릭 활용

만일 함수의 매개변수 key가 반드시 매개변수 obj의 제네릭 타입 T(객체를 받게되는)에 존재하여야 할때, keyof T 를 하면 객체의 key 값을 모아 유니온 타입으로 만들 수 있다.

function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // 성공
getProperty(x, "m"); // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음.

 

---

# 참고자료

https://heropy.blog/2020/01/27/typescript/

이재승 타입스크립트 시작하기

제로초 타입스크립트 올인원