<div id="readability-page-1" class="page"><div>
 <a href="/m/category/WEB2.0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D">WEB2.0/프로그래밍</a><h3>typescript의 인터페이스는 javscript에는 없습니다</h3>
 </div><cite>나를찾는아이</cite>
 2023. 3. 6. 13:24
 <div>
 typescript에서 당연하게 이용하는것이 interface 입니다

인터페이스는 추상화, 다형성에 있어서 매우 의미있는 역할을 하고 있습니다

그런데 typescript의 인터페이스는 javascript에는 없다는 사실 알고 계셨나요?

이 사실을 은근히 모르시는 분들이 많더라구요

javascript는 동적언어로 interface가 없어도 동일한 시그니쳐를 가지고 있는 경우 동일한 타입으로 간주하여 다형성을 사용할수 있습니다

이부분에 대해서는 조금 뒤에 코드에서 다시 알아보기로 합시다

typescript는 javascript에 타입을 지원하여 조금더 편하게(?) 코딩을 할수 있도록 돕는데요

다음의 typescript 코드를 살펴봅시다

<pre id="code_1677835599611" data-ke-language="javascript" data-ke-type="codeblock"><code>interface IAnimal {
 shout(): void
}

class Dog implements IAnimal {
 
}</code></pre>
IAnimal 인터페이스를 선언하고 해당 인터페이스를 구현한 구현체 Dog를 선언했습니다

interface에는 shout() 라는 추상메서드가 있는데

구현체인 Dog에서 구현을 하지 않았습니다


<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-03-03 오후 6.26.21.png" data-origin-width="1668" data-origin-height="756">
 
 <img src="https://blog.kakaocdn.net/dn/AQuTc/btr1IKwhv6J/Fyga80eRorYzQfibFz3Rb0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-03-03 오후 6.26.21.png" data-origin-width="1668" data-origin-height="756">
 
 
</figure>
타입스크립트는 이러한 상황에서 타입오류를 알려줍니다

Dog가 IAnimal의 shout를 구현하지 않았다고 말이죠

<pre id="code_1677835680263" data-ke-language="javascript" data-ke-type="codeblock"><code>interface IAnimal {
 shout(): void
}

class Dog implements IAnimal {
 shout() {
 console.log("멍멍");
 }
}</code></pre>

이렇게 shout() 메소드를 구현하면 더이상의 에러는 발생하지 않습니다

인터페이스가 특정 구현체 클래스를 만들때 누락된 메소드는 없는지 타입을 체크해주는것이지요

그런데 위의 Dog 클래스를 javascript로 변환해보면 어떻게 될까요?

<pre id="code_1677835689568" data-ke-language="javascript" data-ke-type="codeblock"><code>"use strict";
class Dog {
 shout() {
 console.log("멍멍");
 }
}</code></pre>

자바스크립트로 변환한 결과입니다

오잉? interface는 감쪽같이 사라져버렸습니다

Dog 클래스만 남아있습니다


그렇습니다 javascript는 interface가 없으며 typescript에서 javascript의 컴파일단의 타입체크를 도와주기 위해 가지고 있는것입니다

javascript는 동적언어로서 시그니처만으로 다형성을 구현할수 있습니다

아래의 예제를 살펴보죠

<pre id="code_1677835769275" data-ke-language="javascript" data-ke-type="codeblock"><code>interface Animal {
 shout() : void
}

class Duck {
 shout() : void {
 console.log("I'm a duck");
 }
}
 
class Tiger {
 shout() : void {
 console.log("I'm a tiger");
 }
}
 
class Noiser {
 makeSomeNoise(animal: Animal) : void {
 animal.shout();
 }
}
 
const noiser = new Noiser();
noiser.makeSomeNoise(new Duck());
noiser.makeSomeNoise(new Tiger());</code></pre>

Duck과 Tiger는 명시적으로 Animal이라는 인터페이스를 상속받지 않았습니다

그런데도 불구하고 Noiser라는 클랙스에서 Animal 이라는 타입으로 사용이 가능합니다

Animal이 가지고 있는 shout 메소드를 Dock과 Tiger가 가지고 있기 때문입니다

이게 바로 동적언어의 특성인데요

그래서 interface를 굳이 상속받지 않아도 다형성을 구현할수 있게되는것입니다


하지만 많은 사람들이 정적언어에 익숙하기 때문에, 좀 더 가독성이 좋기도하구요

타입스크립트의 도움을 많이 받는데요

인터페이스는 이런 존재랍니다
 
 
 </div></div>

나를 찾는 아이

Kyoung min, Kim

typescript에서 당연하게 이용하는것이 interface 입니다
 
인터페이스는 추상화, 다형성에 있어서 매우 의미있는 역할을 하고 있습니다
 
그런데 typescript의 인터페이스는 javascript에는 없다는 사실 알고 계셨나요?
 
이 사실을 은근히 모르시는 분들이 많더라구요
 
javascript는 동적언어로 interface가 없어도 동일한 시그니쳐를 가지고 있는 경우 동일한 타입으로 간주하여 다형성을 사용할수 있습니다
 
이부분에 대해서는 조금 뒤에 코드에서 다시 알아보기로 합시다
 
typescript는 javascript에 타입을 지원하여 조금더 편하게(?) 코딩을 할수 있도록 돕는데요
 
다음의 typescript 코드를 살펴봅시다
 
interface IAnimal {
  shout(): void
}
class Dog implements IAnimal {
  
}
IAnimal 인터페이스를 선언하고 해당 인터페이스를 구현한 구현체 Dog를 선언했습니다
 
interface에는 shout() 라는 추상메서드가 있는데
 
구현체인 Dog에서 구현을 하지 않았습니다
 
 
타입스크립트는 이러한 상황에서 타입오류를 알려줍니다
 
Dog가 IAnimal의 shout를 구현하지 않았다고 말이죠
 
interface IAnimal {
  shout(): void
}
class Dog implements IAnimal {
  shout() {
    console.log("멍멍");
  }
}
 
이렇게 shout() 메소드를 구현하면 더이상의 에러는 발생하지 않습니다
 
인터페이스가 특정 구현체 클래스를 만들때 누락된 메소드는 없는지 타입을 체크해주는것이지요
 
그런데 위의 Dog 클래스를 javascript로 변환해보면 어떻게 될까요?
 
"use strict";
class Dog {
    shout() {
        console.log("멍멍");
    }
}
 
자바스크립트로 변환한 결과입니다
 
오잉? interface는 감쪽같이 사라져버렸습니다
 
Dog 클래스만 남아있습니다
 
 
그렇습니다 javascript는 interface가 없으며 typescript에서 javascript의 컴파일단의 타입체크를 도와주기 위해 가지고 있는것입니다
 
javascript는 동적언어로서 시그니처만으로 다형성을 구현할수 있습니다
 
아래의 예제를 살펴보죠
 
interface Animal {
    shout() : void
}
class Duck {
    shout() : void {
        console.log("I'm a duck");
    }
}
  
class Tiger {
    shout() : void {
        console.log("I'm a tiger");
    }
}
  
class Noiser {
    makeSomeNoise(animal: Animal) : void {
        animal.shout();
    }
}
 
const noiser = new Noiser();
noiser.makeSomeNoise(new Duck());
noiser.makeSomeNoise(new Tiger());
 
Duck과 Tiger는 명시적으로 Animal이라는 인터페이스를 상속받지 않았습니다
 
그런데도 불구하고 Noiser라는 클랙스에서 Animal 이라는 타입으로 사용이 가능합니다
 
Animal이 가지고 있는 shout 메소드를 Dock과 Tiger가 가지고 있기 때문입니다
 
이게 바로 동적언어의 특성인데요
 
그래서 interface를 굳이 상속받지 않아도 다형성을 구현할수 있게되는것입니다
 
 
하지만 많은 사람들이 정적언어에 익숙하기 때문에, 좀 더 가독성이 좋기도하구요
 
타입스크립트의 도움을 많이 받는데요
 
인터페이스는 이런 존재랍니다

typescript의 인터페이스는 javscript에는 없습니다

댓글