Currently, while working with Typescript, I am looking for a solution to define an interface with specific properties inside my object of marks. At the moment, I am using "any", but I know there must be a better approach. Any guidance or advice on how to proceed would be greatly appreciated. Thank you in advance for your help and suggestions.
Below, I have shared both the error message and my code. As I strive to improve in TS, it would be immensely helpful to understand how to resolve this issue.
Error:
Type '{ highlight: ({ children }: { children: any; }) => Element; buttonLink: ({ text, value }: any) => Element; internalLink: ({ text, value }: any) => Element; link: ({ children, value }: any) => Element; }' is not assignable to type 'marksProps'.
Object literal may only specify known properties, and 'highlight' does not exist in type 'marksProps'.ts(2322)
Code:
import Link from "next/link";
import { Warning } from "phosphor-react";
interface marksProps {
children?: any;
}
export const marks: marksProps = {
highlight: ({ children }) => <mark>{children}</mark>,
buttonLink: ({ text, value }: any) => {
const title = value?.colors?.title;
const path = value?.path;
/* prettier-ignore */
const Theme : { [key: string]: any } = {
neon : "bg-neon text-navyBlue border-navyBlue hover:bg-offWhite",
clear : "bg-transparent text-white border-white hover:bg-offWhite hover:text-navyBlue",
bubblegum : "bg-bubblegum text-navyBlue border-navyBlue hover:bg-offWhite hover:text-navyBlue",
sand : "bg-sand text-navyBlue border-navyBlue hover:bg-offWhite hover:text-navyBlue",
navyBlue : "bg-navyBlue text-white border-white hover:bg-offWhite hover:text-navyBlue"
};
const Button = () => (
<>
{path ? (
<Link href={value.path}>
<a
className={`inline-flex items-center px-4 py-2 mt-6 text-xs font-bold text-center uppercase duration-300 ease-in-out border-2 rounded-full ${Theme[title]}`}
>
{text}
</a>
</Link>
) : (
<div className="block mt-4">
<p className="flex gap-2 text-sm font-bold text-sand place-items-center">
<Warning size={24} color="#ffd662" weight="duotone" />
<span>Page reference URL is required.</span>
</p>
<button
disabled
className="inline-flex items-center px-4 py-2 mt-3 text-xs font-bold text-center uppercase duration-300 ease-in-out border-2 rounded-full disabled:bg-gray-700 disabled:opacity-30"
>
{text}
</button>
</div>
)}
</>
);
return <Button />;
},
internalLink: ({ text, value }: any) => {
return (
<Link href={value.path}>
<a className="underline cursor-pointer text-bubblegum">{text}</a>
</Link>
);
},
link: ({ children, value }: any) => {
const blank = value.blank;
return blank ? (
<a
className="underline cursor-pointer text-bubblegum"
href={value.href}
rel="noreferrer"
target="_blank"
>
{children}
</a>
) : (
<a
className="underline cursor-pointer text-bubblegum"
href={value.href}
rel="noreferrer"
>
{children}
</a>
);
},
};