TypeScript interface 와 type aliases

interface

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

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

interface Person {
    name: string;
    age: number
}

const p1: Person = { name: 'kim', age: 23};
const p2: Person = { name: 'lee', age: '24'};

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

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

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

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: 'kim',
    birthday: '1995-01-01', 
}; // 타입에러
const p2 = {
    name: 'lee',
     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;
}

interface 와 타입별칭의 차이

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

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

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

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