TypeScript 06 인터페이스

인터페이스

타입체크를 위해 사용되며 변수, 함수, 클래스에 사용 가능하다.

여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입 정의해야 한다.

프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하지만 인스턴스를 생성할 수 없다.

(모든 메소드는 '추상메소드')

또한, 추상클래스의 추상 메소드와는 달리 abstract 가 안붙는다!

 

○ 인터페이스 VS 추상 클래스 VS 타입 정의

interface Test{
	name : string;
    id : number;
    introduce() : void();
};

abstract class Test2{
	name : string;
    id : number;
    abstract introduce() : void();
};

type Test2{
	name : string;
    id : number;
    introduce() : void();
};

-> 이 세가지의 차이는?

★ 가장 큰차이는 "상속"

interface : 상속이 가능하며 다중상속도 가능하다

abstract class : 클래스이기 때문에 상속은 가능하나, 다중 상속은 불가능하다.

type :  상속이 불가능하다.

* 다중상속 : 여러개를 상속할 수 있다.

★ 함수구현

interface, type : 내부 메서드에서 구현을 할 수 없다.

abstract : 원하는 메서드는 구현을 할 수 있다.

 

인터페이스의 사용이유

협업하여 개발 시 공통적으로 사용되는 부분에 대하여 미리 정의를 하기 때문에 협업 개발에 있어  서로간의 약속이 될 수 있다. (데이터베이스 조작)

 

정의가능한 것

객체의 스펙(속성과 속성의 타입)

함수의 파라미터

함수의 스펙(파라미터, 반환 타입 등)

배열과 객체에 접근하는 방식

클래스

 

인터페이스 특징

javascript가 지원하지 않는 typeScript만의 특징

Interface는 타입이며, 고로 interface는 선언만 존재

->자바스크립트로 변환되면서 인터페이스는 사라짐.

interface간에 exteneds를 사용하여 다중 상속 가능(class와 비슷)

 

interface Person {
  job: string
}

function sayMyJob(obj: Person) {
  console.log(obj.job)
}

// developer 변수에 interface Person 타입이 선언이 되어있습니다.
// 오류가 발생하지 않게, developer 변수에 프로퍼티값을 선언해주세요
const developer: Person = {
    job:"개발자"
}

sayMyJob(developer) // 개발자

*인터페이스 사용 예시*

 인터페이스 사용 예시를 살펴보세요.

interface Person {
    name: string
}

• 변수

  let elice: Person = {name: "rabbit"};
  

• 함수

  function greeting(person: Person): void {
      console.log(`Hello ${person.name}`);
  }
  

• 클래스

  class Member implements Person {
      constructor (
          public name: string
      ) { }
  }
  

• 배열의 경우 아래와 같이 인터페이스를 이용가능

  interface Person {
      [index: number]: string;
  }
  let people: Person = ["rabbit", "cheshire", "queen"];
  

Properties

타입스크립트의 컴파일러는 객체 프로퍼티의 두 가지 요소를 검사하는데 바로 프로퍼티의 타입과 필수 요소 유무입니다.

아래 예약어로 프로퍼티 컨트롤 가능

- ?(Optional Properties)

- readonly(Readonly properties)

특징 : 객체가 생성될 때만 값 설정이 가능하고, 수정이 불가능하며 프로퍼티 앞에 readonly를 붙여 사용

객체 안의 몇 개의 프로퍼티만 채워서 사용하는 함수에 유용합니다. (이를 "option bags" 패턴이라고 부릅니다.)

interface SquareConfig {
  color?: string
  width?: number
}

또한 객체가 처음 생성될 때 값 설정이 가능하고, 이후 수정이 불가능하도록 설정하는 readonly 프로퍼티도 있습니다. 앞서 클래스 속성의 readonly와 동일합니다. 마찬가지로 역할도 const와 유사하며, 사용되는 위치가 다릅니다.

interface Point {
  readonly x: number
  readonly y: number
}

readonly vs const

생성 후에 배열을 변경하지 않음을 보장한다.

변수는 const를 사용하고 프로퍼티는 readonly를 사용한다.

let arr:number=[1,2,3,4];

let readonly_arr:ReadonlyArray<number>=arr;

readonly_arr[0]=12;	//오류
readonly_arr.push(5);	//오류
readonly_arr.length=100;	//오류

interface types

앞서 살펴보았듯이 타입스크립트에서 인터페이스는 함수와 클래스에서 사용이 가능합니다.

• 함수: 인터페이스를 이용해 함수의 타입, 인자의 타입, 반환 값의 타입을 정의할 수 있습니다. 위에서 보았던 예시는 인자의 타입을 Person으로 정의하고 있습니다.

  function greeting(person: Person): void {
      ...
  }
  

• 클래스 : 클래스가 특정 계약(통신 프로토콜)을 충족하도록 명시적으로 강제합니다. 선언한 인터페이스를 클래스 뒤에 implements하여 사용하며, 클래스는 인터페이스에 명시된 메소드를 반드시 구현해야 합니다. 위에서 보았던 예시는 Member 클래스가 Person 인터페이스를 implements하고 있는 것이며, 만약 Person 인터페이스에 추상 메소드가 있었다면 Member 클래스에서 구현해야 합니다.

  class Member implements Person {
      ...
  }
  

• 인터페이스 확장 : 클래스와 마찬가지로 인터페이스도 인터페이스 간의 확장이 가능합니다. 확장을 위해서는 extends 키워드를 사용합니다. Dog 인터페이스에서 Animal 인터페이스를 확장하고 있습니다.

  interface Animal {
      makeSound(): void
  }
  interface Dog extends Animal {
      speed: number
  }
  

• 하이브리드 타입 : 자바스크립트의 유연하고 동적인 타입 특성에 따라 인터페이스에서 여러 가지 타입을 조합해서 사용할 수 있습니다. 예를 들어 함수 타입이면서 동시에 객체 타입을 정의할 수 있는 인터페이스를 만들 수 있습니다. 아래는 Counter 인터페이스는 함수로서 호출도 가능하고, 여러 프로퍼티도 가지고 있습니다.
  getCounter() 함수에 나오는 as는 타입 단언을 위한 문법으로, 말 그대로 타입을 컴파일러가 추론하지 않도록 프로그래머가 직접 지정하는 것입니다.

  interface Counter {
      (start: number): string;
      interval: number;
      reset(): void;
  }
  function getCounter(): Counter {
      let counter = function (start: number) {} as Counter;
      counter.interval = 123;
      counter.reset = function () {};
      return counter;
  }
  

• interface Counter {
      (start: number): string;
      interval: number;
      reset(): void;
  }
  function getCounter(): Counter {
      let counter = function (start: number) {} as Counter;
      counter.interval = 123;
      counter.reset = function () {};
      return counter;
  }
  

아래의 예시는 interface를 사용해서 프로퍼티와 메소드를 정의한 것

extends는  interface를 상속하여 만들게 ^_^

class의 경우 상속이 한개밖에 안되기 때문에, implements통해서 이 클래스가 interface 를 쓸때 가능!

interface shapeInterface {
    getArea(): number;
}

interface triangleInterface extends shapeInterface {
    width: number;
    height: number;
}

interface circleInterface extends shapeInterface {
    
    radius: number;
}

class triangle implements triangleInterface {
    width:number;
    height:number;
    
    constructor(a:number, b:number){
        this.width=a;
        this.height=b;
    }
    getArea():number {
        return this.width*this.height / 2;
    };
       
    
}

class circle implements circleInterface {
    
    radius: number;
    
    constructor(a:number){
        this.radius=a;
    }
    
    getArea():number{
        return this.radius * this.radius * Math.PI;
    }
}

const tri = new triangle(10, 5);
const cir = new circle(4);

console.log(tri.getArea());
console.log(cir.getArea());