[TypeScript] 구조적 타입 시스템이란?

YeongMin·2023년 7월 19일
1

TypeScript

목록 보기
2/3
post-thumbnail

타입스크립트는 구조적 타이핑으로 진행이 된다고 한다

구조적 타이핑이 무엇인가?

우선 타입스크립트는 자바스크립트의 슈퍼셋에서 조금 더 발전한 형태의 언어이다.
그렇기 때문에 컴파일이 진행된 이후에는 js 코드로 변환이 되게 된다.

컴파일 단계에서 타입 체크를 진행하는 목적은 런타임 환경에서의 에러 상황에 대해 미리 체크하기 위함일 것이다. ex) 존재하지 않는 object property, method에 접근

즉 런타임환경에서 human이라는 객체의 name, age 프로퍼티가 필요로 한다면 이 둘이 존재하는지만 체크를 하면 이런 에러상황을 방지할 수 있게 되는 것이다.

interface Foo {
    name: string;
    age: number;
}

function printFoo(foo: Foo ) {
    console.log(`age: ${foo.age}, name: ${foo.name}`);
}

interface SuperFoo extends Foo {
    class: number;
}

const superFoo: SuperFoo =  {
    name: 'name', age: 0, class: 2,
};

printFoo(superFoo);

그래서 이렇게 foo가 아닌 foo의 슈퍼셋(foo의 프로퍼티를 모두 포함하는 또다른 객체) superFoo를 Foo type의 객체를 매개변수로 받는 함수에다가 인자로 넣어준다면 typescript는 컴파일 단계에서 error를 반환하지 않을 것이다.


그러나 여기서 또 하나의 개념이 등장하게 된다.

바로 잉여 속성 검사 혹은 초과 속성 검사 (Excess Property Checks) 라고 불리는 과정이 존재한다.

아래와 같이 직접 변수에 리터럴 방식을 통해 값을 할당해주게 되면 에러가 발생한다.

printFoo({
    name: 'name', age: 0, class: 2,
});

이를 우회할 수 있는 방법은 직접 리터럴 방식을 통해 값을 할당해주는 것이 아니라 해당 블로그에 처음으로 제시된 코드블록의 함수실행부 부분처럼
또 다른 변수에 값을 할당해주고 최종적으로 우회하여 할당해줄 변수에는 참조값을 할당해 주는 것이다.

왜 typescript에서 우회를 허용했는지에 대해서는 다른 포스트에서 작성해볼 예정이다.

결국 구조적 타이핑은 명목적 타이핑과는 다르게 명확한 상속관계를 지향하기 보다는 집합의 개념으로 포함 한다는 개념에 더 가깝다고 볼 수 있다.

아래 Reference에서 꽤나 마음에 드는 구절을 하나 찾았다

생산성이 좋으면서도 타입언어의 장점을 가져가는 워너비 적인 언어를 개발하기 위해 채택한것이 "구조적 타입 시스템" 이다.

Reference

profile
Front-End 안영민

1개의 댓글

comment-user-thumbnail
2023년 7월 19일

유익한 정보를 얻을 수 있어서 기쁩니다.

답글 달기