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
함수가 수행합니다.