이 코드의 에러가 발생하는 이유가 무엇일까요?

[kwonhygge]

📚 190p - 191p 📌 이 코드의 에러가 발생하는 이유가 무엇일까요?

interface Square {
    width: number;
}

interface Rectangle extends Square {
    height: number;
}

type Shape = Square | Rectangle;

function calculateArea(shape: Shape) {
    if (shape instanceof Rectangle) {
    // ‘Rectangle’ only refers to a type, but is being used as a value here
    // Property ‘height’ does not exist on type ‘Shape’
    // Property ‘height’ does not exist on type ‘Square’
        return shape.width * shape.height;
    } else {
    return shape.width * shape.width;
    }
}

[hotdog1004]

instancof 연산자는 런타임에 실행되지만 Rectangle은 타입이기 때문에 자바스크립트 런타임은 해당 코드를 이해할 수 없습니다. 타입스크립트 코드는 자바스크립트로 컴파일 되는 과정에서 인터페이스, 타입, 타입 구문이 제거됩니다. 결론적으로 런타임에서는 타입을 사용할 수 없어 에러가 발생하게 됩니다.

[kwonhygge]

타입은 검사에만 사용되고 이후 제거되어 자바스크립트 코드만 남습니다. (제거되었는데 왜 남아있는지는 급 의문이네요) 자바스크립트 런타임은 위 코드를 이해하지 못합니다.

[devsomda]

타입스크립트 코드가 자바스크립트 코드로 컴파일 되는 과정에서 모든 인터페이스, 타입, 구문이 제거되어버려 런타임에서는 타입을 사용할 수 없기 때문.

[samseburn]

타입스크립트 interface는 런타임에 존재하지 않아서 instanceof로 타입 가드가 런타임에 동작하지 않습니다. 이로 인해, Rectangle을 구분할 수 없으므로 에러가 나게 됩니다.