# 4. 할 일 관리 앱 - 완료/정렬 기능 구현

###### tags: `지호`, `Vue.js + TypeScript 완벽 가이드`

---

## 1. 완료 기능 구현

- Todo 아이템의 타입 정의 후, as를 이용하여 초기화

src/App.vue


<br/>

- PropType을 이용하여 제네릭에 Todo 아이템 타입을 가져옴

src/components/TodoListItem.vue


<br/>

src/components/TodoListItem.vue

- class 속성에 :를 추가하여 바인딩


- computed 속성에는 꼭 반환 타입 정의



src/App.vue

toggle에서 받아온 todoItem과 index를 이용하여 해당 dotoItem의 done 값 변경


<br/>

## 2. 정렬 기능 구현



sort함수 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort