TypeScript를 사용하여 Nextjs에서 기능 구성 요소 소품의 유형을 설정하는 방법은 무엇입니까?

Originally posted here!

TypeScript를 사용하여 Nextjs에서 기능 구성 요소 props의 유형을 설정하려면 interface 또는 type 별칭을 사용하고 이를 NextPage 일반 유형에 유형 매개변수로 전달할 수 있습니다.

TL;DR

/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Props interface
// with username set to string
interface Props {
  username: string;
}

// Defining NextPage as
// type for Name component
// and defining type for props
const Name: NextPage<Props> = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;

예를 들어 사용자 이름을 표시하는 Name라는 기능 구성 요소가 있다고 가정해 보겠습니다. 이름은 username 라는 소품에서 얻을 수 있습니다.

그래서 그것은 다음과 같이 보일 것입니다,

/* Name.tsx component */

const Name = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;

이제 props에 대한 유형을 먼저 설정하려면 다음과 같이 NextPage 모듈에서 next 일반 유형을 가져와야 합니다.

/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

const Name = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;

이제 다음과 같은 Name 제네릭 유형을 사용하여 NextPage 구성 요소의 유형을 정의해야 합니다.

/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Defining NextPage as
// type for Name component
const Name: NextPage = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;

이제 Name 컴포넌트의 props 유형을 정의해야 합니다. interface를 사용하여 모든 소품에 대한 유형을 생성해 보겠습니다. 우리의 경우 username 라는 prop이 하나만 있고 username prop의 값이 string 여야 한다는 것도 알고 있습니다.

따라서 Props의 멤버가 username 유형으로 설정된 string라는 인터페이스를 다음과 같이 만들 수 있습니다.

/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Props interface
// with username set to string
interface Props {
  username: string;
}

// Defining NextPage as
// type for Name component
const Name: NextPage = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;

이제 마지막으로 Props 인터페이스를 다음과 같이 NextPage 제네릭 유형에 유형 매개변수로 전달해야 합니다.

/* Name.tsx component */

// import NextPage generic type
import { NextPage } from "next";

// Props interface
// with username set to string
interface Props {
  username: string;
}

// Defining NextPage as
// type for Name component
// and defining type for props
const Name: NextPage<Props> = (props) => {
  // using destructuring to get username
  const { username } = props;

  return <h1>{username}</h1>;
};

// export component
export default Name;

그게 다야! 😃

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

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