编写Next.js页面类型定义的单行替代实现方式有哪些？

现有代码注意点 #

你现有代码里的解构写法({name: string})存在逻辑歧义：这里不是给name标注string类型，而是将name属性重命名为string变量，虽然能运行但不符合类型标注的初衷，建议先修正。

替代写法汇总 #

• 单行合并实现（符合你要的简化需求）
  直接将Props类型内联到NextPage泛型中，无需单独定义Props类型，适合props结构简单的场景：

const Home: NextPage<{ name: string }> = ({ name }) => {

• 无NextPage泛型的轻量写法
  如果不需要用到NextPage内置的隐含类型（如默认children、与数据获取方法的关联类型等），可以直接给函数参数标注类型，写法更简洁：

const Home = ({ name }: { name: string }) => {

• 保留独立类型定义的替换写法
  如果Props后续需要扩展复用，也可以用interface代替type定义属性类型，简单场景下两者效果一致：

interface Props {
  name: string
}
const Home: NextPage<Props> = ({ name }) => {

内容的提问来源于stack exchange，提问作者TommyD