2019 년 업데이트
현재 답변과 공식 문서 는 구식입니다. 그리고 TypeScript를 처음 사용하는 사람들에게는 사용 된 용어가 예제없이 명확하지 않습니다. 아래는 최신 차이점 목록입니다.
1. 객체 / 기능
둘 다 객체의 모양이나 함수 서명을 설명하는 데 사용할 수 있습니다. 그러나 구문이 다릅니다.
상호 작용
interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}
유형 별명
type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;
2. 다른 유형
인터페이스와 달리, 유형 별명은 기본 요소, 공용체 및 튜플과 같은 다른 유형에도 사용될 수 있습니다.
// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
3. 연장
둘 다 확장 할 수 있지만 구문은 다릅니다. 또한 인터페이스와 유형 별칭은 상호 배타적이지 않습니다. 인터페이스는 유형 별명을 확장 할 수 있으며 그 반대도 가능합니다.
인터페이스 확장 인터페이스
interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
타입 별칭은 타입 별칭을 확장합니다
type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
유형 별명을 확장하는 인터페이스
type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
유형 별명은 인터페이스를 확장
interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };
4. 구현
클래스는 인터페이스 또는 유형 별칭을 동일한 방식으로 구현할 수 있습니다. 그러나 클래스와 인터페이스는 정적 청사진으로 간주됩니다. 따라서 통합 유형의 이름을 지정하는 유형 별명을 구현 / 확장 할 수 없습니다.
interface Point {
x: number;
y: number;
}
class SomePoint implements Point {
x = 1;
y = 2;
}
type Point2 = {
x: number;
y: number;
};
class SomePoint2 implements Point2 {
x = 1;
y = 2;
}
type PartialPoint = { x: number; } | { y: number; };
// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
x = 1;
y = 2;
}
5. 선언 병합
유형 별명과 달리 인터페이스는 여러 번 정의 될 수 있으며 단일 선언으로 취급됩니다 (모든 선언의 멤버가 병합 됨).
// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };
