英文:
React generic type prop must extend other type?
问题
我有点新手对于TypeScript，所以这个对我来说有点令人困惑。我想将通用类型传递给我的高阶组件（HOC）。我需要将组件的属性作为通用类型传递，以获得具有该类型属性的组件。
const withHOC = <T extends {}>(Component: ComponentType<T>) => (props: T) => {
return (
<Component {...props} />
)
}
// 例如：const MyView = withHoc<ViewProps>(View)
我不理解的是，我不能只将 <T> 设置为通用类型，我必须将其设置为 <T extends something>。也就是说，如果我不传递通用类型（如示例中所示），我将不会收到TypeScript的警告，指出没有传递通用类型。有人能解释一下为什么会发生这种情况吗？
我希望它看起来像这样：
const withHOC = <T>(Component: ComponentType<T>) => (props: T) => {
return (
<Component {...props} />
)
}
因此，当我在调用withHOC时不传递通用类型时，它会警告我必须传递一个。我可能一切都错了，也许在寻求无法实现的东西，所以如果我错了，请纠正我。
英文:
I'm kinda new to typescript so this one is confusing for me. I wanted to pass generic type into my hoc. I need to pass component props as a generic type to get Component with that types on it.
const withHOC = <T extends {}>(Component: ComponentType<T>) => (props: T) => {
return (
<Component {...props} />
)
}
//example: const MyView = withHoc<ViewProps>(View)
What I don't understand is that I can't just set <T> as generic type, I must set it as <T extends something>. With that said if I don't pass generic type (as shown in example) I wont get typescript warning for not passing generic type.Can someone explain me why is that happening?
I want it to look like this:
const withHOC = <T>(Component: ComponentType<T>) => (props: T) => {
return (
<Component {...props} />
)
}
So when I don't pass generic type when calling withHOC, it warns me there has to be one. I might me doing everything wrong and asking for something that is not achievable so correct me if I'm wrong.
答案1
得分: 1
-
<T>vs.<T extends something>我不能只将
<T>作为通用类型，我必须将其设置为<T extends something>。 -
Requiring
<T>如果我不传递通用类型（如示例所示），将不会收到有关未传递通用类型的 TypeScript 警告。有人可以解释为什么会发生这种情况吗？
我希望它看起来像这样... 所以，当我在调用 withHOC 时不传递通用类型，它会警告我必须传递一个。我可能做错了一切，请求的东西无法实现，如果我错了，请纠正我。
TypeScript将根据每次调用
withHOC时传递的Component参数的类型来推断T的类型。假设你有以下代码：
const Button = (props: ButtonProps) => ( <button {...props}/> ); const WrappedButton = withHOC(Button);Button参数匹配类型ComponentType<ButtonProps>，因此TypeScript确定这个withHOC调用的T是ButtonProps。这称为类型推断，它是TypeScript的一个强大特性。
你不需要使用
withHOC<ButtonProps>(Button)显式设置<T>，因为它已知。可能存在一些棘手的方法来要求显式的
<T>，但这并不容易，而且我不明白你为什么要这样做。
英文:
There are two separate questions here:
1. <T> vs. <T extends something>
> I can't just set <T> as generic type, I must set it as <T extends something>.
This is a syntactical issue when using arrow functions in .tsx files, as the <T> can be confused for a JSX expression. It is possible to use just <T> instead of <T extends something> if you convert from an arrow function to a traditional function declaration.
function withHOC<T>(Component: ComponentType<T>) {
return function (props: T) {
return (
<Component {...props} />
)
}
}
2. Requiring <T>
> If I don't pass generic type (as shown in example) I wont get typescript warning for not passing generic type. Can someone explain me why is that happening?
> I want it to look like this ... So when I don't pass generic type when calling withHOC, it warns me there has to be one. I might me doing everything wrong and asking for something that is not achievable so correct me if I'm wrong.
TypeScript will infer the type for T each time that you call withHOC based on the type of the Component argument that you call it with.
Let's say that you have the following code:
const Button = (props: ButtonProps) => (
<button {...props}/>
);
const WrappedButton = withHOC(Button);
The Button argument matches the type ComponentType<ButtonProps>, so TypeScript determines that the T for this withHOC call is ButtonProps.
This is called type inference and it is a powerful feature of TypeScript.
You don't need to explicitly set <T> using withHOC<ButtonProps>(Button) because it is already known.
There probably exists some tricky way to require an explicit <T> but it's not trivial and I don't see why you would want this.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论