ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • TypeScript에서 객체 타입 체크하는 방법: in 키워드 활용하기
    TypeScript 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` 키워드를 활용하면 보다 간편하게 타입을 판별할 수 있다. 

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

Designed by Tistory.