TS - Interface

1. Introduction

• Interface는 일반적으로 타입 체크를 위해 사용되며 변수, 함수 클래스에 사용할 수 있다.
• Interface는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다.
• Interface에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다.
• ES6는 인터페이스를 지원하지 않지만 타입스크립트는 인터페이스를 지원한다.

2. 변수와 인터페이스

• Interface는 변수의 타입으로 사용할 수 있다. 이 때 Interface를 타입으로 선언한 변수는 해당 인터페이스를 준수하여야 한다. 이것은 새로운 타입을 정의하는 것과 유사하다.

// 인터페이스 정의
interface Todo {
	id: number;
    content: string;
    empleted: boolean;
}

// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;

// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1, content: 'typescript', completed: false };

• Interface를 사용하여 함수 파라미터의 타입을 선언할 수 있다. 이 때 해당 함수에는 함수 파라미터의 타입으로 지정한 인터페이스를 준수하는 인수를 전달하여야 한다. 함수에 객체를 전달할 때 복잡한 매개변수 체크가 필요없어서 매우 유용하다.

// 인터페이스 정의
interface Todo {
	id: number;
    content: string;
    empleted: boolean;
}

let todos: Todo[] = [];

// 파라미터 todo의 타입으로 Todo 인터페이스를 선언하였다.
function addTodo(todo: Todo) {
	todos = [...todos, todo];
}

// 파라미터 todo는 Todo 인터페이스를 준수하여야 한다.
const newTodo: Todo = { id: 1, content: 'typescript', completed: false };
addTodo(newTodo);
console.log(todos); // -> [{ id: 1, content: 'typescript', completed: false }]

3. 함수와 인터페이스

• Interface는 함수의 타입으로 사용할 수 있다. 이 때 함수의 Interface에는 타입이 선언된 파라미터 리스트와 리턴 타입을 정의한다. 함수 Interface를 구현하는 함수는 Interface를 준수하여야 한다.

// 함수 인터페이스 정의
interface SquareFunc {
	(num: number): number;
}

// 함수 인터페이스를 구현하는 함수는 인터페이스를 준수하여야 한다.
const squareFuce: SquareFunc = function (num: number) {
	return num * num;
}

console.log(squareFunc(10)); // -> 100

참고 - https://poiemaweb.com/typescript-interface#:~:text=%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%8A%94%20%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9C%BC%EB%A1%9C%20%ED%83%80%EC%9E%85,%EC%9C%A0%EC%A7%80%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8F%84%EB%A1%9D%20%ED%95%98%EB%8A%94%20%EA%B2%83%EC%9D%B4%EB%8B%A4.