투두리스트 타입스크립트 위주 피드백과 깔끔한 코드를 위해 수정하기

1. 인터페이스를 작성할 때는 앞에 I를 빼자.

interface 정의 시 I-prefix를 권장하지 않는 이유를 읽어보니 헝가리안 표기법을 사용하는 이점이 더 이상 없으며 이름으로부터 타입을 유추 가능해지기 때문에 캡슐화의 원칙에 위배된다는 이유 등으로 더 이상 사용하지 않는다고 한다.

2. props type 을 지정해줄 때는 해당 컴포넌트에 써주자.

1번과 2번을 고려하여 App.tsx 에 적어주었던 인터페이스의 위치를 옮기고 재네이밍 해주었다.

• 이전 코드

export interface IDateProps {
  year: string;
  month: string;
  day: string;
  yoil: string;
}

• 변경 후 코드 : TodoHeader.tsx 로 위치 변경

export interface TodoHeaderProps {
  year: string;
  month: string;
  day: string;
  yoil: string;
}

+ 공통적으로 사용하는 type, interface 라면 별도의 파일을 생성해서 관리하는 것이 좋다.

3. 객체 래퍼 타입 지양하기

래퍼 객체 타입을 지양해야하는 이유 를 참고했다.

• 변경 전

const [year, month, day, yoil]: Array<string> = moment().format("YYYY-MM-DD-dddd").split("-");
const [isOpenAdd, setIsOpenAdd] = useState<Boolean>(false);

• 변경 후

const [year, month, day, yoil]: string[] = moment().format("YYYY-MM-DD-dddd").split("-");
const [isOpenAdd, setIsOpenAdd] = useState<boolean>(false);

4. 불필요한 타입은 제거해서 사용하자. (똑똑한 타입스크립트의 타입추론을 잘 활용하기)

타입스크립트가 생각보다 타입을 잘 추론해준다는 것은 알고 있었는데 그래도 다 써주는게 좋지 않을까? 해서 써줄 수 있는 타입들은 전부 써주었다ㅎㅎ
하지만 가독성 등의 이유로 타입스크립트 자체에서 추론이 가능한 것들은 제거하는 게 좋다고 한다.

1) 컴포넌트에 React.FC / JSX.Element 는 적지 않아도 된다.

똑똑한 타입스크립트가 return 을 보고 알아서 잘 추론해주는 중

2) boolean 도 초기 값을 부울 타입으로 설정해줬다면 적지 않아도 된다.

3) return 값이 없는 함수도 void 를 적지 않아도 된다.

4) React.MouseEventHandler 를 굳이 안적어줘도 된다.

자바스크립트에서 쓰던 코드랑 똑같아졌다.

좀 더 깔끔한 코드가 되지 않았을가....!?