<div id="readability-page-1" class="page"><div>
                                            <p><a href="/m/category/Programming%20Language/%F0%9F%9F%A6%20Typescript">Programming Language/🟦 Typescript</a></p><h2>TS class(2) : implements, extends(상속), abstract 클래스</h2>
                    <p><cite>
                        <span>DarrenKwonDev</span>
                    </cite>
                </p></div><p><time>2021. 9. 27. 18:13</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p><div>
                    <h4 data-ke-size="size20"><b>implements</b></h4>

<p data-ke-size="size16">클래스가 특정 interface의 조건을 만족하는지 체크하기 위해서 implements를 사용합니다.</p>
<p data-ke-size="size16">object를 interface로 typing하듯, class도 interface로 typing한다고 생각하면 된다.</p>
<pre id="code_1632729308000" data-ke-language="javascript" data-ke-type="codeblock"><code>interface ediable {
  eat: () =&gt; boolean
}

// Cheeze는 ediable interface를 만족해야하므로 eat 함수를 가져야 함
class Cheeze implements ediable {
  eat () {
    return true
  }
}

// eat 함수를 가지고 있지 않아 에러 발생
// Class 'Mac' incorrectly implements interface 'ediable'.
// Property 'eat' is missing in type 'Mac'
class Mac implements ediable {
  typing () {
    return 'no'
  }
}</code></pre>

<p data-ke-size="size16">아래와 같이 여러 개의 interface를 연달아 implements 할 수도 있다.</p>
<pre id="code_1632729451653" data-ke-language="javascript" data-ke-type="codeblock"><code>interface ediable {
  eat: () =&gt; boolean
}

interface drinkable {
  drink: () =&gt; boolean
}

class Cheeze implements ediable, drinkable {
  eat () {
    return true
  }
  drink () {
    return false
  }
}</code></pre>

<h4 data-ke-size="size20"><b>implements에서 주의할 점</b></h4>

<p data-ke-size="size16">아래 예시에서 메서드의 인자인 isExpired는 boolean이 아닌 any로 추론되었다.</p>
<p data-ke-size="size16">왜? <b><span>implements는 클래스 내부에서 타입을 체크, 추론하는 방식을 변화시키지 않고, 그대로 두기 때문이다.</span></b></p>
<p data-ke-size="size16">따라서, 클래스를 작성할 때 interface를 신뢰하기 보다는 직접&nbsp; strict하게 타입을 부여하는 것이 더 안정성있다.</p>
<pre id="code_1632730322461" data-ke-language="javascript" data-ke-type="codeblock"><code>interface ValidUser {
  check: (isExpired: boolean) =&gt; boolean
}

class User implements ValidUser {
  // Parameter 'isExpired' implicitly has an 'any' type.
  check (isExpired) {
    return !isExpired
  }
}</code></pre>


<h4 data-ke-size="size20"><b>extends (클래스 상속)</b></h4>

<p data-ke-size="size16">extends를 기본적으로 활용해보면 다음과 같다.</p>
<pre id="code_1632731734268" data-ke-language="javascript" data-ke-type="codeblock"><code>class Animal {
  move () {
    console.log('Moving along')
  }
}

class Dog extends Animal {
  woof (times: number) {
    console.log('Woof! '.repeat(times))
  }
}

const myDog = new Dog()

myDog.move() // 부모 클래스 메서드
myDog.woof(3) // 자식 클래스 메서드</code></pre>


<p data-ke-size="size16">만약 자식 클래스에서 부모 클래스의 메서드를 overriding 하고 싶다면, 아래와 같은 방식으로 고칠 수 있다.</p>
<pre id="code_1632731927358" data-ke-language="javascript" data-ke-type="codeblock"><code>class Animal {
  move () {
    console.log('Moving along')
  }
}

class Dog extends Animal {
  move (place?: string) {
    if (place === undefined) {
      return super.move() // 부모 클래스의 메서드 실행
    }
    console.log('Walking to ' + place) // 자식 객체의 메서드 
  }
  woof (times: number) {
    console.log('Woof! '.repeat(times))
  }
}

const myDog = new Dog()

myDog.move()
myDog.move('LA')
myDog.woof(3)</code></pre>

<p data-ke-size="size16">다만 조심해야할 점은 부모 클래스인 Animal에서 move는() =&gt; void 꼴의 타이핑이 이미 이루어졌기에, 자식 객체의 인자는 반드시 optional하게 들어가야 한다는 것이다. 만약 자식 클래스인 Dog의 오버라이딩된 메서드인 move를 아래와 같이 수정해보자.</p>
<p data-ke-size="size16">base type과 일치하지 않는다는 에러를 확인할 수 있다.</p>
<pre id="code_1632732307942" data-ke-language="javascript" data-ke-type="codeblock"><code>class Dog extends Animal {
  // Property 'move' in type 'Dog' is not assignable to the same property in base type 'Animal'.
  move (place: string) {
    console.log('Walking to ' + place)
  }
  ... omitted
}</code></pre>

<p data-ke-size="size16">* extends된 클래스의 실행 순서에 유의할 것</p>
<p data-ke-size="size16">아래 코드는 Person class가 먼저 메모리에 올라간 뒤 그 다음에 SecretAgent가 메모리에 올라간다.</p>
<p data-ke-size="size16">Person의 contructor 내부가 실행되는 시점에서는 SecretAgent는 존재하지 않으므로 joe가 출력된다.</p>
<pre id="code_1632732565860" data-ke-language="javascript" data-ke-type="codeblock"><code>class Person {
  public name: string = 'joe'
  constructor () {
    console.log('my name is', this.name)
  }
}

class SecretAgent extends Person {
  public name: string = 'bond'
}

const JamesBond = new SecretAgent() // my name is joe</code></pre>


<h4 data-ke-size="size20"><b>Abstract Class</b></h4>
<p data-ke-size="size16"><a href="https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members" target="_blank" rel="noopener">https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members</a></p>

<p data-ke-size="size16">추상 클래스는 다른 클래스의 기반이 되는 클래스입니다.</p>
<p data-ke-size="size16">추상 클래스를 통해서 extends한 클래스는 추상 메서드를 구체화한 메서드를 반드시 작성해야 합니다.</p>
<p data-ke-size="size16">그리고, 추상적인 클래스이므로 직접적으로 인스턴스를 생성할 수는 없습니다.</p>
<pre id="code_1632734027396" data-ke-language="javascript" data-ke-type="codeblock"><code>// 추상 클래스 내부에 추상 메서드를 정의했다면 이를 상속 받은 클래스는 반드시 해당 메서드를 정의해야 한다.
abstract class Animal {
  // 추상 메서드
  abstract makeSound(): void;

  // 일반 메서드
  move(): void {
    console.log("roaming the earth...");
  }
}

// Cannot create an instance of an abstract class.
const myPet = new Animal()</code></pre>

<p data-ke-size="size16">추상 클래스 내부에 추상 메서드를 정의했다면 이를 상속 받은 클래스는 반드시 해당 메서드를 정의해야 합니다.</p>
<p data-ke-size="size16">위의 경우에는 makeSound라는 추상 메서드를 반드시 이용하여 자식 클래스에서는 구체적인 메서드를 만들어야 합니다.</p>
<pre id="code_1632733634710" data-ke-language="javascript" data-ke-type="codeblock"><code>class Cat extends Animal {}</code></pre>
<p data-ke-size="size16">아래와 같이 Animal을 extends를 하려고 하니 &nbsp;추상 메서드를 구현하라고 경고가 뜬 것을 볼 수 있습니다.</p>
<figure data-origin-width="970" data-origin-height="143" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/ccLV0K/btqLpT2ItnA/FOTT4OVnpvP2KnHKNT52C1/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/ccLV0K/btqLpT2ItnA/FOTT4OVnpvP2KnHKNT52C1/img.png" data-origin-width="970" data-origin-height="143" data-ke-mobilestyle="widthContent"></span></figure>

<p data-ke-size="size16">이를 반영해서 다음과 같이 추상 클래스 상속받은 자식 클래스를 정의하고 활용할 수 있습니다.</p>
<pre id="code_1632734033132" data-ke-language="javascript" data-ke-type="codeblock"><code>class Cat extends Animal {
  makeSound() {
    console.log("miaw miaw");
  }
}

const myCat = new Cat();
myCat.makeSound();
myCat.move();</code></pre>



                                                            
                    
					
                    
                    
                </div></div>

HotHandCoding

DarrenKwon

implements
 
클래스가 특정 interface의 조건을 만족하는지 체크하기 위해서 implements를 사용합니다.
object를 interface로 typing하듯, class도 interface로 typing한다고 생각하면 된다.
interface ediable {
  eat: () => boolean
}
// Cheeze는 ediable interface를 만족해야하므로 eat 함수를 가져야 함
class Cheeze implements ediable {
  eat () {
    return true
  }
}
// eat 함수를 가지고 있지 않아 에러 발생
// Class 'Mac' incorrectly implements interface 'ediable'.
// Property 'eat' is missing in type 'Mac'
class Mac implements ediable {
  typing () {
    return 'no'
  }
}
 
아래와 같이 여러 개의 interface를 연달아 implements 할 수도 있다.
interface ediable {
  eat: () => boolean
}
interface drinkable {
  drink: () => boolean
}
class Cheeze implements ediable, drinkable {
  eat () {
    return true
  }
  drink () {
    return false
  }
}
 
implements에서 주의할 점
 
아래 예시에서 메서드의 인자인 isExpired는 boolean이 아닌 any로 추론되었다.
왜? implements는 클래스 내부에서 타입을 체크, 추론하는 방식을 변화시키지 않고, 그대로 두기 때문이다.
따라서, 클래스를 작성할 때 interface를 신뢰하기 보다는 직접  strict하게 타입을 부여하는 것이 더 안정성있다.
interface ValidUser {
  check: (isExpired: boolean) => boolean
}
class User implements ValidUser {
  // Parameter 'isExpired' implicitly has an 'any' type.
  check (isExpired) {
    return !isExpired
  }
}
 
 
extends (클래스 상속)
 
extends를 기본적으로 활용해보면 다음과 같다.
class Animal {
  move () {
    console.log('Moving along')
  }
}
class Dog extends Animal {
  woof (times: number) {
    console.log('Woof! '.repeat(times))
  }
}
const myDog = new Dog()
myDog.move() // 부모 클래스 메서드
myDog.woof(3) // 자식 클래스 메서드
 
 
만약 자식 클래스에서 부모 클래스의 메서드를 overriding 하고 싶다면, 아래와 같은 방식으로 고칠 수 있다.
class Animal {
  move () {
    console.log('Moving along')
  }
}
class Dog extends Animal {
  move (place?: string) {
    if (place === undefined) {
      return super.move() // 부모 클래스의 메서드 실행
    }
    console.log('Walking to ' + place) // 자식 객체의 메서드 
  }
  woof (times: number) {
    console.log('Woof! '.repeat(times))
  }
}
const myDog = new Dog()
myDog.move()
myDog.move('LA')
myDog.woof(3)
 
다만 조심해야할 점은 부모 클래스인 Animal에서 move는() => void 꼴의 타이핑이 이미 이루어졌기에, 자식 객체의 인자는 반드시 optional하게 들어가야 한다는 것이다. 만약 자식 클래스인 Dog의 오버라이딩된 메서드인 move를 아래와 같이 수정해보자.
base type과 일치하지 않는다는 에러를 확인할 수 있다.
class Dog extends Animal {
  // Property 'move' in type 'Dog' is not assignable to the same property in base type 'Animal'.
  move (place: string) {
    console.log('Walking to ' + place)
  }
  ... omitted
}
 
* extends된 클래스의 실행 순서에 유의할 것
아래 코드는 Person class가 먼저 메모리에 올라간 뒤 그 다음에 SecretAgent가 메모리에 올라간다.
Person의 contructor 내부가 실행되는 시점에서는 SecretAgent는 존재하지 않으므로 joe가 출력된다.
class Person {
  public name: string = 'joe'
  constructor () {
    console.log('my name is', this.name)
  }
}
class SecretAgent extends Person {
  public name: string = 'bond'
}
const JamesBond = new SecretAgent() // my name is joe
 
 
Abstract Class
https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members
 
추상 클래스는 다른 클래스의 기반이 되는 클래스입니다.
추상 클래스를 통해서 extends한 클래스는 추상 메서드를 구체화한 메서드를 반드시 작성해야 합니다.
그리고, 추상적인 클래스이므로 직접적으로 인스턴스를 생성할 수는 없습니다.
// 추상 클래스 내부에 추상 메서드를 정의했다면 이를 상속 받은 클래스는 반드시 해당 메서드를 정의해야 한다.
abstract class Animal {
  // 추상 메서드
  abstract makeSound(): void;
  // 일반 메서드
  move(): void {
    console.log("roaming the earth...");
  }
}
// Cannot create an instance of an abstract class.
const myPet = new Animal()
 
추상 클래스 내부에 추상 메서드를 정의했다면 이를 상속 받은 클래스는 반드시 해당 메서드를 정의해야 합니다.
위의 경우에는 makeSound라는 추상 메서드를 반드시 이용하여 자식 클래스에서는 구체적인 메서드를 만들어야 합니다.
class Cat extends Animal {}
아래와 같이 Animal을 extends를 하려고 하니  추상 메서드를 구현하라고 경고가 뜬 것을 볼 수 있습니다.
 
이를 반영해서 다음과 같이 추상 클래스 상속받은 자식 클래스를 정의하고 활용할 수 있습니다.
class Cat extends Animal {
  makeSound() {
    console.log("miaw miaw");
  }
}
const myCat = new Cat();
myCat.makeSound();
myCat.move();

TS class(2) : implements, extends(상속), abstract 클래스

댓글