히치키치

typescript-todo : types.ts 작성하여 할 일과 CRUD 타입 지정 본문

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;
};
Comments