typescript tutorial(5탄)

16. 인터페이스 및 클래스

인터페이스(interface)를 통해 값이 따라야 할 제약을 타입으로 표현 할 수 있다. 인터페이스 타입을 통해 값의 형태(shape)를, 즉 값이 어떤 멤버를 가져야 하고 각 멤버의 타입은 어때야 하는지를 서술할 수 있다.

 

클래스(class)를 이용해 객체 지향 프로그래밍 언어와 비슷한 방식으로 코드를 구조화 할 수 있다. 타입스크립트의 클래스는 ES6에 추가된 클래스 문법의 확장으로, 접근 제어자 등의 유용한 추가 기능을 제공한다.

 

인터페이스

[참고 1] 함수 인터페이스 예제 1

→ 타입 별칭과의 차이점

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

• 타입 별칭은 실제로는 새 타입을 생성하지 않는다. 따라서 type User = { name: string; } 타입과 관련된 타입 에러가 발생했을 시 에러 메시지는 User 대신 { name: string; } 를 보여준다. 한편 인터페이스는 실제로 새 타입을 생성하고, interface User { name: string; } 과 관련된 에러 메시지에는 User 가 등장한다.

• 인터페이스는 곧 다룰 extends 키워드를 이용해 확장할 수 있는 반면, 타입 별칭의 경우는 그런 수단을 제공하지 않는다.

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

 

 

색인기능 타입

ahnheejong.gitbook.io/ts-for-jsdev/04-interface-and-class/indexable-types

4.2 색인 가능 타입

 

인터페이스 확장

ahnheejong.gitbook.io/ts-for-jsdev/04-interface-and-class/extending-interfaces

4.3 인터페이스 확장

[참고 2] 인터페이스 확장 예제 1

 

클래스

ahnheejong.gitbook.io/ts-for-jsdev/04-interface-and-class/classes

4.4 클래스

클래스 확장

ahnheejong.gitbook.io/ts-for-jsdev/04-interface-and-class/extending-classes

4.5 클래스 확장

클래스 심화

스태틱 멤버, 접근 제어자, 접근자, 추상클래스

ahnheejong.gitbook.io/ts-for-jsdev/04-interface-and-class/class-advanced

4.6 클래스 심화

인터페이스와 클래스의 관계

클래스의 인터페이스 구현

interface Animal {
    legs: number;
}

class Dog implements Animal {
    legs: number = 4;
}

인터페이스의 클래스 확장

class Point {
   x: number;
   y: number;
}

interface Point3d extends Point {
     z: number;
}

const point3d: Point3d = {x: 1, y: 2, z: 3};