React Typescript 101: Using Typescript with const list and function

Question

I'm sorry to ask, but how would I use typescript in the example below. After an hour of trying, I appreciate your help!

The map function below uses sortOptions and I tried to define them using Typescript in declare const SortOptionsProps. As such, I would love to figure out how to pass SortOptionsProps to export default function Layout() below.

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: '#' },
]

You could also use interface in place of type if you prefer.

interface SortOption { name: string; href: string }