타입스크립트 interface

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수,함수,클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 간단히 말해서 규격을 만드는것;

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

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

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

인터페이스를 사용하여 함수 파라미터의 타입을 선언할 수도 있다.

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: 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 } ]

함수 인터페이스 정의

// 함수 인터페이스의 정의
interface SquareFunc {
  (num: number): number;
  //파라미터도 넘버 리턴값도 넘버
}

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

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

클래스의 인터페이스

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

// Todo 클래스는 ITodo 인터페이스를 구현하여야 한다.
class Todo implements ITodo {
  constructor (
    public id: number,
    public content: string,
    public completed: boolean
  ) { }
}

const todo = new Todo(1, 'Typescript', false);

console.log(todo);

선택적 프로퍼티

인터페이스의 프로퍼티는 반드시 구현되어야 한다. 하지만 선택적으로 필요한 경우가 있을 수 있기 때문에 프로퍼티 명 뒤에 ?를 붙이면 생략하여도 에러가 발생하지 않는다

interface UserInfo {
  username: string;
  password: string;
  age?    : number;
  address?: string;
}

const userInfo: UserInfo = {
  username: 'ungmo2@gmail.com',
  password: '123456'
}

console.log(userInfo);

위 예제의 경우 age 와 adress 는 선택적 프로퍼티로 구현을 안해도 상관없다.