일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- HTML
- 웹퍼블리셔
- react
- JavaScript
- web
- 웹디실기
- 비전공자
- 웹디자인기능사실기
- 정보처리기사
- 생활코딩
- 코드공유
- JS
- github
- CSS
- 웹디자인기능사
- Supabase
- 세로메뉴바
- 깃
- 타입스크립트
- jQuery
- 자바스크립트
- 렛츠기릿자바스크립트
- 슬라이드전환
- git
- 연산자
- 리액트
- PROJECT
- 프론트엔드
- 실기
- 코딩독학
- Today
- Total
코딩하는라민
[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란? 본문
[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란?
📌 구조적 타이핑의 정의
구조적 타이핑은 객체나 데이터의 구조에 기반하여 타입 호환성을 결정하는 타입 시스템
구조적 타이핑은 객체가 특정한 타입으로 정확히 명시되어 있지 않아도, 객체의 구조가 타입과 일치하는지를 확인하여 타입 호환성을 결정한다.
즉, 객체의 속성 구조와 타입이 일치한다면 타입 호환성이 성립된다.
이러한 특성은 코드의 재사용성과 유연성을 높일 수 있다.
📌 구조적 타이핑 예시
type Cafe = {
menu: string;
}
type Home = {
todo: string;
}
// 특정 타입으로 정확히 명시되어있지 않더라도
const homeCafe = {
menu: "cake",
todo: "sleeping",
}
// 객체의 구조가 일치하는지 '타입 호환성' 확인
const ediya: Cafe = homeCafe;
ediya 는 Cafe 타입으로 선언되었기 때문에 menu 속성만 요구한다.
또한 HomeCafe 는 menu 속성을 가지고 있기 때문에 ediya 에 할당할 수 있다.
const ediya: Cafe = HomeCafe;
즉 이 과정은 구조적 타이핑을 보여주는 예시이고 이를 통해 구조적 타이핑이 속성 구조에 기반하여 타입 호환성을 결정하는 것이다.
여기서 ediya 는 Cafe 타입의 menu 속성만 가질 수 있고, todo 속성은 가질 수 없다.
HomeCafe 를 구조적 할당이 아닌 ediya 와 HomeCafe 는 구조적으로 동일한가? 를 보여주기 위함이다.
Cafe 에 정의된 menu 속성의 타입이 HomeCafe 객체의 menu 속성과 타입이 일치하는가?
구조적으로 동일한 객체를 할당하는 것이 아닌 직접적으로 객체를 할당하는 경우에는 에러가 발생한다.
type Cafe = {
menu: string;
}
type Home = {
todo: string;
}
const ediya: Cafe = {
menu: "cake",
todo: "sleeping", // 🚨 error
};
위의 예시와 마찬가지로 ediya 는 Cafe 타입의 menu 속성만 요구하는데, 요구하지 않은 속성을 포함한 객체를 직접 할당해버리면 에러가 발생한다.
타입스크립트에서 구조적 타이핑은 변수 할당에 적용된다.
📌 덕 타이핑(Duck Typing)
If it walks like a duck and it quacks like a duck, then it must be a duck
오리처럼 걷고, 오리처럼 소리를 내면, 그것은 오리다
덕 타이핑(Duck Typing)은 객체의 속성과 메서드가 어떤 타입인지가 아니라, 해당 객체가 특정한 행동이나 동작을 지원하는지를 기준으로 타입을 결정한다는 개념이다. 즉, 객체의 동작에 초점을 두고 타입을 결정한다.
구조적 타이핑 | 덕 타이핑 |
타입스크립트 | 자바스크립트 |
정적 타입 | 동적 타입 |
타입 검사기에서 구조적 타이핑은 정적 시스템이 타입을 검사하는 경우 | 런타임에서 사용될 때까지 객체의 타입을 검사하지 않음 |
interface Duck {
sound(): void;
}
class MallardDuck implements Duck {
sound() {
console.log("오리처럼 꽥꽥 소리를 냅니다.");
}
}
class Ramin {
sound() {
console.log("코딩하는 라민이 꽥꽥 소리를 냅니다.");
}
}
function duckBehavior(duck: Duck) {
duck.sound();
}
const mallardDuck = new MallardDuck();
const ramin = new Ramin();
duckBehavior(mallardDuck); // MallardDuck 객체는 Duck 타입의 행동을 지원하므로 덕 타이핑에 의해 인자로 전달 가능
duckBehavior(ramin); // Ramin 객체도 walk()과 sound() 메서드를 가지므로 덕 타이핑에 의해 인자로 전달 가능
클래스 Duck
- Duck 인터페이스는 sound 메서드를 가진 객체.
- 클래스 MallardDuck는 Duck 인터페이스를 구현하여 sound 메서드를 구현한다.
클래스 Ramin
- Duck 인터페이스를 구현하지 않았지만 sound 메서드를 가지고 있다.
함수 duckBehavior
- Duck 타입 인자를 받아서 sound 를 호출
- 이 함수는 덕 타이핑의 원칙을 따르며, sound 를 지원한다면 Duck 타입으로 간주된다.
객체의 실제 타입보다는 객체의 동작에 주목하고, 동작을 기반으로 타입 호환성을 결정하는 것이 덕 타이핑의 핵심이다.
참고 : 러닝 타입스크립트를 읽고, chat GPT 의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.
'Core > TypeScript' 카테고리의 다른 글
[TypeScript] 초과 속성 검사 (Excess Property Checks) (5) | 2023.05.30 |
---|---|
[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias) (3) | 2023.05.29 |
[TypeScript] 리터럴 타입(literal types) (0) | 2023.05.26 |
[TypeScript] 유니언 타입(Union Type)과 내로잉(narrowing) (2) | 2023.05.25 |
[TypeScript] 타입 애너테이션(Type annotation) (2) | 2023.05.25 |