Typescript Interface

Interface 가 필요한 이유

 

type과 interface의 차이점은 인터페이스는 개체의 구조를 설명하는데만 사용할 수 있다는 것
실제로 객체 유형을 정의 할때 인터페이스를 더 자주 보게 됩니다.

 

interface Greetable{
    name: string;

    greet(phrase: string): void;
}

class Person implements Greetable{
    name: string;
    age: number = 27;

    constructor(name: string) {
        this.name = name;
    }

    greet(phrase: string) {
        console.log(phrase + ' ' + this.name);
    }
}

let user1: Greetable;
user1 = new Person('Max');
user1.greet('Hi there - I am');

 

implements와 상속의 차이

상속은 하나의 부모만 상속받을 수 있지만 implements는 여러 개의 인터페이스를 구현할 수 있다.
implements Greetable1, Greetable2

 

Person class 는 Greetable interface의 구현 class라서 user1의 type 이 Greetable이지만 new Person으로 Person class의 인스턴스로 써도 가능하다.

 

Interface의 Public, Private, Protected, readonly

interface Greetable{
    readonly name: string;

    greet(phrase: string): void;
}

class Person implements Greetable{
    name: string;
    age: number = 27;

    constructor(name: string) {
        this.name = name;
    }

    greet(phrase: string) {
        console.log(phrase + ' ' + this.name);
    }
}

let user1: Greetable;
user1 = new Person('Max');
user1.name = 'jongyun'; // Error
user1.greet('Hi there - I am');

 

Interface 도 Class와 마찬가지로 public, private 등을 사용할 수 있습니다.

Greetable의 name 이 readonly property를 가지고 Person 이 Greetable Interface를 구현했습니다.

 

Person class의 name 은 readonly 속성이 없지만 Person 인스턴스를 만들고 그 인스턴스의 name 값을 변경하려고 하면 에러가 발생합니다.

 

Interface Extends

interface Named {
    readonly name: string;
}

interface Age {
    readonly age: number;
}

// Class 에서는 extends 를 사용하여 여러 클래스를 상속 할수 없음
interface Greetable extends Named, Age {
    greet(phrase: string): void;
}

class Person implements Greetable{
    name: string;
    // age: number = 27; // Error: age 를 구현하지 않아서 에러가 발생함

    constructor(name: string) {
        this.name = name;
    }

    greet(phrase: string) {
        console.log(phrase + ' ' + this.name);
    }
}

let user1: Greetable;
user1 = new Person('Max');
user1.greet('Hi there - I am');

 

Interface 도 class와 마찬가지로 상속 (extends)를 사용할 수 있습니다.

Interface 가 class 보다 좀 더 유연하게 확장할 수 있는 이유는 다중 상속을 지원하기 때문입니다.

 

class의 extends는 하나의 부모만 가질 수 있는 반면 interface는 extends 뒤에 쉼표로 구분하여 N 개의 interface를 상속받을 수 있습니다.

 

이로 인하여 여러 인터페이스를 하나의 단일 인터페이스로 병합하거나 둘 이상으로 확장할 수도 있습니다.

 

Interface function type

type AddFn = (a: number, b: number) => number;
let add: AddFn;

add = (n1: number, n2: number) => {
  return n1 + n2;
};

interface AddFn2 {
  (a: number, b: number): number;
}

 

interface에서 function type을 구현하는 예입니다. 보통 이런 경우 type 을 쓰는 경우가 일반적이지만 익명 함수로 구현 하는 것도 알아 두면 좋을 법합니다.

 

Optional Parameters & Properties

interface Named {
    readonly name?: string;
    outputName?: string;
}

interface Age {
    readonly age: number;
}

interface Greetable extends Named, Age {
    greet(phrase: string): void;
}

class Person implements Greetable{
    name?: string;
    age: number = 27;

    constructor(name?: string) {
        if (name) this.name = name;
    }

    greet(phrase: string) {
        if (this.name) {
            console.log(phrase + ' ' + this.name);
        } else {
            console.log('Hi!');
        }
    }
}

let user1: Greetable;
user1 = new Person();
user1.greet('Hi there - I am');

 

Optional 하게 인자를 줄수 있습니다. javascript 및 typescript 에서는 ? keyword 를 사용해 선택적으로 구현 할 수 있습니다.

interface Named {
    readonly name?: string;
    outputName?: string;
}

 

name?: string 인경우 name 을 구현 하지 않아도 에러가 발생 하지 않습니다.

class Person implements Greetable{
    name?: string;
    age: number = 27;

    constructor(name?: string) {
        if (name) this.name = name;
    }
    ...
 }

this.name 에서도 마찬가지로 name?: string 으로 구현하고 파라미터로 받는 name 도 동일하게 name?: string 으로

인자로 name 의 값이 들어 왔을때 그 name 의 값을 this.name 에 할당합니다.

 

default parameter name: string = '' 과 동일합니다.