반응형
type alias
: 어떤 타입을 부르는 이름
interface
: 어떤 새로운 타입을 만들어 내는 것
함수를 선언할 때 차이
// function
// type alias
type EatType = (food: string) => void;
// interface
interface IEat {
(food: string): void;
}
배열을 선언할 때 차이
// array
// type alias
type PersonList = string[];
// interface
interface IPersonList {
[index: number]: string;
}
interscection을 선언 할 때 차이
interscection: 여러 타입을 합쳐서 사용하는 타입
interface ErrorHandling {
success: boolean;
error?: {message: string};
}
interface ArtistsData {
artists: {name: string}[];
}
// type allas
type ArtistsResponseType = ArtistsData & ErrorHandling;
// interface
interface IArtistsResponse extends ArtistsData, ErrorHandling{}
let art: ArtistsResponseType;
let iar: IArtistsResponse;
union을 사용할 때 차이
type alias는 사용가능 하지만 interface는 사용 불가능
interface Bird {
fly(): void;
layEggs(): void;
}
interface Fish {
swim(): void;
layEggs(): void;
}
// type alias에서는 union하기 편함
type PetType = Bird | Fish;
// 인터페이스에서는 union 하기 힘들다.
// 에러 발생
interface IPet extends PetType {};
// 에러 발생
class Pet implements PetType {};
Declaration Merging - 인터페이스에만 있는 기능
같은이름의 인터페이스를 생성하여 기능을 확장하여 사용할 수 있다.
// Declaration Merging - 인터페이스에만 있는 기능
// 같은 이름의 인터페이스를 선언 (기능을 확장할때 주로 사용)
interface MergingInterface {
a: string;
}
interface MergingInterface {
b: string;
}
let mi: MergingInterface;
반응형
'프론트엔드 > TypeScript' 카테고리의 다른 글
class - constructor & initialize (0) | 2021.06.21 |
---|---|
class 기본 (0) | 2021.06.21 |
인터페이스에 readonly 설정하는 방법 (0) | 2021.06.19 |
함수선언할때 인터페이스 사용하는 방법 (0) | 2021.06.19 |
인터페이스에서 인터페이스 상속 (0) | 2021.06.19 |