7. 인터페이스 (2)

이번 글에서는 인터페이스 확장과 기타 옵션, 타입 별칭과의 차이에 대해 알아보자. 인터페이스의 기본 개념 및 사용 예제는 아래의 링크에서 확인할 수 있다.

 

https://kim1124.tistory.com/130

6. 인터페이스 (1)

 

1. 인터페이스 확장

 

인터페이스의 확장이란 말 그대로 인터페이스의 기능을 확장하는 것으로 extends 키워드를 사용하여 1개 이상의 인터페이스를 상속받아 기능을 확장할 수 있다.

 

아래의 예제 코드를 살펴보자. 기본이 되는 DclassSedan 인터페이스의 구성 요소를 ChevySedan이라는 인터페이스가 extends 키워드를 통해 멤버를 확장하는 것을 볼 수 있다.

 

interface DclassSedan {
    maker: string;
    price: number;
    power: number;
}

interface ChevySedan extends DclassSedan {
    trim: string;
}

let malibu: ChevySedan = {
    maker: 'chevy',
    price: 2895,
    power: 156,
    trim: 'Primer'
}

 

아래와 같이 1개 이상의 인터페이스도 확장할 수 있다.

 

interface Sedan {
    door: number;
}

interface DclassSedan {
    maker: string;
    price: number;
    power: number;
}

interface ChevySedan extends DclassSedan, Sedan {
    trim: string;
}

let malibu: ChevySedan = {
    door: 4,
    maker: 'chevy',
    price: 2895,
    power: 156,
    trim: 'Primer'
}

 

인터페이스의 확장 기능을 사용할 때 주의할 점은 클래스에서 인터페이스를 지정할 때는 extends 키워드가 아닌 implements 키워드를 사용해야 한다는 것이다.

 

 

다른 객체 지향 언어에서는 인터페이스라는 개념이 실제로 객체화할 수 없는 가상의 구조이기 때문에 implements라는 키워드로 클래스의 구조를 정의하는데, 타입스크립트도 객체 지향 언어와 비슷한 문법을 지향하기 때문에 이러한 구조를 동일하게 가져온 것으로 보인다.

 

2. 인터페이스에 관련된 기타 정보

 

이번에는 앞에서 다루지 못한 인터페이스의 기타 사용법과 개념에 대해서 알아보자.

 

2.1 읽기 전용 속성 지정하기

 

인터페이스의 읽기 전용 속성은 인터페이스로 생성한 객체가 처음 생성할 때만 값을 할당하고 이후에는 변경할 수 없는 속성을 말한다. 키워드 readonly를 멤버 이름 앞에 붙여서 지정할 수 있다.

 

interface DclassSedan {
    readonly maker: string;
    price: number;
    power: number;
}

let malibu: DclassSedan = {
    maker: 'chevy',
    price: 2895,
    power: 156
}

malibu.maker = 'Kia'

 

위의 코드를 VS Code에서 보면 아래와 같이 에러가 발생한다.

 

 

위의 코드를 컴파일러로 변환하면 아래와 같이 JS 코드를 변환해준다.

 

var malibu = {
    maker: 'chevy',
    price: 2895,
    power: 156
};

 

그런데 변환된 자바스크립트 코드를 보니 readonly라고 지정했던 maker 속성에 어떠한 방어 코드도 들어가 있지 않다. 코드를 아래와 같이 바꾼 후 컴파일을 실행하자.

 

var malibu = {
    maker: 'chevy',
    price: 2895,
    power: 156
};

malibu.maker = 'Kia'

console.log('말리부 메이커 > ', malibu.maker)

 

컴파일된 JS 파일을 NodeJS로 실행하면 아래와 같이 값이 변경되는 것을 볼 수 있다. readonly 키워드를 붙였다 하더라도 자바스크립트에서는 객체 멤버를 읽기 전용으로 지정할 수 있는 기능이 없기 때문이다. 따라서, 가급적이면 타입스크립트만을 사용하여 오류를 최소화할 수 있도록 하자.

 

 

2.2 읽기 전용 배열

 

읽기 전용 배열은 ReadonlyArray라는 타입을 사용하여 값을 초기화할 때만 변경할 수 있고 이후에는 값 변경할 수 없는 배열을 만들 때 사용한다.

 

아래의 코드에서 <T>로 감싸 져 있는 부위를 "제네릭"이라고 하는 타입스크립트 문법으로 어떠한 타입이 지정될지 모를 때 컴파일러에게 동적으로 타입을 알려주는 역할을 한다. 제네릭에 대해서는 나중에 뒤에서 따로 살펴보도록 하자.

 

let dClassSedan: ReadonlyArray<string> = ['Malibu', 'K5', 'SONATA', 'SM6']
let dClassSedanPrice: ReadonlyArray<number> = [2985, 3400, 3300, 3600]

 

2.3 정의하지 않은 속성 추가

 

인터페이스를 사용하면 객체의 멤버를 모두 정의할 수 있다는 것을 앞에서 확인하였다. 하지만 때로는 객체에 정의되지 않은 멤버가 추가되어야 할 경우도 있다. 이 대는 아래와 같은 방법으로 추가 멤버를 정의할 수 있다.

 

interface dClassSedan {
    maker: string;
    price: number;
    power: number;
    [name: string]: any;
}


let malibu: dClassSedan = {
    maker: 'chevy',
    price: 2895,
    power: 156
}

malibu.door = 4
malibu.engin = 1.35

 

실행 결과는 아래와 같다. 문법적으로 어떠한 에러도 발생하지 않는다.

 

 

[name: string]: any 정의를 제거하면 에러가 발생하는 것을 확인할 수 있다.

 

 

3. 타입 별칭과의 차이

 

자 이제 마지막으로 인터페이스와 타입 별칭의 차이점에 대해 알아보자. 타입 별칭에 관한 내용은 아래의 링크에서 확인할 수 있다.

 

https://kim1124.tistory.com/129

5. 타입 추론 / 별칭

 

타입 별칭은 복잡한 타입을 쉽게 사용하기 위해 별명을 붙이는 것으로 새로운 타입을 생성하는 것은 아니다. 반면, 인터페이스는 구조에 대한 정의를 하기 때문에 새로운 타입을 생성한다고 볼 수 있다. 하지만 아래와 같이 코딩을 할 때는 두 가지 모두 비슷하게 생겨서 혼동되기 쉽다.

 

// 타입 별칭
type Malibu = {
  maker: string;
  price: number;
}

// 인터페이스
interface Malibu {
  maker: string;
  price: number;
}

 

타입 별칭과 인터페이스의 가장 큰 차이점은 확장의 유무이다. 타입 별칭은 타입을 생성하는 것이 아니기 때문에 기능을 확장할 수 없지만, 인터페이스는 extends 키워드를 통해 여러 인터페이스의 기능을 받아 확장이 가능하다.

 

 

---

 

타입스크립트의 핵심 기능 중 하나인 인터페이스에 대해 알아보았다. 다음 글에서는 인터페이스 외에 타입을 정의하는 방법에 대해 알아보도록 하자. 오늘은 여기까지~