代码之家 › 专栏 › 技术社区 › user1713450

Polymorphic React组件在IDE中具有错误的类型推断

tsx typescript reactjs

user1713450 · 技术社区 · 3 年前

declare const MyComponent = <A extends {id: bigint|number}>(props: MyProps<A>) => React.FC<{}>

interface MyProps<A extends {id: number}> {
  data: A[]
  orderBy: keyof A
}

declare const x: { id: number, foo: string }[]

const Foo = () => {
  <MyComponent data={x} orderBy="foo"/> // <-- Type 'keyof A' is not assignable to type 'never'
}

我认为这是因为TS未能从 data 那个类型是类型 { id: number, ... } 因此它认为 数据 属于类型 {} 因此 keyof A 属于类型 never (所以 orderBy 根本不可能是任何东西)。

所以我的问题是,除了 // @ts-ignore 就在上面?我可以手动指定的类型吗 A 不知怎么在我的TSX里?我不能做任何类似的事情

import { MyComponent } from ...
declare const specify = <A>() => typeof MyComponent<A> // <-- error here because of the <A> part after MyComponent

const Foo = <A ...>() => {
  const SpecialMyComponent = specify<A>()
  return <SpecialMyComponent .../>
}

似乎你不能在TSX中执行这些泛型,而TS不认为它是TSX,而不是指定泛型的值。

0 回复 | 直到 3 年前

jsejcksn 3 年前

我在下面的代码中提供了解释性注释。如果有不清楚的地方,请随时回复:

TS Playground

import {default as React} from 'react';

// bigint was missing from this union in MyProps:
type ID = {
  id: bigint | number;
};

type MyProps <A extends ID> = {
  data: A[];
  orderBy: keyof A;
};

// Suggestion: use React.ReactElement if you're rendering JSX or a component that does:
declare function MyComponent <A extends ID>(props: MyProps<A>): React.ReactElement;

declare const x: { id: number; foo: string; }[];

const Foo = () => {
  <MyComponent data={x} orderBy="foo"/> // ok
}


// And, finally... yes, you CAN use generics with TSX!

type Y = { id: bigint; baz: string[]; };
declare const y: Y[];

const Bar = () => {
  <MyComponent<Y> data={y} orderBy="baz" /> // ok
};

推荐文章

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Zoddo · 属性在明确定义时可能为“未定义”

3 月前

Abdulkerim Awad · 带有泛型的Typescript函数重载无法按预期工作

3 月前

Sanitysign · 为什么{}类型可分配给对象类型?

4 月前

IvonaK · 使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

Xunnamius · 为什么TypeScript在有条件地推断数组末尾的可选元素时遇到困难?

4 月前

njord · 基于函数的Typescript返回类型

4 月前