[TS] 인터페이스

인터페이스

인터페이스란?

일반적으로 타입체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스는 프로퍼티와 메소드를 가진 다는 점에서 클래스와 비슷하지만 직접 인스턴스 생성이 불가하고 모든 메소드는 추상메소드이다.

변수와 인터페이스

인터페이스는 변수의 타입으로 사용할 수 있다

//인터페이스 CommentList 선언
interface CommentList {
	id: number;
	comment: string;
	liked: boolean;
}

//변수 commentList의 타입으로 CommentList 인터페이스 선언
let commentList: CommnetList;

//인터페이스에서 선언된 프로퍼티 타입을 준수해야한다
commentList = {
	id: 1,
	comment: 'TypeScript',
	liked: false
}

함수와 인터페이스

인터페이스는 함수의 타입으로 사용할 수 있다. 함수의 인터페이스에는 타입이 선언된 파라미터 리스트와 리턴 타입을 정의한다.

interface GetName {
	(name: string): string;
}

const getName: GetName = (name: string) => {
	return `Hi, ${name}`;
}

✨ 인터페이스를 사용하여 함수 매개변수의 타입을 선언할 수 있다. 해당 함수에는 함수의 매개변수의 타입으로 지정한 인터페이스를 준수하여 전달하여야한다.

클래스와 인터페이스

클래스 선언문의 implements 뒤에 인터페이스를 선언하게 되면 해당 클래스는 반드시 선언된 인터페이스를 구현해야 한다.

//인터페이스 People 선언
interface People {
	id: number;
	name: string;
	age: number;
}

//인터페이스 People을 클래스 Person에 선언
class Person implements People {
	constructor (
		public id: number,
		public name: string,
		public age: number
	) {}
}

//클래스 Person을 이용하여 변수 선언
const person = new Person(1, 'Cindy', 20);

덕 타이핑(Duck Typing)

인터페이스를 구현하여도 타입 체크를 통과하는 유일한 방법은 아니다. 타입 체크에서 중요한 것은 값을 실제로 가지고 있는 것이다.

//sayGreet 메소드를 가진 IGreeting 인터페이스 선언
interface IGreeting {
	sayGreet(): void;
}

//인터페이스가 선언된 Hi 클래스
class Hi implements IGreeting {
	sayGreet() {
		console.log('hi');
	}
}

//인터페이스가 없는 Hello 클래스
class Hello {
	sayGreet() {
		console.log('hello');
	}
}

//greeting 함수의 매개변수 greet의 타입은
//인터페이스 IGreeting으로 지정되었기 때문에
//해당 인터페이스를 준수한 매개변수를 인자로 전달할 수 있다.
function greeting(greet: IGreeting): void {
//매개변수의 메소드 실행
	greet.sayGreet();
}

greeting(new Hi()); //'hi'
greeting(new Hello()); //'hello'

클래스 Hello에는 타입을 인터페이스로 지정하지 않았어도 해당 인터페이스가 타입으로 된 매개변수를 받아야하는 함수에 전달하여도 에러 없이 잘 처리된다.

→ 타입스크립트는 해당 인터페이스에서 정의한 프로퍼티나 메소드를 가지고 있다면 그 인터페이스를 구현한 것으로 인정한다. 이를 덕 타이핑(duck typing) 또는 구조적 타이핑(structural typing)이라 한다.

✨ 이는 변수에도 동일하게 적용한다

선택적 프로퍼티(Optional Property)

인터페이스가 타입으로 지정되면 인터페이스 내에 있는 프로퍼티는 반드시 구현되어야 하는데 선택적으로 필요한 경우는 ? 붙여서 표현한다.

interface UserInfo {
	userName: string;
	age?: number;
	address?: string;
}

const userInfo: UserInfo {
	userName: 'ddoni'
}

인터페이스 상속

인터페이스는 extends 키워드를 사용하여 인터페이스 또는 클래스를 상속받을 수 있다.

//Person 인터페이스 생성
interface Person {
	name: string;
	age?: number;
}

//Person 인터페이스를 상속받는 Developer 인터페이스 생성
interface Developer extends Person {
	type: "frontEnd" | "backEnd";
}

//Developer 인터페이스에 명시된 프로퍼티를 구현해야한다
const developer: Developer = {
	name: 'ddoni',
	type: "frontEnd"
}

✨ 여러개의 인터페이스를 상속받는 것도 가능하다!!