인터페이스

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미

• 객체의 스펙(속성과 속성의타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

사용방법

interface 인터페이스_이름 {
  속성?: 타입;
}

undefined의 경우도 예상되면 옵셔널체이닝으로 속성에 ? 붙여서 사용 할 수도 있음

interface CraftBeer {
  name: string;
  hop?: number;  
}

let myBeer = {
  name: 'Saporo'
};
function brewBeer(beer: CraftBeer) {
  console.log(beer.name); // Saporo
}
brewBeer(myBeer);

파라미터 값으로 namer 과 hop 를 받아야하는데 hop 값이 undefined 일수도 있다는 것을 명시하기 위해 옵셔널체이닝?을 붙여서 사용

그 결과로 brewBeer 의 인자로 name만 넘겨도 에러가 나지 않는다.

 

읽기전용 속성

interface CraftBeer {
  readonly brand: string;
}

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!

myBeer 의 값이 readonly 로써 읽기전용으로 타입정의가 되었을 때,

myBeer.brand 에 다른 값을 할당하려고하면 에러가 발생한다.

 

마찬가지로 배열도 ReadonlyArray<T> 로 읽기전용 배열을 만들 수 있다.

let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error

읽기전용으로 선언 된 ReadonlyArray<T> 로 선언하면 배열의 내용을 변경 할 수 없다.

객체 선언과 관련된 타입 체킹

interface CraftBeer {
  brand?: string;
}

function brewBeer(beer: CraftBeer) {
  // ..
}
brewBeer({ brandon: 'what' }); //error

선언 된 타입은 brand 인데 brandon 을 넘겨버리면서 타입에러를 띄움

let myBeer = { brandon: 'what' }';
brewBeer(myBeer as CraftBeer);

as로 이런 타입을 무시할수있다.

 

만약 인터페이스 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 아래와 같은 방법도 있음.

interface CraftBeer {
  brand?: string;
  [propName: string]: any;
}

함수 타입

interface login {
  (username: string, password: string): boolean;
}


let loginUser: login;
loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}


const user:login = (id: string, pw: string) => {
  console.log('로그인 했습니다');
  return true;
}

클래스 타입

implements 타입으로 클래스형에도 타입을 정해줄 수 있다.

interface CraftBeer {
  beerName: string;
  nameBeer(beer: string): void;
}

class myBeer implements CraftBeer {
  beerName: string = 'Baby Guinness';
  nameBeer(b: string) {
    this.beerName = b;
  }
  constructor() {}
}

인터페이스 확장

interface Person {
  name: string;
}
interface Developer extends Person {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';


interface Person {
  name: string;
}
interface Drinker {
  drink: string;
}
interface Developer extends Person {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';
fe.drink = 'Beer';

확장으로써 기존 타입에 추가로 무언가 정해줄때 사용한다. (상속)

 

하이브리드 타입

자바스크립트의 유연하고 동적인 타입 특성에 따라 인터페이스 역시 여러 가지 타입을 조합하여 만들 수 있습니다. 예를 들어, 다음과 같이 함수 타입이면서 객체 타입을 정의할 수 있는 인터페이스가 있습니다.

interface CraftBeer {
  (beer: string): string;
  brand: string;
  brew(): void;
}

function myBeer(): CraftBeer {
  let my = (function(beer: string) {}) as CraftBeer;
  my.brand = 'Beer Kitchen';
  my.brew = function() {};
  return my;
}

let brewedBeer = myBeer();
brewedBeer('My First Beer');
brewedBeer.brand = 'Pangyo Craft';
brewedBeer.brew();