TypeScript를 사용하여 Nextjs의 구성 요소 소품에 대해 특정 문자열 값만 허용하는 방법은 무엇입니까?

Originally posted here!

Typescript와 함께 Nextjs를 사용할 때 prop에 대해 특정 문자열 값만 허용하려면 TypeScript에서 string literal union type를 사용할 수 있습니다.

TL;DR

/* Square.tsx file */

// String literal Union Type
// for colors `blue`, `red`, or `green`
type Colors = "blue" | "red" | "green";

// and setting the type Colors to prop color
const Square = (props: { color: Colors }) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

예를 들어 브라우저에서 정사각형 모양을 렌더링하는 Square라는 구성 요소가 있고 사용자가 정사각형 모양의 색상을 설정할 수 있어야 한다고 가정해 보겠습니다. 그러나 사용자가 blue , red 또는 green 와 같은 세 가지 색상만 설정하는 것을 원하지 않습니다. 여기서는 TypeScript에서 string literal union type를 사용합니다.

그래서 먼저 Square라는 컴포넌트를 이렇게 만들어 봅시다.

/* Square.tsx file */

const Square = () => {
  return (
    <div>
      <div className="square">I'm a Square Shape</div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

그래서 우리는 Square 컴포넌트를 만들었습니다.

이제 우리는 사용자로부터 색상을 가져오기 위해 prop이 필요하므로 prop의 이름도 color로 지정하고 prop의 값을 background-color 속성의 값으로 다음과 같이 설정합니다.

/* Square.tsx file */

const Square = (props) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

이제 사용자가 색상blue , red 또는 green 만 설정하도록 제한해야 합니다. 이제 이 색상에 대해 다음과 같이 string literal union type를 만들 수 있습니다.

/* Square.tsx file */

// String literal Union Type
// for colors `blue`, `red`, or `green`
type Colors = "blue" | "red" | "green";

const Square = (props) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

Colors 라는 유형을 정의했으며 이제 이 유형을 다음과 같이 color 소품으로 설정할 수 있습니다.

/* Square.tsx file */

// String literal Union Type
// for colors `blue`, `red`, or `green`
type Colors = "blue" | "red" | "green";

// and setting the type Colors to prop color
const Square = (props: { color: Colors }) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

이제 사용자는 파란색, 빨간색 또는 녹색 중 하나만 color 소품에 전달할 수 있습니다.

codesandbox에 있는 위의 코드를 참조하세요.

😃 유용하셨다면 공유해 주세요.