<div id="readability-page-1" class="page"><div role="banner"> <div> <h4>07 Sep 2023</h4> Reading time ~1 minute  </div> <h2 id="typescript에서의-duck-typing">typescript에서의 duck typing?</h2> 다음 코드가 타입스크립트에서도 안될꺼라 생각했다. <div><pre><code>class CatInfo {
 age: number;
 breed: string;
 constructor(age: number) {
 this.age = age;
 this.breed = "C1";
 }
}
class CatInfo2 {
 age: number;
 breed: string;
 constructor(age: number) {
 this.age = age;
 this.breed = "C2";
 }
}
let c1:CatInfo = new CatInfo(10);
let c2:CatInfo2 = new CatInfo2(6)
function hello(c: CatInfo) {
 console.log(c instanceof CatInfo)
 console.log(c);
}
hello(c2);
</code></pre></div> 하지만 잘된다. 몰랐다. 위와 같이 <code>구조</code>가 같으면 같은 타입이라고 간주하는 방식을 <code>Structural Typing</code>하고, <code>이름</code> 또는 <code>hashCode</code> 등으로 구분하는 방식을 <code>Nominal Typing</code> 라고 합니다. 만약, <code>Nominal Typing</code> 방식을 사용하는 것처럼 트릭을 다음과 같이 줄 수 있습니다. <div><pre><code>class CatInfo {
 private age: number;
 private breed: string;
 constructor(age: number) {
 this.age = age;
 this.breed = "C1";
 }
}
class CatInfo2 {
 private age: number;
 private breed: string;
 constructor(age: number) {
 this.age = age;
 this.breed = "C2";
 }
}
let c1:CatInfo = new CatInfo(10);
let c2:CatInfo2 = new CatInfo2(6)
function hello(c: CatInfo) {
 console.log(c instanceof CatInfo)
 console.log(c);
}
hello(c2); // error
</code></pre></div> <code>property</code> 항목 중 한개라도 <code>private</code>으로 선언하면 <code>Nominal Typing</code> 방식처럼 동작 합니다. 다른 방법도 <a href="https://michalzalecki.com/nominal-typing-in-typescript/">Nominal typing techniques in TypeScript</a> 를 참조하면 보여집니다 <h2 id="정리">정리</h2> <ul> <li>Duck Typing : 객체의 변수 및 메소드의 집합이 객체의 타입을 결정</li> <li>Structural Typing : 컴파일 시점에 <code>Duck Typing</code> 와 같이 객체의 구조로 객체의 타입을 결정</li> <li>Nominal Typing : 클래스의 이름 또는 hashCode 등으로 객체의 타입을 결정</li> </ul> Typescript는 <code>Structural Typing</code>을 지원하지만, 몇가지 트릭을 이용하면, <code>Nominal Typing</code>과 같이 사용이 가능하다. 잘 알고 쓰자!!! <h2 id="참고자료">참고자료</h2> <ul> <li><a href="https://soopdop.github.io/2020/12/09/duck-typing/">TypeScript와 Duck Typing의 관계 쉽게 설명하기</a></li> <li><a href="https://michalzalecki.com/nominal-typing-in-typescript/">Nominal typing techniques in TypeScript</a></li> </ul> </div></div>

lahuman

Daniel Lim

typescript에서의 duck typing?
다음 코드가 타입스크립트에서도 안될꺼라 생각했다.
class CatInfo {
  age: number;
  breed: string;
  constructor(age: number) {
    this.age = age;
    this.breed = "C1";
  }
}
class CatInfo2 {
  age: number;
  breed: string;
  constructor(age: number) {
    this.age = age;
    this.breed = "C2";
  }
}
let c1:CatInfo = new CatInfo(10);
let c2:CatInfo2 = new CatInfo2(6)
function hello(c: CatInfo) {
  console.log(c instanceof CatInfo)
  console.log(c);
}
hello(c2);
하지만 잘된다. 몰랐다.
위와 같이 구조가 같으면 같은 타입이라고 간주하는 방식을 Structural Typing하고, 이름 또는 hashCode 등으로 구분하는 방식을 Nominal Typing 라고 합니다.
만약, Nominal Typing 방식을 사용하는 것처럼 트릭을 다음과 같이 줄 수 있습니다.
class CatInfo {
  private age: number;
  private breed: string;
  constructor(age: number) {
    this.age = age;
    this.breed = "C1";
  }
}
class CatInfo2 {
  private age: number;
  private breed: string;
  constructor(age: number) {
    this.age = age;
    this.breed = "C2";
  }
}
let c1:CatInfo = new CatInfo(10);
let c2:CatInfo2 = new CatInfo2(6)
function hello(c: CatInfo) {
  console.log(c instanceof CatInfo)
  console.log(c);
}
hello(c2); // error
property 항목 중 한개라도  private으로 선언하면 Nominal Typing 방식처럼 동작 합니다.
다른 방법도 Nominal typing techniques in TypeScript 를 참조하면 보여집니다
정리
Duck Typing : 객체의 변수 및 메소드의 집합이 객체의 타입을 결정
Structural Typing : 컴파일 시점에 Duck Typing 와 같이 객체의 구조로 객체의 타입을 결정
Nominal Typing : 클래스의 이름 또는 hashCode 등으로 객체의 타입을 결정
Typescript는 Structural Typing을 지원하지만, 몇가지 트릭을 이용하면, Nominal Typing과 같이 사용이 가능하다.
잘 알고 쓰자!!!
참고자료
TypeScript와 Duck Typing의 관계 쉽게 설명하기
Nominal typing techniques in TypeScript

typescript에서의 class, interface 그리고 duck type

댓글