❗ any type 피하기

🎯 여러 children의 타입 : JSX.Element[]

• 여러 children을 가져오는 TodoTemplate 컴포넌트에서 any를 사용했습니다. JSX.Element[] 타입을 이용해 any를 제거했습니다.

// TodoTemplate
// any 사용 ( X )
function TodoTemplate(props: any) {
  return <TodoTemplateBlock>{props.children}</TodoTemplateBlock>;
}

// JSX.Element[] 사용 ( O )
interface TodoTemplateProps {
  children: JSX.Element[];
}

const TodoTemplate: FC<TodoTemplateProps> = ({ children }) => {
  return <TodoTemplateBlock>{children}</TodoTemplateBlock>;
};

🎯 Date 객체 DateTimeFormatOptions의 타입: Intl.DateTimeFormatOptions

• Date 객체를 사용할 때 option인자의 타입으로 Intl.DateTimeFormatOptions를 사용할 수 있습니다.

export const TIME_FORM: Intl.DateTimeFormatOptions = {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
};

const [time, setTime] = useState(new Date().toLocaleTimeString('en-US', TIME_FORM));

❗ any type 쓴 경우

• Datepicker의 경우 moment 라이브러리를 설치하지 않고 구현하기 위해 부득이하게 any를 사용했습니다.

const handleDateChange = (_: any, dateStrings: [string, string]) => {
    const [start, end] = dateStrings;
    setStartDate(start);
    setDeadline(end);
  };