todolist를 typescript로 만들기

전에 한번 만들었던 todolist를 typescript로 만드는게 이번 과제다.

 

level 1, 2, 3, 4, 5 이런식으로 나눠져있으며 1은 기본

2는 reduxtoolkit 사용

3은 jsonserver사용하기 이런식인데 우선 1을하고 2, 3은 시간이 나면 진행할 예정

 

처음생각은 기존에 만들어논 todolist를 typescript로 바꿀생각이였는데, 오히려 더 어렵게 느껴져서 처음부터 다시 만들었다.

 

우선 기본적으로 

 

각각의 기능을 가진 컴포넌트들을 나눈다음 시작

 

전체적으로는 todolist를 javascript를 이용해 만든거와 크게 다르진 않았다. 다른거는 types에 todosType.ts 가있는데 

export type TodosType = {

  id: number;

  title: string;

  contents: string;

  isDone: boolean;

};

export type TodosProps = {

  todos: TodosType[];

  setTodos: React.Dispatch<React.SetStateAction<TodosType[]>>;

  listIsDone: boolean;

};

 

이런식으로 Type을 정해준것과 Props로 내릴것을 정리해두었다.

 

Todolist.tsx에선

 const deleteTodo = (id: number)

이런식으로 명시적으로 타입을 나타내는것 외엔 크게 다르게 한 부분은 없었고

javascript와 typescript의 가장 큰 차이로 느껴진건 자동완성인거같다.

 

예를 들면 

const onChangeTitleHandler = (e: React.ChangeEvent<HTMLInputElement>) => {

    setTitle(e.target.value);

  };

이런 코드를 만들었는데 javascript로 할땐 e : React.ChangEvent 이런부분을 대부분 구글링을 통해 직접찾아보면서했었는데

윈도우 기준 ctrl + i 를 누르면 여기 안에 뭐가 들어가야하는지 알려주는게 편했다

 

이번 프로젝트를 진행하면서 alert 창을 이쁘게 띄우고 싶었는데 

sweetalert2란것도 알게됐고, 

typescript 유틸리티 타입중 omit이란걸 사용해봤는데 상당히 유용하다고 느꼈다.

omit을 사용한 부분은 Form.tsx에서 

function Form({ todos, setTodos }: Omit<TodosProps, "listIsDone">)

이런식으로 사용했는데 

위의 todoType.ts 에서 TodosProps를 내려 받는데 listIsDone 값을 제외한 것만 받는 유틸리티 타입이다.

 

omit과 반대되는 타입으론 

pick이 있는데 

말그대로 반대로 사용하는거기때문에 만약 위의 코드에서 Omit이 Pick이였다면 listIsDone 값만을 가져오는 유틸리티타입이다.