shiwoo.dev: 타입스크립트 제네릭 객체 파라미터 패턴

2025년 9월 17일

타입스크립트 제네릭 객체 파라미터 패턴

JS에서 흔히 쓰이는 패턴, TS 제네릭에도 쓸만하지 않을까?

함수가 여러 개의 매개변수를 받아야 할 때, 각각을 나열하지 않고 객체 형태로 넘겨주는 패턴은 흔히 사용됩니다.

createUser("John", 20, "New York")
createUser({ name: "John", age: 20, city: "New York" })

사용하는 입장에서는 객체로 넘겨주는 것이 더 직관적이고 편리합니다. 어느 인자가 어떤 의미를 가지는지 명확하게 알 수 있기 때문입니다.

TS 제네릭에서도 같은 패턴을 사용해보면 좋겠다는 생각이 들었습니다.

const result = await tryCatch<string, FetchError>(
  fetchUser,
  (error) => new FetchError(error),
)

제네릭을 객체 파라미터 패턴으로 처리하면 어떨까요?

const result = await tryCatch<{ ResultT: string; ErrorT: FetchError }>(
  fetchUser,
  (error) => new FetchError(error),
)

무엇이 ResultT고 무엇이 ErrorT인지 명확하게 보입니다. 순서를 실수해 타입이 깨지는 귀찮음도 방지할 수 있습니다.