TypeScript-인터페이스 타입

인터페이스 타입(interfaxe types)

TypeScript에서 인터페이스는 함수, 클래스에서 사용할 수 있다.

1. 함수

• JavaScript 객체가 가질 수 있는 넓은 범위의 형태를 기술한다.
• 프로퍼티로 객체를 기술하는 것 외에도, 인터페이스는 함수 타입을 설명한다.

function type

• 함수의 인자의 타입과 반환 값의 타입을 정의한다.
• 함수의 타입을 정의할 때에도 사용한다.
• 타입스크립트 함수는 자바스크립트처럼 함수를 생성할 수 있지만, 매개변수의 타입과 반환 타입을 설정해야 한다.

아래의 코드는 number 타입의 매개변수와 string 값을 반환하는 getParam() 함수이다.

// 일반 함수
function getParam(val: number): string {
  return "매개변수의 값: " + val;
}

// 화살표 함수
let getParam = (val: number): string => {
  return "매개변수의 값: " + val;
}

(val: number)는 getParam() 함수의 매개변수를 나타낸다. 매개변수의 이름을 val로 설정하였고 타입은 number로 정의한다. 소괄호 뒤의 : string는 getParam() 함수의 반환 타입을 나타낸다.

타입스크립트는 함수의 반환 타입을 자동으로 추론하기 때문에 아래와 같이 함수의 반환 타입을 생략할 수 있다.

// 일반 함수
function getParam(val: number) {
  return "매개변수의 값: " + val;
}

// 화살표 함수
let getParam = (val: number) => {
  return "매개변수의 값: " + val;
}

만약, 함수가 값을 반환하지 않으면 반환 타입을 void로 정의한다.

function pringVal(val: number): void {
  console.log("매개변수의 값: " + val);
}

타입스크립트에서 함수의 반환 타입을 생략할 수 있으므로 void 타입도 생략 가능하다.

function pringVal(val: number) {
  console.log("매개변수의 값: " + val);
}

2. 클래스

• 클래스가 특정 통신 프로토콜을 충족하도록 명시적으로 강제한다.
• C#과 Java와 같은 언어에서 일반적으로 인터페이스를 사용하는 방법과 동일하다.

class type

• 클래스가 특정 계약(contract)을 충족하도록 명시적으로 강제한다.
• class 인스턴스 생성을 목적으로 한다. 모든 멤버 변수는 초기값을 가져야 한다.

interface Animal {
	makeSound(): void
}

class Dog implements Animal {
	makeSound(): void {
    	console.log("멍멍");
    }
}

3. interface 확장

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

interface Animal {
	makeSound(): void
}

interface Dog extends Animal {
	speed: number
}

class Bulldog implements Dog {
	makeSound(): void {
    	console.log("멍멍");
    }
}

4. 하이브리드 타입(hybrid type)

• 자바스크립트의 유연하고 동적인 타입 특성에 따라 인터페이스 역시 여러 가지 타입을 조합할 수 있다.
• 아래 코드와 같이, 함수 타입이면서 객체 타입을 정의할 수 있는 인터페이스도 구현할 수 있다.

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;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

위의 코드를 보면 Counter라는 인터페이스는 getCounter함수의 타입을 선언함과 동시에 counter변수 안에 타입을 선언한 것을 알 수 있다.