英文:
TypeScript Generics with React Function Components
问题
You're encountering a TypeScript error because you're trying to pass a type argument (SpecificJobProps) to SearchFilterJobs, but it appears that the component is not set up to accept type arguments. You can modify the SearchFilterJobs component like this to accept a type argument:
export const SearchFilterJobs = <T extends JobPosting>(props: SearchFilterJobsProps<T> & React.HTMLAttributes<HTMLDivElement>) => {// ... component logic here};
With this modification, you should be able to use it as you intended:
<SearchFilterJobs<SpecificJobProps> jobs={{ data: specificJobs }} />
This should resolve the TypeScript error you mentioned.
英文:
I have the following component structure:
export interface SearchFilterJobsProps<J = JobPosting> {unwrap?: boolean;jobs?: {data: J[];component?: React.ComponentType | React.ElementType;};searchMatchProps?: (keyof J)[];}export type SearchFilterJobsType<T = JobPosting> = React.FC<SearchFilterJobsProps<T>>;export const SearchFilterJobs: SearchFilterJobsType = <Z extends JobPosting>({jobs,searchMatchProps,className,children,...rest}: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>) => { ... };
I have set it up like this, because I would like this component to handle various data structures. But I seem to have made some mistakes, because when I am attempting to use it:
<SearchFilterJobs<SpecificJobProps> jobs={{data: specificJobs}} />
TypeScript tells me: TS2558: Expected 0 type arguments, but got 1..
What am I doing wrong here?
答案1
得分: 0
以下是您提供的代码的翻译部分：
export const SearchFilterJobs: SearchFilterJobsType = ...将为 SearchFilterJobsType 选择默认的类型参数。右侧的内容不重要 - 如果提供了类型注释，则必须完整。在这种情况下，最简单的解决方案是在常量上使用 `satisfies` 而不是类型注释：export type SearchFilterJobsType<T = JobPosting> = React.FC<SearchFilterJobsProps<T>>;export const SearchFilterJobs = <Z extends JobPosting>({jobs,searchMatchProps,className,children,...rest}: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>) => {... } satisfies React.FC<SearchFilterJobsProps<T>>;
希望这对您有所帮助。如果您需要任何进一步的翻译，请随时提问。
英文:
Something like:
export const SearchFilterJobs: SearchFilterJobsType = ...
will pick the default type param for SearchFilterJobsType. What's on the right side doesn't matter - the type annotation, if provided, must be complete.
Simplest solution in this case is to use satisfies instead of an annotation on the constant:
export type SearchFilterJobsType<T = JobPosting> = React.FC<SearchFilterJobsProps<T>>;export const SearchFilterJobs = (<Z extends JobPosting>({jobs,searchMatchProps,className,children,...rest}: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>) => {... }) satisfies React.FC<SearchFilterJobsProps<T>>;
答案2
得分: 0
尝试将组件的const重写为函数声明。
我认为那应该可以工作 
英文:
Try rewriting the component const to a function declaration.
I think that should work
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论