<div id="readability-page-1" class="page"><section id="article-content-container"> <details><summary>Table of Contents</summary>

</details>
여기 강아지와 고양이가 있다.
<pre><code>class Dog {
 name: string;
 age: number;
}

class Cat {
 name: string;
 color: string;
}

const dogs: Dog[] = [...];
const cats: Cat[] = [...];
</code></pre>
이때 5살 미만의 강아지나 검은색 고양이를 골라내려고 한다. <code>getFilteredAnimals</code> 함수는 파라미터 <code>animals</code>의 요소 타입이 <code>Dog</code>일 때 5살 미만의 강아지들을, <code>Cat</code>일 때 검은색 고양이들을 반환한다.
<pre><code>function getFilteredAnimals(animals: Dog[] | Cat[]) {
 // do something

 if (animals[0] instanceof Dog) {
 return animals.filter((dog: Dog) =&gt; dog.age &lt; 5);
 }
 
 return animals.filter((cat: Cat) =&gt; cat.color === 'black');
}
</code></pre>
반환 타입과 분류 기준이 경우에 따라 다르기 때문에 좋은 함수는 아닐 수 있다. 하지만 각각의 타입에 대해 동일한 로직을 수행해야 할 때 같은 내용의 함수를 여러개 만드는 것보다 하나의 함수로 여러 타입을 처리하는 것이 나을 때가 있다. 다만 위와 같은 방식으로는 불가능하다.
<code>animals</code>의 요소가 <code>Dog</code> 타입일 수도, <code>Cat</code> 타입일 수도 있기 때문에 함부로 <code>age</code> 프로퍼티나 <code>color</code> 프로퍼티에 접근할 수 없다. 따라서 <code>animals.filter(...)</code> 구문에서 타입 에러가 발생한다.
<pre><code>Cannot invoke an expression whose type lacks a call signature. Type '{ &lt;S extends Dog&gt;(callbackfn: (value: Dog, index: number, array: Dog[]) =&gt; value is S, thisArg?: any): S[]; (callbackfn: (value: Dog, index: number, array: Dog[]) =&gt; any, thisArg?: any): Dog[]; } | { ...; }' has no compatible call signatures.
</code></pre>
<code>animals</code>의 타입을 <code>Dog[] | Cat[]</code>가 아닌 <code>Array&lt;Dog | Cat&gt;</code>으로 지정하여 해결할 수 있다.
<pre><code>function getFilteredAnimals(animals: Array&lt;Dog | Cat&gt;) {
 // do something

 if (animals[0] instanceof Dog) {
 return animals.filter((dog: Dog) =&gt; dog.age &lt; 5);
 }
 
 return animals.filter((cat: Cat) =&gt; cat.color === 'black');
}
</code></pre>
<code>Array</code>는 타입스크립트에 내장된 인터페이스로, 자바스크립트의 <code>Array</code> 객체에 엄격한 타입을 지정한 것이다. 그 원형의 일부를 살펴보면 아래와 같다:
<pre><code>interface Array&lt;T&gt; {
 pop(): T | undefined;
 push(...items: T[]): number;
}
</code></pre>
여기서 <code>&lt;T&gt;</code>가 제네릭(Generic) 문법이다. 통상적으로 배열 자료구조는 어떤 타입이든 모두 담을 수 있어야 한다. 만약 <code>Array</code>가 <code>number</code> 타입만 담을 수 있다면 범용성이 떨어질 것이다.
<pre><code>interface Array {
 pop(): number | undefined;
 push(...items: number[]): number;
}
</code></pre>
<code>any</code> 타입을 지정하면 어떨까? 타입 구분은 없어지겠지만 배열의 요소가 어떤 타입인지 특정할 수 없을 것이다.
<pre><code>arr.push(1); // [1]
arr.push('str'); // [1, 'str'] 
arr.push({ name: 'jake' }); // [1, 'str', { name: 'jake' }]
</code></pre>
제네릭을 사용하면 범용성을 확보하는 동시에 요소의 타입도 보장할 수 있다. 제네릭 타입 <code>&lt;T&gt;</code>는 임의의 타입을 받을 수 있다. (제네릭 타입의 이름은 관습적으로 <code>T</code>라고 짓는다.)
<pre><code>const numArr = new Array&lt;number&gt;();
numArr.push(1);
numArr.push('str'); // Argument of type '"str"' is not assignable to parameter of type 'number'.

const strArr = new Array&lt;string&gt;();
strArr.push('str');
strArr.push(1); // Argument of type '1' is not assignable to parameter of type 'string'.
</code></pre>
제네릭을 설명하기 위해 <code>new Array()</code> 구문으로 배열을 선언했는데, 불가피한 상황이 아니라면 배열 리터럴(<code>const arr = []</code>)을 사용하는 쪽이 더 안전하다. Array 객체가 예상치 못하게 오버라이드될 수 있기 때문이다. 사실 제네릭 타입 배열 <code>Array&lt;Dog | Cat&gt;</code>도 <code>(Dog | Cat)[]</code> 처럼 고쳐쓸 수 있다.
제네릭은 인터페이스 뿐 아니라 함수나 클래스에도 적용할 수 있다. <code>getFilteredAnimals</code>의 경우 타입 각각의 프로퍼티에 접근해야 하기 때문에 제네릭을 적용하기 어려우니 조금 다른 함수를 보자.
<pre><code>function popToPets&lt;T&gt;(animals: T[]) {
 pets.push(animals.pop());
}

popToPets&lt;Dog&gt;(dogs);
popToPets&lt;Cat&gt;(cats);
popToPets&lt;Fox&gt;(foxes);
</code></pre>
<code>popToPets</code>는 <code>animals</code>의 마지막 요소를 pets 배열로 옮긴다. <code>pop</code>은 배열의 프로토타입에 속한 프로퍼티이기 때문에 배열이라면 어떤 타입이든 <code>pop</code>에 접근할 수 있다. 따라서 <code>popToPets</code> 함수는 <code>Dog[]</code>, <code>Cat[]</code>, <code>Fox[]</code> 등 다양한 타입을 받아 처리하는 것이 가능하다. </section></div>

Park Seong-beom

여기 강아지와 고양이가 있다.class Dog {  name: string;  age: number;}class Cat {  name: string;  color: string;}const dogs: Dog[] = [...];const cats: Cat[] = [...];이때 5살 미만의 강아지나 검은색 고양이를 골라내려...

하나의 함수로 강아지와 고양이 분류하기

댓글