Skip to content

Qvil Blog

Github

[Typescript] Typescript conditional interface in react component

— Typescript, React — 1 min read

컴포넌트에 특정 prop이 있으면 나머지 prop은 optional 처리하는 interface

id만 있는 경우(id로 데이터 페칭하는 경우)

1<Component id={id} />

content가 있는 경우 description은 required

1<Component content={content} description={description} />

모두 optional 처리하지 않고 id 혹은 content, description이 required가 되는 컴포넌트 interface를 만들기

해결

1interface CommonProps {
2  index: number;
3}
4
5interface PropsWithId {
6  id: string;
7  content?: never;
8  description?: never;
9}
10
11interface PropsWithContent {
12  id?: never;
13  content: string;
14  description: string;
15}
16
17type ConditionalProps = PropsWithId | PropsWithContent;
18type Props = CommonProps & ConditionalProps;
19
20const Component = ({ index, id, content, description }: Props) => (
21  <div>
22    <h1>I'm Component {index}</h1>
23    {id && <p>id: {id}</p>}
24    {content && <p>content: {content}</p>}
25    {description && <p>description: {description}</p>}
26  </div>
27);
28
29export default function App() {
30  return (
31    <div className="App">
32      <Component index={1} id="1" />
33      <Component index={2} content="content" description="description" />
34      <Component index={3} />
35    </div>
36  );
37}

참고