Typescript - 중복된 코드 제거 및 인터페이스

중복된 코드

function fetchTodoItems(): { id: number; title: string; done: boolean }[] {
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}

...

function addTodo(todo: { id: number; title: string; done: boolean }): void {
  todoItems.push(todo);
}

두개의 함수에서 중복된 코드가 있다.
첫 번째 함수에서 반환하는 값의 타입과
두 번째 함수에서 파라미터에 정의된 타입이 범인이다.
현재 코드가 간단해서 적어낼 수 는 있지만은
개발자는 항상 코드를 줄이는 생각을 가져야한다.

타입스크립트에서는 중복된 코드를 제거하는 방법이 있다.

타입에 이름을 부여

자주 사용되는 타입을 변수처럼 타입의 이름을 지정하는 것이다.

type Todo = {
  id: number;
  title: string;
  done: boolean;
}

let todoItems: Todo[];

인터페이스

타입 이름을 지정하는것과 비슷하다.
재사용이 가능하다.

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

변수

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

// 변수에 인터페이스 활용
let seho: User = {
    age: 33,
    name: '세호'
}

함수

함수 파라미터에 미리 지정 해놓은 인터페이스를 활용 가능하며,
함수 자체(구조)를 미리 지정해서 사용도 가능하다.
이는 협업할때에 유용하다.

// 함수에 인터페이스 활용
function getUser(user: User) {
    console.log(user);
}
const capt = {
    name: '캡틴',
    age: 100
}
getUser(capt);

// 함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction {
    (a: number, b: number): number;
}

let sum: SumFunction;
sum = function (a: number, b: number): number {
    return a + b;
}

인덱싱