React Typescript 101：将 Typescript 与 const 列表和函数一起使用

Question

很抱歉，我将如何在下面的示例中使用 typescript。经过一个小时的尝试，感谢您的帮助！

下面的 map 函数使用了 sortOptions，我尝试在声明 const SortOptionsProps 时使用 Typescript 定义它们。因此，我很想弄清楚如何将 SortOptionsProps 传递给下面的export default function Layout()。

import { Menu } from '@headlessui/react'

declare const SortOptionsProps: {
    name: string
    href: string
}[]

const sortOptions = [
    { name: 'Most Popular', href: '#' },
    { name: 'Best Rating', href: '#' },
    { name: 'Newest', href: '#' },
    { name: 'Price: Low to High', href: '#' },
    { name: 'Price: High to Low', href: '#' },
]

export default function Layout() {
    return (
        <>
        {sortOptions.map((option) => (
            <Menu.Item key={option}>
                {({ active }) => (
                    <a
                        href={option.href}
                        className={classNames(
                            active
                                ? 'bg-gray-100'
                                : '',
                            'block px-4 py-2 text-sm font-medium text-gray-900'
                        )}
                    >
                        {option.name}
                    </a>
                )}
            </Menu.Item>
        ))}      
    </>
    )
}

Answer 1

type SortOption = { name: string; href: string }:

const sortOptions: SortOption[] = [
    { name: 'Most Popular', href: '#' },
    { name: 'Best Rating', href: '#' },
    { name: 'Newest', href: '#' },
    { name: 'Price: Low to High', href: '#' },
    { name: 'Price: High to Low', href: '#' },
]

如果您愿意，也可以使用interface 代替type。

interface SortOption { name: string; href: string }