TIL 24.11.06 className, style 등 기본 props type 지정

typescirpt 를 할 때, 기본적으로 props 를 받아오게 되는데 그 밖에도 className 이나 style 과 같은 기본 props 를 주고 싶은 경우가 있다.

 

예를들어, 나는 공통컴포넌트를 만드느라고 다음과 같이 DialogHeader 를 만들었다. 

const DialogHeader = ({ children, ...props }: DialogProps) => (
  <div className={styles.dialogHeader} {...props}>
    {children}
  </div>
);

 

다음과 같이 스타일을 지정할 때, type error 가 나는 경우가 있다. 그렇다면 style, className 기타 등등 모든 요소를 하나하나 type에 담을수가 없는데 어떤식으로 타입을 줘야하는걸까 

          <DialogHeader style={{
            background: "red"
          }}>
            <DialogTitle>Heading Text</DialogTitle>
            <DialogDescription>This is a Dialog description.</DialogDescription>
          </DialogHeader>

 

 

다음과 같이 작성하면 div 요소에서 사용할 수 있는 모든 요소를 지원하는데, 따라서 해당 컴포넌트가 className, style, onClick 등의 기본 HTML 속성을 모두 지원하여 타입 에러를 방지한다. div 요소가 아니라면 이름만 바꿔줘서 extends 하면 될 것이다. 

interface DialogProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
}