TypeScript interface 와 type aliases

IT공부중·2020년 4월 1일
0

TypeScript

목록 보기
8/9
post-thumbnail
post-custom-banner

interface

자바에서 인터페이스는 클래스를 구현하기 전에 필요한 메서드를 정의하는 용도로 쓰이지만, 타입스크립트에서는 좀 더 다양한 것들을 정의하는 데 사용된다.

인터페이스로 타입을 정의할 때는 interface 키워드를 사용한다.

interface Person {
    name: string;
    age: number
}

const p1: Person = { name: 'mike', age: 23};
const p2: Person = { name: 'mike', age: 'ten'};

Person 인터페이스를 정의하고 객체 내부에 존재하는 각 속성의 타입을 정의한다. p2는 age가 number 여야 되는데 string을 넣어서 타입 에러가 났다.

interface Person {
    name: string;
    age?: number;
}
const p1: Person = { name: 'mike' };

? 기호를 붙이면 선택 속성으로 할 수 있다.

interface Person {
    readonly name: string;
    age?: number;
}

const p1: Person = {
    name: 'mike',
}
p1.name = 'jone'; // 컴파일 에러

정의 되지 않은 속성값을 갖고 있어도 할당이 가능하다. 단, 리터럴로 값을 초기화하는 경우에는 인터페이스에 정의되지 않은 속성값이 있으면 타입에러가 발생한다.

interface Person {
    readonly name: string;
    age?: number;
}

const p1: Person = { // Person에 birthday가 없으므로 에러가 난다.
    name: 'mike',
    birthday: '1997-01-01', 
}; // 타입에러
const p2 = {
    name: 'mike',
     birthday: '1997-01-01', 
};
const p3: Person = p2; // 에러가 안 난다. p3타입이 p2타입을 포함하는 더 큰 타입이기 때문이다.

타입 별칭 (Type Aliases)

타입 별칭은 타입의 새로운 이름을 생성한다. 프로그래머의 의도를 보다 명확하게 나타낼 수 있다.
custom type이라고 부르기도한다.

기본 타입을 포함한 모드타입이 올 수 있다.

type Name = string;
type Age = number;
type CombineNumberString = string | number;
type User = {
    name: string;
    heihgt: number;
}

별칭은 단순히 새로운 이름일 뿐이고, 실제로 새로운 타입이 생성되는 것이 아니다. 타입 에러를 냈을 때 Name, Age 등에 대해서 나오는 것이아니고 string, number~ 이런식으로 에러가 나온다.

interface 와 타입별칭의 차이

타입에 새로운 이름을 붙이는 수단이라는 점에서 인터페이스와 타입 별칭은 비슷한 점이 많다. 하지만 차이점 이 있다.

  • 타입 별칭의 이용해서 기본타입, 배열과 튜플, 유니온 타입 등에 새로운 이름을 붙일 수 있다. 인터페이스는 불가능. ex) type Name = string;

  • 타입 별칭은 실제로는 새 타입을 생성하지 않는다. 따라서 타입과 관련된 에러가 발생했을 시 타입 별칭을 보여주지 않고 실제 타입을 보여준다. 인터페이스는 실제로 새 타입을 생성하고 관련 타입 에러에는 인터페이스 쪽이 문제가 있다고 가르쳐준다.

  • 인터페이스는 extends 키워드로 확장할 수 있지만, 타입 별칭은 그렇지 않다.

이런 차이점 때문에 공식 문서에서는 가능한 인터페이스 사용을 권장한다. 기본적으로 인터페이스로 표현할 수 있는 모든 타입은 인터페이스로 표현하고, 기본 타입에 새로운 이름을 붙이고 싶거나 유니온 타입을 명명하고 싶은 경우 등 인터페이스의 능력 밖인 부분에서만 타입 별칭을 사용하는 것이 좋다.

profile
4년차 프론트엔드 개발자 문건우입니다.
post-custom-banner

0개의 댓글