#2 [2장_2] 덕 타이핑, 구조적 타이핑, 명목적 타이핑에 대해 설명해주세요! JS의 덕타이핑과 TS 의 구조적타이핑의 공통점과 차이점에 대해서도 알려주세요~!

❓문제

(1) 덕 타이핑, 구조적 타이핑, 명목적 타이핑에 대해 설명해주세요! (2) JS의 덕타이핑과 TS 의 구조적타이핑의 공통점과 차이점에 대해서도 알려주세요~!

🎯 답변 요약

(1)

덕 타이핑이란, 런타임에 해당 구조를 확인하여 타입을 정하는 방법입니다.
구조적 타이핑이란, 컴파일 타임에 구조를 보고 타입을 확인하는 방법입니다.
명목적 타이핑이란, 구조를 우선시하기 보다 어떻게 생겨났는지에 대해 중점적으로 보는 방법입니다. 예를 들어 구조가 같더라도(예를 들어 같은 이름을 가진 class들) 다른 타입으로 간주합니다.

(2) 덕타이핑과 구조적타이핑은 타입 시스템을 구현하는 방식입니다. 타입의 구조에 대해 A interface와 B interface가 있다고 가정해보자. B interface가 A interface의 타입에 대해 유효한지 확인하기 위해 B interface안의 타입들이 A interface에 있는지 만 확인한다라고 볼 수 있습니다. 쉽게 말해서 타입을 받는 입장에서 해당 타입들만 구조적으로 보고 판단한다라고 말할 수 있을 것 같습니다.

차이점은 덕타이핑의 경우 런타임에 타입을 검사할 수 있고 구조적타이핑의 경우 컴파일 타임(즉, 타입 체커)에 타입을 확인 할 수 있습니다.

🎯답변

(1) 덕 타이핑, 구조적 타이핑, 명목적 타이핑

덕타이핑

"만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다”

객체의 타입을 판단할 때, 객체가 가진 속성과 메서드로 판단
객체의 타입을 명시적으로 정의하지 않아도, 객체가 필요한 프로퍼티나 메서드를 가지고 있으면 해당 타입으로 간주하여 사용합니다.

function printPoint(point) {
    console.log(point.x + ", " + point.y);
}

let point = { x: 10, y: 20 };
let anotherPoint = { x: 10, y: 20, z: 30 };

printPoint(point);        // OK, point 객체는 x와 y를 가지고 있음
printPoint(anotherPoint); // OK, anotherPoint 객체도 x와 y를 가지고 있음

구조적 타이핑과 명목적 타이핑

타입 시스템에서 타입의 동일성을 정의하는 방법
정적 타입 언어

구조적 타이핑

객체의 구조, 즉 객체가 가지는 프로퍼티와 메서드를 기반으로 타입의 호환성을 결정합니다.
두 객체가 동일한 프로퍼티와 메서드를 가지고 있다면, 이 객체들은 같은 타입으로 간주됩니다.
할당하려는 객체가 인터페이스에 정의된 모든 속성을 가지고 있으면 호환되고, 추가적인 속성을 포함하는 것은 상관X

interface Point {
    x: number;
    y: number;
}

interface AnotherPoint {
    x: number;
    y: number;
    z: string;
}

let point: Point = { x: 10, y: 20 };
let anotherPoint: AnotherPoint = { x: 10, y: 20, z: "abc" };

point = anotherPoint; // OK, AnotherPoint는 Point의 모든 속성을 가지고 있음
anotherPoint = point; // 오류, Point는 AnotherPoint의 모든 속성을 가지고 있지 않음

구조적 타이핑 = 명목적으로 구체화한 타입 시스템

타입을 사용하는 여러 프로그래밍 언어에서 값이나 객체는 하나의 구체적인 타입을 가지고 있다. 타입은 이름으로 구분되며 컴파일타임 이후에도 남아있는데, 이것을 명목적으로 구체화한 타입 시스템이라고 부르기도 한다.

명목적 타이핑

타입의 이름(명칭)을 기준으로 타입의 호환성을 결정

⇒ 두 타입이 동일한 이름을 가질 때만 서로 호환됩니다.
두 타입이 이름이 다르면 구조가 동일하더라도 서로 다른 타입으로 간주됩니다. 주로 Java, C# 언어에서 사용

class Point {
    int x;
    int y;
}

class AnotherPoint {
    int x;
    int y;
}

Point point = new Point();
AnotherPoint anotherPoint = new AnotherPoint();

// point = anotherPoint; // 컴파일 오류: AnotherPoint는 Point 타입이 아님

(2) 자바스크립트의 덕타이핑과 타입스크립트의 구조적타이핑 비교

공통점:

속성 기반:
- 덕 타이핑: 객체가 특정 메서드나 속성을 가지면 해당 타입으로 간주합니다.
- 구조적 타이핑: 타입이 특정 속성들을 가지고 있으면 그 타입으로 간주합니다.
유연성:
- 객체가 필요한 속성을 가지고 있기만 하면 타입이 올바르다고 간주하므로, 추가적인 속성이 있어도 문제가 되지 않습니다.

차이점:

덕 타이핑 (JavaScript)
- 런타임 시점에 객체의 속성과 메서드로 타입을 결정합니다. JavaScript는 동적 타입 언어로, 타입 검사가 컴파일 타임에 일어나지 않습니다.
- 명시적인 타입 정의가 필요하지 않습니다. 객체가 필요한 속성을 가지고 있으면 됩니다.
구조적 타이핑 (TypeScript)
- 컴파일 시점에 타입 검사를 수행합니다. TypeScript는 정적 타입 언어로, 컴파일 타임에 타입 검사를 합니다.
- 명시적인 타입 정의가 있습니다. 인터페이스나 타입 등을 통해 타입을 정의합니다.

⇒ 타입스크립트의 구조적 타이핑 시스템으로 컴파일 시점에 타입 오류를 확인할 수 있어 타입 안정성을 보장해준다 ~!

StudyForYou / ouahhan-typescript-with-react