[TIL039] 타입 스크립트 2

20240625 39일차

type과 interface

function InputForm({
  handleSubmitTodo,
  title,
  setTitle,
}: {
  handleSubmitTodo: (e: React.FormEvent<HTMLFormElement>) => void;
  title: string;
  setTitle: (e: React.FormEvent<HTMLFormElement>) => void;
})

위처럼 여러개의 프롭스를 받아와야할 때 타입을 다 명시해야하기 때문에 보기도 힘들고 코드가 지저분해진다.
이 때, type이나 interface를 사용하면 좀 더 깔끔하게 작성이 가능하다.

type 사용 시

type InputFormProps = {
  handleSubmitTodo: (e: React.FormEvent<HTMLFormElement>) => void;
  title: string;
  setTitle: (e: React.FormEvent<HTMLFormElement>) => void;
};
ㅤ
function InputForm({ handleSubmitTodo, title, setTitle }: InputFormProps) {

interface 사용 시

interface InputFormProps {
  handleSubmitTodo: (e: React.FormEvent<HTMLFormElement>) => void;
  title: string;
  setTitle: (e: React.FormEvent<HTMLFormElement>) => void;
}
ㅤ
function InputForm({ handleSubmitTodo, title, setTitle }: InputFormProps) {

위처럼 더 간결하게 적을 수 있다.

interface는 객체 형태로만 작성이 가능하고,
type은 더 유연하게 작성이 가능하다.

그래서 interface는 주로 객체를 정의할 때 작성,
type은 이외에 더 유연하게 정의할 때 작성한다.