TypeScript

TypeScript에서 객체 타입 체크하는 방법: in 키워드 활용하기

citron031 2024. 3. 16. 20:13


타입스크립트에서 객체의 타입을 체크하는 것은 종종 필요한 작업이다.

 

특히, Bird나 Human과 같은 특정한 타입(type alias / interface)을 가진 객체를 다룰 때는 더욱 중요한데, 타입스크립트에서 객체의 타입을 체크하는 방법 중 하나인 `in` 키워드에 대해 알아보았다.

 

typeof로 타입 체크하기


JavaScript에서는 `typeof` 연산자를 사용하여 변수의 데이터 타입을 확인할 수 있다.

일반적으로 이 방법은 원시 타입 (예: 문자열, 숫자, boolean)을 체크할 때 사용된다.

🤷‍♂️ 하지만 객체의 경우 `typeof`는 단순히 `'object'`를 반환하므로 객체의 구체적인 타입을 알 수 없기에 유효하지 않다.

 

const myObject: Bird | Human = getMyObject(); // Bird나 Human 객체일 수 있는 변수

if (typeof myObject === 'object') {
    // 객체일 때의 처리 로직
}

 

😒 위의 코드처럼 typeof는 모든 객체에 대해서 object를 반환하기에 변별력이 없다.

 

 

🤣 instanceof를 생각할 수 있지만, incetanceof는 interface, type에 사용할 수 없다. (Class 등에 사용 가능)

 

in 키워드로 객체 타입 체크하기

`in` 키워드는 객체나 객체의 프로토타입 체인에 특정 속성이 존재하는지 확인하는 데 사용할 수 있다.

이를 활용하여 객체의 타입을 체크할 수 있다!

 

예를 들어, Bird와 Human이라는 타입을 가진 객체에서 공통적으로 존재하는 프로퍼티를 체크하여 타입을 판별할 수 있다.

function isBirdOrHuman(obj: Bird | Human): obj is Bird | Human {
    return 'fly' in obj || 'speak' in obj; // Bird와 Human이 공통으로 가지는 프로퍼티 체크
}

const animal: Bird | Human = getAnimal();

if (isBirdOrHuman(animal)) {
    // 여기서 animal은 Bird나 Human 타입으로 인식됩니다.
    if ('fly' in animal) {
        // Bird에만 있는 프로퍼티에 접근 가능
    } else {
        // Human에만 있는 프로퍼티에 접근 가능
    }
}


TypeScript로 안전하게 타입 체크하기


위의 예제에서는 TypeScript의 타입 가드를 사용하여 더욱 안전하게 타입 체크를 할 수 있다. 

타입 가드는 함수에서 반환값에 대해 특정한 타입을 단언하여 해당 타입으로 변수를 사용할 수 있도록 해준다.

 

아래 예제 처럼 params인 obj가 any여도 is와 in 키워드를 통해서 타입을 체크할 수 있다.

function isBirdOrHuman(obj: any): obj is Bird | Human {
    return 'fly' in obj || 'speak' in obj; // Bird와 Human이 공통으로 가지는 프로퍼티 체크
}

const animal: Bird | Human = getAnimal();

if (isBirdOrHuman(animal)) {
    // 여기서 animal은 Bird나 Human 타입으로 인식됩니다.
    if ('fly' in animal) {
        // Bird에만 있는 프로퍼티에 접근 가능
    } else {
        // Human에만 있는 프로퍼티에 접근 가능
    }
}

 

 

위의 내용처럼 타입스크립트에서 객체의 타입을 체크할 때, `in` 키워드를 활용하면 보다 간편하게 타입을 판별할 수 있다. 

그리고 타입 가드를 활용하여 더욱 안전하게 타입을 체크할 수 있다.