타입스크립트 - 타입이란?

❓Type 정의

• 타이핑(Typing) : 타입이 정의되지 않은 코드에 타입을 입혀주는 행위

🔁 JS to TS

How to : 초기에 JS를 TS로 변환하는 과정에서 Type은 큰 범주에서 작은 범주로 좁혀나가며 개발을 하는 것이 가장 이상적인 방향입니다.

따라서 any 라는 타입을 먼저 선언 후, 그 다음 detail한 type들을 좁혀나가는 것을 추천. 함수의 리턴값이 없다면 type을 void로 지정

---

Concept 1: void

만약 return할 값이 없는 function 이라면, Type정의는 void 이다.

function deleteTodo(index: number): void {
  todoItems.splice(index, 1);
}

Concept 2: 타입의 구체화

let todoItems: object[];

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

todoItems = fetchTodoItems();

fetchTodoItems() 메소드는 todos 를 return합니다. 이때 todos 는 배열 객체를 받습니다.
따라서 함수의 return Type을 정의할때, : object[] 로 선언할 수 있습니다.

하지만 Type선언을 아래와 같이 구체화 하며 리팩토링 할 수 있습니다.

let todoItems: { id: number; title: string; done: boolean }[];

// api
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;
}

todoItems = fetchTodoItems();

: object[] 대신, todos 에 실제로 들어가는 JSON 데이터의 객체 요소별 Type을 각각 명시합니다.

이때 여러개의 Type을 선언할 경우, ; 를 구분자로 여러개의 Type을 선언하여, 보다 구체적이고 명시적으로 TS를 꾸릴 수 있습니다.

Concept 3 : arrow function & filter

function showCompleted(): object[] {
  return todoItems.filter(item => item.done); //item이 done처리 된것만 반환한다.
}

TS 역시 ES6 문법을 통해 arrow function 표현법으로 원하는 데이터만 추출 할 수 있습니다.
item의 done 이 True에 해당하는 값만 배열을 돌며, 뽑아내는 역할을 filter 함수가 수행합니다.