typescript-todo
typescript-todo : types.ts 작성하여 할 일과 CRUD 타입 지정
히치키치
2022. 8. 11. 19:40
💙 할 일과 할 일 들 타입 지정
1. task
( = 할 일 1개 ) 구조 잡기 : 고유값, 할 일 내용, 완료 여부의 속성으로 구성된 하나의 객체
export type Task = {
id: string;
label: string;
isComplete: boolean;
};
2. tasks
( = 할 일 여러개) 구조 잡기 : 1에서 설정한 객체인 task가 여러개로 담아져 있는 list
💙 ListScreen과 FocusScreen에 필요한 함수/변수 타입 지정
1. tasks
( = 할 일 여러개)
: task가 리스트로 있음
2. setTasks
: useState의 set 함수 & tasks 값 설정
3. addTask
: task의 label 값을 인자로 받아 새로운 task를 생성하고 이를 tasks까지 반영하는 함수
4. updateTaskCompletion
: task의 고유값 id와 완료여부 isComplete를 인자로 받아 해당 task 상태 update된 것을 tasks에 반영하는 함수
5. focusedTask
: 필수 값 아님 (task 자체 없음 OR task를 모두 다함 OR 미완료인 task에 대해 다 skip함)
: focusScreen에 띄울 미완료된 task 한 개
6. shuffleFocusedTask
: 미완료된 tasks에 대해 랜덤으로 순서 재배치하고 재배치된 리스트의 첫번째 task의 id를 focuseScreen에 띄울 할 일로 설정하는 함수
export type TaskProps = {
addTask: (task: Pick<Task, 'label'>) => void;
focusedTask?: Task;
tasks: Task[];
shuffleFocusedTask: () => void;
setTasks: React.Dispatch<React.SetStateAction<Task[]>>;
updateTaskCompletion: (taskId: string, isComplete: boolean) => void;
};