[ TypeScript ] 타입스크립트의 인터페이스란 ?

타입스크립트의 인터페이스에 대해 알아봅시다~!

---

타입스크립트 인터페이스

• 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용된다.
• 인터페이스는 변수, 함수, 클래스에 사용할 수 있다.
• 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다.
• TypeScript의 예약어인 interface를 사용하여 TypeScript 인터페이스를 생성할 수 있다.

변수와 인터페이스

// 인터페이스 정의
interface User {
	name: string;
	age: number;
}

// 변수 user의 타입으로 User 인터페이스를 선언하였다.
// 변수 user는 User 인터페이스를 준수하여야 한다.
let user : User;

// 정상적으로 선언됩니다.
user: User = {
	name: "anna",
	age: 20
}

// 정의된 프로퍼티보다 적게 작성했기 때문에 에러가 납니다.
user: User = {
	name: "anna"
}

// 정의된 프로퍼티보다 많이 작성했기 때문에 에러가 납니다.
user: User = {
	name: "anna",
	age: 20,
	job: "developer"
}

인터페이스를 사용하여 변수를 선언할 때는 반드시 정의된 프로퍼티를 전부 작성해야 한다.

그 외 프로퍼티를 추가로 작성하고자 해도 인터페이스 내에 정의되어 있지 않기 때문에 푸가로 프로퍼티를 작성하여 선언 불가하다.

선택적 프로퍼티

• 선택적 프로퍼티는 프로퍼티명 뒤에 ?를 붙이며 생략하여도 에러가 발생하지 않는다.

interface User {
	name: string;
	age?: number;
}

// 정상적으로 선언됩니다.
const user: User = {
	name: "anna"
}

 

함수와 인터페이스

• 객체의 프로퍼티 이름과 타입을 정의하고, 함수의 매개변수 타입과 반환 타입도 정의할 수 있다.

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

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

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

클래스와 인터페이스

• 클래스 선언문의 implements 뒤에 인터페이스를 선언하면 해당 클래스는 지정된 인터페이스를 반드시 구현하여야 한다.
• 인터페이스에 정의된 함수나 메서드의 매개변수 타입, 반환 값과 일치하도록 구현해야하므로,클래스 내부에서 해당 메서드의 매개변수 타입을 다시 한번 더 명시해주지 않으면 컴파일 에러가 발생하게 된다.

// 인터페이스의 정의
interface Calculator {
	add(x: number, y: number): number;
	substract(x: number, y: number): number;
}

class SimpleCalculator implements Calculator {
	add(x: number, y:number) {
		return x + y;
	}

	substract(x: number, y: number) {
		return x - y;
	}
}

const caculator = new SimpleCalculator();

console.log(caculator.add(4, 9)); //13
console.log(caculator.substract(10, 5)); //5

---

실습 정리

JavaScript 코드를 TypeScript로 포팅하기

JavaScript 코드

// Todo 인터페이스를 작성합니다.

// Todo 인터페이스를 타입으로 받는 todos를 완성합니다.
let todos = [];

// Todo 인터페이스를 타입으로 받는 addTodo를 완성합니다.
function addTodo(todo) {
  todos = [...todos, todo];
}

// Todo 인터페이스를 타입으로 받는 newTodo를 완성합니다.
const newTodo = {
  id: 1,
  content: 'learn typescript',
  isDone: false,
};

addTodo(newTodo);

console.log(todos);

TypeScript 코드로 포팅

interface Todo {
  id: number;
  content: string;
  isDone: boolean;
}

let todos: Todo[] = [];

function addTodo(todo: Todo) {
  todos = [...todos, todo];
}

const newTodo: Todo = {
  id: 1,
  content: 'learn typescript',
  isDone: false,
};

addTodo(newTodo);

console.log(todos);

코드 작성 후 TypeScript를 JavaScript로 컴파일 한 후 코드 결과를 확인한다.

1.  tsc src/index.ts

2.  node src/index.js

[ { id: 1, content: 'learn typescript', isDone: false } ]