[TypeScript] 인터페이스 정의 및 활용법

유진·2023년 9월 8일

목록 보기

2/2

인터페이스

일반적으로 변수, 함수, 클래스에 타입 체크를 위해 사용된다.
직접 인스턴스를 생성할 수 없고 모든 메소드가 추상 메소드이다.
추상 클래스의 추상 메소드와 달리 abstract 키워드는 사용할 수 없다.
ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다.
인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다.
인터페이스 이름은 보통 대문자를 사용한다.
상호 간에 정의한 약속이나 규칙을 의미하고 다음과 같은 범주에 대해 계약을 정의한다.
1) 객체의 스팩(속성과 속성의 타입)
2) 함수의 파라미터
3) 함수의 스펙(파라미터, 반환 타입 등)
4) 배열과 객체를 접근하는 방식
5) 클래스

	interface personAge {
			readonly name: string;	// readonly
			age?: number;			// Optional Properties
		}

		function logAge(obj: personAge) {	//error
			console.log(obj.name);
		}

		let person = {name:'Capt'};	
		logAge(person);

Optional Properties

속성의 끝에 ?를 붙이면 속성 생략 가능, 인터페이스에 속하지 않는 프로퍼티의 사용을 방지하면서, 사용가능한 프로퍼티를 기술할 때 사용한다.

객체 안의 몇 개의 프로퍼티만 채워 함수에 전달하는 "option bags"같은 패턴에 유용하다.

readonly

처음 생성할 때만 값을 할당하고 이후에는 변경할 수 없는 속성

객체를 const로 지정하면 객체의 값은 변경이 가능하다. const 변수는 재할당만 막아주는 것이지 객체 속성을 바꾸는 것까지 관여하지 않는다.

readonly는 객체의 속성을 변경하지 못하게 막고 객체가 처음 생성될 때만 값 설정이 가능하고 이후 수정이 불가능하다.

단, 컴파일시 에러가 발생하는 것이지 변환된 자바스크립트 파일에서는 변경된다.

인터페이스 장점

1) extends로 복사 가능

 interface A extends B {
				key : type;
			}

type alias는 extends가 안되고 & 기호로 intersection할 수 있다 (interface도 intersection 가능)
extends 쓸 때 타입끼리 중복속성이 발견될 경우 에러가 발생하는데 &을 쓸 경우 에러가 안날 수도 있다.

2) 타입이름 중복선언

		interface Animal { 
			name :string 
		} 
		interface Animal { 
			legs :number 
		}

타입이름 중복선언을 허용해주며 중복시 extends 한것과 동일하게 작용한다.
-> type 선언을 자주 쓰는 외부 라이브러리 이용시 type 선언을 덮어쓰기, override하기 편함

interface types

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

함수

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

interface SearchFunc { 
	(source: string, subString: string): boolean 
}

// 변수로 직접 함수 값이 할당되었기 때문에 인수 타입 생략가능
// TypeScript의 문맥상 타이핑 (contextualtyping)이 인수 타입 추론

let mySearch: SearchFunc
mySearch = function (src, sub) { 
	let result = src.search(sub); 
	return result > -1;
}

클래스

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

interface Animal {
	makeSound(): void
}

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

interface 확장

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

interface Animal {
	makeSound(): void
}

interface Dog extends Animal {
	speed: number
}

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

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;