React Typescript Interface Tuple Generic

💡 공식 문서에서 Tuple 타입은 Interface가 아닌 Type으로 선언하여 사용을 추천하지만 Interface로 사용하는 방법에 대한 궁금점을 해소하기 위해 작성한다.

* Tuple 타입은 Type으로 선언하여 사용하길 바랍니다.

Tuple을 Interface가 아닌 Type으로 선언해 사용하는 이유

인터페이스(Interface)는 객체 타입을 정의 혹은 상속, 확장하여 사용할 수 있어 사용을 추천하지만 타입(Type)처럼 원시 타입 및 튜플 타입을 정의할 수 없습니다. 하지만 아래의 사용법과 같은 방법으로 사용은 할 수 있습니다.

Documentation - Advanced Types

사용법

해당 Hook 사용 시 스프레드 연산자로 사용하기 위해 Array 타입을 확장하였으며 Generic Type 사용 시 <T,>로 사용하는 것은 Arrow Function이 아닌 기존 Function 형식으로 작성 시 <T>로 작성 할 수 있다.

import React, {useState} from "react";

interface ReturnType<T> extends Array<T | ((e: React.ChangeEvent<HTMLInputElement>) => void)> {
  0: T;
  1: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const useInputs = <T,>(initial: T): ReturnType<T> => {
  const [inputs, setInputs] = useState<T>(initial);
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setInputs({ ...inputs, [name]: value });
  }

  return [inputs, onChange];
};

export default useInputs;

import useInputs from "./hook/useInputs.tsx";

interface StateType {
  username: string,
  email: string
}

const Inputs = () => {
  const initState: StateType = {username: "", email: ""};
  const [inputs, onChange] = useInputs(initState);
  const {username, email} = inputs;

  return (
    <div>
      <input type="text" name={"username"} value={username} onChange={onChange}/>
      <input type="text" name={"email"} value={email} onChange={onChange}/>
    </div>
  );
};

export default Inputs;

<T,> 왜 Arrow function Generic Type은 콤마 씀?

콤마를 사용하지 않으면 에러가 발생하는 이유는 TypeScript의 문법과 parser의 동작 방식 때문입니다.

콤마가 없으면, parser는 제네릭 타입 매개변수가 아닌 다른 문법으로 해석하려고 시도하고, 이로 인해 문법 오류가 발생할 수 있습니다.

이는 특히 JSX 또는 TSX 파일에서 제네릭을 사용할 때 발생하는 문제입니다. 콤마를 붙이는 것은 파서에게 이것이 제네릭 타입 매개변수임을 명확히 하는 방법입니다.