티스토리 뷰

🦆 덕 타이핑과 구조적 타이핑
타입스크립트에서 "덕 타이핑"은 객체의 타입을 결정하는 데 객체가 필요로 하는 속성이나 메서드의 존재에 초점을 둔 타입 매칭 방식을 말합니다. 덕 타이핑은 "덕 테스트(duck test)"에서 유래되었는데, "오리처럼 걷고, 오리처럼 꽥꽥 소리를 내면, 그것은 오리다"라는 개념을 기반으로 합니다.
즉, 어떤 새가 오리로 태어났는지, 정말 오리인지는 중요하지 않습니다. 새가 오리처럼 보이고 오리처럼 행동하면 오리가 아닐리가 없다고 생각하는 것입니다.
⛳ 덕 타이핑과 구조적 타이핑은 동일한 개념을 가리킨다
두 용어는 모두 객체의 타입을 결정할 때 구조와 필요한 속성의 존재에 초점을 둔 타입 매칭 방식을 의미합니다. 덕 타이핑이라는 용어는 덕 테스트로부터 유래된 것이며, 이를 좀 더 일반적인 개념을 나타내는 용어로 구조적 타이핑이라는 단어가 나온 것입니다.
따라서, 덕 타이핑과 구조적 타이핑은 동일한 개념을 나타냅니다.
⛳ 코드로 알아보자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | interface Lion { age: number; sounds: string; } interface Cat { age: number; sounds: string; favorite: "mouse" | "tuma" | "chur"; } const simba: Lion = { age: 10; sounds: "roar", }; const jerry: Cat = { age: 6, sounds: "meow", favorite: "chur", }; function introduceLion({ age, sounds }: Lion): string { return `This lion is ${age} years old and sounds like ${sounds}`; } console.log(introduceLion(simba)); // "This lion is 10 years old and sounds like roar" console.log(introduceLion(jerry)); // "This lion is 6 years old and sounds like meow" | cs |
introduceLion 함수는 Lion 타입을 매개변수로 받아 사자에 대한 소개글(string)을 반환하는 함수입니다. 따라서 Lion 타입인 simba를 매개변수로 받을 때만 실행되어야할 것 같지만, Cat 타입인 jerry를 매개변수로 받아도 실행되는 것을 볼 수 있습니다.
타입스크립트는 구조적 타이핑을 통해 해당 객체의 구조와 호환 가능성을 검사합니다.
`jerry` 객체는 `Cat` 인터페이스를 따르고 있습니다. 그리고 `Cat` 인터페이스는 `age`와 `sounds` 속성을 정의하고 있습니다. `introduceLion`함수는 `Lion` 타입의 매개변수를 받기 땜누에, `jerry` 객체의 타입은 엄밀히 말하면 `Lion`과 일치하지 않지만, `Lion`이 요구하는 `age`와 `sounds` 속성을 가지고 있으므로, 그 값을 올바르게 전달하고 있는 것입니다.
구조적 타이핑은 객체의 구조를 기반으로 타입 호환성을 결정하기 때문에, 객체가 필요로 하는 속성을 충족시킨다면 해당 객체를 호환 가능한 타입으로 간주합니다.
이는 코드의 유연성과 재사용성을 높이는 데 도움이 됩니다.
그러나 명확한 타입 일치를 원한다면 `introduceLion`함수에 `Lion` 타입으로 맞춰진 객체만 전달하는 것이 좋겠죠?
⛳ 구조적 타이핑의 장점과 단점
장점
- 유연성 : 구조적 타이핑은 명시적인 상속이나 인터페이스 구현을 필요로하지 않으므로, 객체의 타입을 더 자유롭게 결정할 수 있다. 객체가 필요한 속성을 메서드가 가지고 있다면 호환 가능한 타입으로 간주된다. 이는 코드의 유연성과 재사용성을 높일 수 있다.
- 코드 재사용성 : 구조적 타이핑은 객체의 구조를 기반으로 타입을 결정하기 때문에, 객첵가 필요로 하는 속성과 메서드를 충족시키는 다양한 객체를 동일한 타입으로 사용할 수 있다. 이는 코드의 재사용성을 높여 개발 시간을 단축시킬 수 있다.
단점
- 의도의 모호성 : 구조적 타이핑은 객체의 구조를 기반으로 타입을 결정하기 때문에, 개발자의 의도를 명시적으로 전달하기 어려울 수 있다. 명시적인 인터페이스나 클래스를 사용하는 명명적 타이핑과는 달리, 객체의 구조만으로 객체의 의도를 완전히 파악하기 어려울 수 있다.
- 오류의 감지 어려움 : 구조적 타이핑은 객체의 속성과 메서드를 검사하기 어렵기 때문에, 컴파일 시점에서 오류를 감지하기 어려울 수 있다. 객체의 구조가 동적으로 변할 수도 있거나, 외부에서 제공되는 객체의 타입을 검증하기 어려운 상황에서 오류를 발견하는 것이 어려울 수 있다.
- 호환성의 오해 : 구조적 타이핑은 객체의 구조를 기반으로 타입을 결정하기 때문에, 같은 구조를 가지는 객체들이 여러 타입으로 간주될 수 있다. 이는 개발자가 의도하지 않은 객체 간의 호환성을 발생시킬 수 있다. 따라서 타입의 일치를 보장하기 위해 명시적인 타입 어노테이션을 사용하는 것이 좋을 수 있다.
'프론트엔드 > TypeScript' 카테고리의 다른 글
| [TypeScript] 타입스크립트 unknown 타입 - any보다는 안전하게 (3) | 2023.05.31 |
|---|---|
| [TypeScript] 타입스크립트 type과 interface의 공통점과 차이점 (0) | 2023.05.12 |
| [TypeScript] 타입스크립트 유틸리티 타입 - 보다 간결하게✨ (0) | 2023.04.14 |
| [TypeScript] 타입스크립트의 제네릭(Generics) (0) | 2023.01.10 |
| [TypeScript] 타입스크립트 클래스(Class) (0) | 2023.01.03 |
- Total
- Today
- Yesterday
- 자바스크립트
- 리액트
- 데이터분석
- frontend
- JSP
- styled-components
- 인프런
- 타입스크립트
- 파이썬
- 스타일 컴포넌트 styled-components
- 프로젝트 회고
- 딥러닝
- 자바스크립트 기초
- next.js
- jest
- 머신러닝
- 디프만
- react
- 프론트엔드 공부
- TypeScript
- CSS
- react-query
- 자바
- Python
- HTML
- testing
- rtl
- 프론트엔드
- 프론트엔드 기초
- 리액트 훅
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |