타입 스크립트 베이직 - 8: keyof & typeof

keyof

객체타입의 프로퍼티 이름들로 숫자나 문자열 리터럴 유니언타입을 생성한다.

가령 아래와 같은 Point 객체를 바탕으로 유니언을 생성해주었다고 하자.

type Point = { x: number; y: number };
type PointProperty = "x" | "y";

"z"를 객체에 추가한다고 할 때 PointProperty도 수동으로 편집해주어야 한다.
유지보수성이 낮다고 볼 수 있다..

type Point = { x: number; y: number; z: number };
type PointProperty = "x" | "y" | "z";

따라서 keyof 연산자를 통해 직접 연결시켜줄 수 있다.
Point에 변화가 생겨도 매번 수정할 필요가 없어졌다.

type Point = { x: number; y: number; z: number };
type PointProperty = keyof Point; // "x" | "y" | "z";

또한 굳이 타입별칭을 사용할 필요가 없다.
직접 사용가능💪

type Point = { x: number; y: number };
// type PointProperty = keyof Point;

const someArray: (keyof Point)[] = ["x"];
// Point의 프로퍼티 이름과 일치하는 요소만 넣을 수 있는 배열!

typeof

자바스크립트를 사용할 때에도 디버깅할 때 자주 사용했었던 연산자.
typeof로 콘솔로깅해보면 해당 값의 타입이 스트링으로 뜰 것이다.

const something = "what's up?"
console.log(typeof something)

타입스크립트에서는 콜론 뒤에 쓰면 타입스크립트 타입으로 뜨게 된다!
이미 존재하는 타입을 가져와서 타입을 정의할 때 사용한다.

type Point = { x: number; y: number };
const point: Point = { x: 123, y: 123 };

let newVariable: typeof point; // Point