[타입스크립트] typeof, keyof, 타입가드

 

 

✨ typeof 연산자

- 타입 컨텍스트에서 변수나 프로퍼티의 타입을 나타내기 위해 타입 컨텍스트에서 사용할 수 있는 typeof 연산자를 추가한다.

- 피연산자의 평가 전 자료형을 나타내는 문자열을 반환

console.log(typeof 42);
// Expected output: "number"

console.log(typeof 'blubber');
// Expected output: "string"

console.log(typeof true);
// Expected output: "boolean"

let s = 'hello'; //s의 타입은 string

//string이라고 표기하지 않고 typeof s로도 표현 가능
let n: typeof s = "world";

 

 

- 이를 객체타입으로도 활용가능

const fruit = {
	red: 'apple',
	yellow: 'banana',
  	purple: 'grape'
}

type Fruit = typeof fruit;

//즉, 다음과 같다
type Fruit {
	red: string;
    yellow: string,
    purple: string
}

const fruit2: Fruit = {
	red: 'cherry',
  	yellow: 'lemon',
  	purple: 'plum'
}

 

 

 

✨keyof 연산자

- 객체 타입의 프로퍼티 key를 유니온 타입으로 구성해주는 연산자

📌 유니온 타입(Union Type)
- 자바스크립트 or 연산자(||)와 같이 'A'이거나 'B'라는 뜻의 의미하는 타입

 

 

type Point = { x: number; y: number};
type P = keyof point; //'X' | 'Y'

 

interface Car {
  brand: string;
  model: string;
  year: number;
}

type CarKey = keyof Car;
const carKey: CarKey = 'brand';
console.log(carKey); //"brand"

- CarKey에 keyof 연산자로 Car 타입을 지정했으니 CarKey 타입은 Car의 key 값들인 'brand' | 'model' | 'year'가 된다. 따라서 carkey 변수에 brand를 할당할 수 있다.

 

 

type fruit = {
	red: 'apple',
    yellow: 'banana',
    purple: 'grape'
}

//갹체 타입의 프로퍼티 key로만 구성 -> 'red' | 'yellow' | 'purple'과 동일
type Color = keyof fruit;

const fuitOne: Color = 'red'
const fruitTwo: color = 'yellow'
const fruitThree: Color = 'purple'

 

- 만약 타입이 아니라 실제 객체의 프로퍼티의 key 또는 값을 타입으로 사용하고 싶은 경우라면, 해당 객체를 상수로 만들어 keyof 연산자와 함께 사용할 수 있다.

 

 

📌 객체 key를 상수 타입으로

const countryCode = {
	korea: 'KR',
  	japan: 'JP'
} as const

type Type = keyof typeof countryCode

const 김코딩 국적: Type = 'korea'
const 박해커의 국적: Type = 'kapan'

 - typeof는 실제 객체를 객체 타입으로 변환해주고, keyof는 변환된 객체 타입의 key를 유니온 타입으로 변환해준다. 

- 해당 객체의 키값으로 이루어진 유니온 타입을 얻을 수 있다.

 

 

 

📌 객체 key의 값을 상수 타입으로

const countryCode = {
	korea: 'KR',
  	japan: 'JP'
} as const

type Type = typeof countryCode[keyof typeof countryCode]

const 김코딩의국적: Type = countryCode.korea
const 박해커의국적: Type = countryCode.japan

- 다른 참고자료를 보면, 객체의 값을 타입으로 사용할 수 있는 이쪽을 더 많이 활용하는 것 같다.

 

 

 

📕 활용한 예시

export type FontSizeTypes = typeof fontSize
export type FontWeightTypes = typeof fontWeight
export type ColorTypes = typeof color

- 객체의 프로처티 key를 props로 전달할 경우, 위에서 export한 객체 타입을 사용해 해당 props를 전달받은 해당 컴포넌트에서 파라미터의 타입을 지정할 때 사용할 수 있다. 이 때 keyof 연산자를 사용해 key 유니온 타입으로 만들 수 있다.

 

export interface Props {
	fontWeight: keyof FontWeightTypes
}

 

 

 

---

 

 

✨타입가드

- 타입스크립트에서 변수의 타입을 좁히는 데 사용되는 메커니즘

- 타입가드를 사용하면 변수의 타입을 더 구체적인 타입으로 좁히거나 확인할 수 있다.

- 일반적인 타입 가드 형태는 typeof, instanceof, in, 사용자 정의 함수가 있다.

 

 

📌 타입가드 문법
typeof A : A 타입을 문자열로 반환
A instance B : B의 프로토타입 체인에 A가 포함되었는지 boolean 반환
a in A: A의 속성 중에 a가 있는 boolean 반환

 

 

 

📕 typeof 사용한 타입가드

function getNumber(value: string | number) : void {
	if(typeof value === 'string') {
    	console.log(value.length);
     } else {
     	console.log(value);
     }
}

 

 

 

 

📕instanceof를 사용한 타입가드

만약 아래 코드의 id와 같이 공통된 속성을 in 타입가드로 활용하게 되면 타입가드의 역할을 하지 못한다.

interface Book {
  id: number;
  rank: number;
}

interface OnlineLecture {
  id: string;
  url: string;
}

function learnCourse(material: Book | OnlineLecture) : number|string {
	if(rank in material) {
    	return material.rank; 
    } else {
    	return material.url;
    }
    
    if(id in material) {
    	console.log(material.id);
    }
}

 

 

 

 

📌타입 가드 함수(사용자 정의 함수를 사용한 타입 가드)

- 이 함수는 문법이나 구현된 함수가 아니라 사용자가 직접 타입을 구별하기 위한 함수를 만드는 것을 의미

- is 문법을 활용

두개 interface가 공통으로 id라는 속성을 가지게 되면 in으로는 구별할 수 없다. 그래서 타입 가드 함수를 통해 구체적으로 타입을 구별할 수 있다.

 

 

interface Car {
  brand: string;
  speed: number;
}

function isCar(vehicle: any): vehicle is Car {
  return 'brand' in vehicle && 'speed' in vehicle;
}

function displayVehicleInfo(vehicle: Car | { type: string}) : void {
  if( isCar(vehicle)){
    console.log(vehicle.brand, vehicle.speed);
  } else {
    console.log(vehicle.type); //vehicle은 {type: string}으로 추론됨
  }
}

 

 

참고자료1

참고자료2