[TypeScript] 인터페이스

타입스크립트(Typescript)의 인터페이스

---

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

타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다

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

인터페이스

// 인터페이스를 적용하기 전
const student = { name: '김철수', age: 12 };

function logAge(obj: { age: number }) {
  console.log(obj.age); // 12
}
logAge(student); // 12

위 logAge() 함수에서 받는 인자의 형태는 age를 속성으로 갖는 객체이다.

인자를 받을 때 타입 뿐만 아니라 객체의 속성 타입까지 정의할 수 있다.

// 인터페이스를 적용한 후
interface studentAge {
	age: number;
}
function logAge(obj: studentAge) {
	console.log(obj.age);
}
const student = { name: '김철수', age: 12};
logAge(student);

logAge()의 인자가 좀 더 명시적으로 바뀌었다.

logAge()의 인자는 studentAge 라는 타입을 가져야 한다.

인터페이스에 정의된 속성, 타입의 조건만 만족한다면

객체의 속성 갯수가 많아도 상관 없으며, 인터페이스에 선언된 속성 순서를 지키지 않아도 된다.

옵션 속성

인터페이스를 사용할 때 인터페이스에 정의되어 씨는 속성을 모두 다 사용하지 않아도 된다.

이를 옵션 속성이라고 한다.

// 속성 끝에 ? 를 붙이면 "사용해도, 안해도" 된다.
interface 인터페이스_이름 {
  속성?: 타입;
}

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

let myBeer = {
  name: 'Saporo'
};
function brewBeer(beer: CraftBeer) {
  console.log(beer.name); // Saporo
}
brewBeer(myBeer);
// hop은 ? 로 옵션속성을 주었기 때문에, 인자로 넘긴 객체에는 hop 속성이 없어도 된다.

읽기 전용 속성

읽기 전용 속성은 인터페이스로 객체를 처음 생성할 때만 값을 할당하고, 이후에는 변경할 수 없는 속성이다.

문법은 readonly 를 속성 앞에 붙이면 된다.

interface CraftBeer {
  readonly brand: string;
}

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

// CraftBeer의 brand 속성은 readonly로 읽기 전용 속성인데
// Korean Carpenter로 변경하려고 하니, 에러가 발생한다.

읽기 전용 배열

배열을 선언할 때 ReadonlyArray<T> 타입을 사용하면 읽기 전용 배열을 생성할 수 있다.

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

배열을 ReadonlyArray로 선언하면 배열의 내용을 변경할 수 없습니다.

선언하는 시점에만 값을 정의할 수 있으며, 읽기 전용 속성과 비슷하다.

함수타입

인터페이스는 함수의 타입을 정의할 때에도 사용할 수 있다.

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

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

클래스 타입

C#이나 자바처럼 타입스크립트에서도 클래스가 일정 조건을 만족하도록 타입 규칙을 정할 수 있다.

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

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

// 타입이 배열인 경우 제네릭 사용하여 타입선언
const arr: Array<number> = [1,2,3];
const arr2: Array<string> = ['일','이','삼'];

인터페이스 확장

클래스와 마찬가지로 인터페이스도 인터페이스 간 확장이 가능하다.

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, Drinker {
  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();

 

참고 - 타입스크립트 핸드북