使用 Typescript 我試圖在我的標記物件中為每個屬性提供一個介面。目前，我正在使用“任何”，但這不是最聰明的做法。這里有什么建議？提前感謝您的幫助和提示。
我在下面分享我的錯誤和代碼。嘗試在 TS 中變得更好，所以知道我如何解決這個問題會很棒。
錯誤：
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)
代碼：
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>
);
},
};
uj5u.com熱心網友回復：
您需要將children屬性更改為React.ReactNode. 之后，您還需要將您的型別 , 分配給marksProps箭頭marks函式 props 的 props 而不是常量。
import React from "react";
import { Warning } from "phosphor-react";
interface marksProps {
children?: React.ReactNode[];
}
export const marks = {
highlight: ({ children }: marksProps) => <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>
);
},
};
TypeScript Playground 鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/444516.html