<div id="readability-page-1" class="page"><div><h2 id="타입과-인터페이스의-차이점과-비슷한-점-이해"><a href="#%ED%83%80%EC%9E%85%EA%B3%BC-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EA%B3%BC-%EB%B9%84%EC%8A%B7%ED%95%9C-%EC%A0%90-%EC%9D%B4%ED%95%B4" aria-label="타입과 인터페이스의 차이점과 비슷한 점 이해 permalink"></a>타입과 인터페이스의 차이점과 비슷한 점 이해</h2>타입스크립트에서 명명된 타입(named type)을 정의하는 방법 두 가지가 있다. <ul><li>방법1. 타입으로 선언</li><li>방법2. 인터페이스를 사용</li></ul><div data-language="typescript"><pre><code>// 방법1. 타입으로 선언 
type TState = {
 name: string;
 capital: string;
}
// 방법2. 인터페이스를 사용 
interface IState {
 name: string;
 capital: string;
}</code></pre></div><blockquote>클래스를 사용할 수도 있지만, 
클래스는 값으로도 쓰일 수 있는 JS 런타임 개념이다.</blockquote><h2 id="인터페이스-선언과-타입-선언의-비슷한-점"><a href="#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-%EC%84%A0%EC%96%B8%EA%B3%BC-%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8%EC%9D%98-%EB%B9%84%EC%8A%B7%ED%95%9C-%EC%A0%90" aria-label="인터페이스 선언과 타입 선언의 비슷한 점 permalink"></a>인터페이스 선언과 타입 선언의 비슷한 점</h2><h3 id="1-명명된-타입은-두-방법으로-정의하든-상태에는-차이가-없다"><a href="#1-%EB%AA%85%EB%AA%85%EB%90%9C-%ED%83%80%EC%9E%85%EC%9D%80-%EB%91%90-%EB%B0%A9%EB%B2%95%EC%9C%BC%EB%A1%9C-%EC%A0%95%EC%9D%98%ED%95%98%EB%93%A0-%EC%83%81%ED%83%9C%EC%97%90%EB%8A%94-%EC%B0%A8%EC%9D%B4%EA%B0%80-%EC%97%86%EB%8B%A4" aria-label="1 명명된 타입은 두 방법으로 정의하든 상태에는 차이가 없다 permalink"></a>1. 명명된 타입은 두 방법으로 정의하든 상태에는 차이가 없다.</h3>IState, TState를 추가 속성과 함께 할당한다면 동일한 오류가 발생한다.<h3 id="2-인덱스-시그니처-사용법"><a href="#2-%EC%9D%B8%EB%8D%B1%EC%8A%A4-%EC%8B%9C%EA%B7%B8%EB%8B%88%EC%B2%98-%EC%82%AC%EC%9A%A9%EB%B2%95" aria-label="2 인덱스 시그니처 사용법 permalink"></a>2. 인덱스 시그니처 사용법</h3><div data-language="typescript"><pre><code>type TDict = {
 [key: string]: string;
}

interface IDict {
 [key: string]: string;
}</code></pre></div><h3 id="3-함수-타입-정의"><a href="#3-%ED%95%A8%EC%88%98-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98" aria-label="3 함수 타입 정의 permalink"></a>3. 함수 타입 정의</h3><div data-language="typescript"><pre><code>type TFn = (x: number) =&gt; string;
interface IFn {
 (x: number): string;
}

const toStrT: TFn = x =&gt; `값: ${x}`;
const toStrI: IFn = x =&gt; `값: ${x}`;</code></pre></div><h3 id="4-두-방법-모두-함수-호출이-가능한-객체이다"><a href="#4-%EB%91%90-%EB%B0%A9%EB%B2%95-%EB%AA%A8%EB%91%90-%ED%95%A8%EC%88%98-%ED%98%B8%EC%B6%9C%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%9C-%EA%B0%9D%EC%B2%B4%EC%9D%B4%EB%8B%A4" aria-label="4 두 방법 모두 함수 호출이 가능한 객체이다 permalink"></a>4. 두 방법 모두 함수 호출이 가능한 객체이다.</h3><div data-language="typescript"><pre><code>type TFnWithProperties = {
 (x: number): number;
 prop: string;
} 

interface IFnWithProperties {
 (x: number): number;
 prop: string;
}</code></pre></div><h3 id="5-제너릭-가능"><a href="#5-%EC%A0%9C%EB%84%88%EB%A6%AD-%EA%B0%80%EB%8A%A5" aria-label="5 제너릭 가능 permalink"></a>5. 제너릭 가능</h3><div data-language="typescript"><pre><code>type TPair&lt;T&gt; = {
 first: T;
 second: T;
} 
interface IPair&lt;T&gt; {
 first: T;
 second: T;
} </code></pre></div><h3 id="6-인터페이스는-타입을-확장할-수-있고-타입은-인터페이스를-확장할-수-있다"><a href="#6-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%8A%94-%ED%83%80%EC%9E%85%EC%9D%84-%ED%99%95%EC%9E%A5%ED%95%A0-%EC%88%98-%EC%9E%88%EA%B3%A0-%ED%83%80%EC%9E%85%EC%9D%80-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%A5%BC-%ED%99%95%EC%9E%A5%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8B%A4" aria-label="6 인터페이스는 타입을 확장할 수 있고 타입은 인터페이스를 확장할 수 있다 permalink"></a>6. 인터페이스는 타입을 확장할 수 있고, 타입은 인터페이스를 확장할 수 있다.</h3><div data-language="typescript"><pre><code>interface IStateWithPop extends TState { 
 population: number;
}

type TStateWithPop = IState &amp; { population: number; };</code></pre></div><blockquote>클래스에 implements 할 때는 타입과 인터페이스를 둘 다 사용 가능하다.</blockquote><h2 id="타입과-인터페이스의-차이점"><a href="#%ED%83%80%EC%9E%85%EA%B3%BC-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90" aria-label="타입과 인터페이스의 차이점 permalink"></a>타입과 인터페이스의 차이점</h2><h3 id="1-유니온-타입o-유니온-인터페이스x"><a href="#1-%EC%9C%A0%EB%8B%88%EC%98%A8-%ED%83%80%EC%9E%85o-%EC%9C%A0%EB%8B%88%EC%98%A8-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4x" aria-label="1 유니온 타입o 유니온 인터페이스x permalink"></a>1. 유니온 타입(O), 유니온 인터페이스(X)</h3> 인터페이스는 타입을 확장할 수 있지만, 유니온은 할 수 없다. 단, 유니온 타입을 확장하는게 필요한 경우에는 아래와 같이 할당 가능한 유니온 타입 추가해준다.<div data-language="typescript"><pre><code>type Input = { /* ... */ };
type Output = { /* ... */ }; 
interface VariableMap {
 [name: string]: Input | Output;
} 

// 또는 

type NamedVariable = (Input | Output) &amp; { name: string };
interface VariableMap {
 [name: string]: NamedVariable;
}</code></pre></div><h3 id="2-type-키워드는-일반적으로-interface보다-쓰임새가-많다"><a href="#2-type-%ED%82%A4%EC%9B%8C%EB%93%9C%EB%8A%94-%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9C%BC%EB%A1%9C-interface%EB%B3%B4%EB%8B%A4-%EC%93%B0%EC%9E%84%EC%83%88%EA%B0%80-%EB%A7%8E%EB%8B%A4" aria-label="2 type 키워드는 일반적으로 interface보다 쓰임새가 많다 permalink"></a>2. type 키워드는 일반적으로 interface보다 쓰임새가 많다.</h3><ul><li>type 키워드는 유니온이 될 수도 있고</li><li>매핑된 타입 또는 조건부 타입 같은 고급 기능에 활용되기도 한다.</li><li>튜플과 배열 타입과 type 키워드를 이용해 더 간결하게 표현할 수 있다.</li></ul><div data-language="typescript"><pre><code>type Pair = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];</code></pre></div><h3 id="3-인터페이스에만-있는-고유-기능---보강augment"><a href="#3-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%97%90%EB%A7%8C-%EC%9E%88%EB%8A%94-%EA%B3%A0%EC%9C%A0-%EA%B8%B0%EB%8A%A5---%EB%B3%B4%EA%B0%95augment" aria-label="3 인터페이스에만 있는 고유 기능 보강augment permalink"></a>3. 인터페이스에만 있는 고유 기능 - 보강(augment)</h3><div data-language="typescript"><pre><code>interface IState {
 name: string;
 capital: string;
}

interface IState {
 population: number;
}

const wyoming: IState = {
 name: 'Wyoming',
 capital: 'Cheyenne',
 population: 500_000,
} // 정상 </code></pre></div>위 예제처럼 속성을 확장하는 것을 ‘선언 병합’이라고 한다. 선언 병합을 지원하기 위해서는 반드시 interface를 사용해야 하며 표준을 따라야 한다. 타입 선언에는 사용자가 채워야하는 빈틈이 있을 수 있는데, 바로 이 선언 병합이 그렇다.<h2 id="타입-선언-vs-인터페이스-선언-어떻게-선택해야할까"><a href="#%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8-vs-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-%EC%84%A0%EC%96%B8-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%84%A0%ED%83%9D%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C" aria-label="타입 선언 vs 인터페이스 선언 어떻게 선택해야할까 permalink"></a>타입 선언 vs 인터페이스 선언, 어떻게 선택해야할까?</h2><ul><li>복잡한 타입이라면 고민할 것도 없이 타입 선언을 사용하면 된다.</li><li>타입과 인터페이스, 두 가지 방법으로 모두 표현할 수 있는 간단한 객체 타입이라면 일관성과 보강 관점에서 고려해봐야 한다.</li><li>일관되게 인터페이스를 사용하는 코드베이스에서 작업하고 있다면 인터페이스를 사용하고</li><li>일관되게 타입을 사용 중이라면 타입을 사용하면 된다.</li><li>아직 스타일이 확립되지 않은 프로젝트라면, 향후에 보강의 가능성이 있을지 생각해 봐야 한다.</li><li>어떤 API에 대한 타입 선언을 작성해야 한다면 인터페이스를 사용하는게 좋다.<ul><li>API가 변경될 때 사요앚가 인터페이스를 통해 새로운 필드를 병합할 수 있어 유용하다.</li><li>그러나 프로젝트 내부적으로 사용되는 타입에 선언 병합이 발생하는 것은 잘못된 설계이다.</li></ul></li></ul><hr>출처: <a href="https://link.coupang.com/a/ki28i">이펙티브 타입스크립트</a> </div>쿠팡 파트너스 활동을 통해 일정액의 커미션을 제공받을 수 있습니다.</div>

아웃풋 트레이닝

BAEKDEV

타입과 인터페이스의 차이점과 비슷한 점 이해
타입스크립트에서 명명된 타입(named type)을 정의하는 방법 두 가지가 있다. 
방법1. 타입으로 선언
방법2. 인터페이스를 사용
// 방법1. 타입으로 선언 
type TState = {
 name: string;
 capital: string;
}
// 방법2. 인터페이스를 사용 
interface IState {
 name: string;
 capital: string;
}
클래스를 사용할 수도 있지만,
인터페이스 선언과 타입 선언의 비슷한 점
1. 명명된 타입은 두 방법으로 정의하든 상태에는 차이가 없다.
IState, TState를 추가 속성과 함께 할당한다면 동일한 오류가 발생한다.
2. 인덱스 시그니처 사용법
type TDict = {
 [key: string]: string;
}
interface IDict {
 [key: string]: string;
}
3. 함수 타입 정의
type TFn = (x: number) => string;
interface IFn {
 (x: number): string;
}
const toStrT: TFn = x => `값: ${x}`;
const toStrI: IFn = x => `값: ${x}`;
4. 두 방법 모두 함수 호출이 가능한 객체이다.
type TFnWithProperties = {
 (x: number): number;
 prop: string;
} 
interface IFnWithProperties {
 (x: number): number;
 prop: string;
}
5. 제너릭 가능
type TPair<T> = {
 first: T;
 second: T;
} 
interface IPair<T> {
 first: T;
 second: T;
} 
6. 인터페이스는 타입을 확장할 수 있고, 타입은 인터페이스를 확장할 수 있다.
interface IStateWithPop extends TState { 
 population: number;
}
type TStateWithPop = IState & { population: number; };
클래스에 implements 할 때는 타입과 인터페이스를 둘 다 사용 가능하다.
타입과 인터페이스의 차이점
1. 유니온 타입(O), 유니온 인터페이스(X)
 인터페이스는 타입을 확장할 수 있지만, 유니온은 할 수 없다. 단, 유니온 타입을 확장하는게 필요한 경우에는 아래와 같이 할당 가능한 유니온 타입 추가해준다.
type Input = { /* ... */ };
type Output = { /* ... */ }; 
interface VariableMap {
 [name: string]: Input | Output;
} 
// 또는 
type NamedVariable = (Input | Output) & { name: string };
interface VariableMap {
 [name: string]: NamedVariable;
}
2. type 키워드는 일반적으로 interface보다 쓰임새가 많다.
type 키워드는 유니온이 될 수도 있고
매핑된 타입 또는 조건부 타입 같은 고급 기능에 활용되기도 한다.
튜플과 배열 타입과 type 키워드를 이용해 더 간결하게 표현할 수 있다.
type Pair = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];
3. 인터페이스에만 있는 고유 기능 - 보강(augment)
interface IState {
 name: string;
 capital: string;
}
interface IState {
 population: number;
}
const wyoming: IState = {
 name: 'Wyoming',
 capital: 'Cheyenne',
 population: 500_000,
} // 정상 
위 예제처럼 속성을 확장하는 것을 '선언 병합'이라고 한다. 선언 병합을 지원하기 위해서는 반드시 interface를 사용해야 하며 표준을 따라야 한다. 타입 선언에는 사용자가 채워야하는 빈틈이 있을 수 있는데, 바로 이 선언 병합이 그렇다.
타입 선언 vs 인터페이스 선언, 어떻게 선택해야할까?
복잡한 타입이라면 고민할 것도 없이 타입 선언을 사용하면 된다.
타입과 인터페이스, 두 가지 방법으로 모두 표현할 수 있는 간단한 객체 타입이라면 일관성과 보강 관점에서 고려해봐야 한다.
일관되게 인터페이스를 사용하는 코드베이스에서 작업하고 있다면 인터페이스를 사용하고
일관되게 타입을 사용 중이라면 타입을 사용하면 된다.
아직 스타일이 확립되지 않은 프로젝트라면, 향후에 보강의 가능성이 있을지 생각해 봐야 한다.
어떤 API에 대한 타입 선언을 작성해야 한다면 인터페이스를 사용하는게 좋다.
API가 변경될 때 사요앚가 인터페이스를 통해 새로운 필드를 병합할 수 있어 유용하다.
그러나 프로젝트 내부적으로 사용되는 타입에 선언 병합이 발생하는 것은 잘못된 설계이다.
출처: 이펙티브 타입스크립트

이펙티브 타입스크립트 - 4. 타입과 인터페이스 차이점 알기

댓글