在React，我有一個像這樣的通用介面：
interface BaseProps<T> {
data: T;
}
我的代碼的消費者將擴展它來定義他們自己的Propsand Component：
interface MyProps extends BaseProps<string> {
...
}
const MyComponent: React.FC<MyProps> = ({ data }) => {
...
}
我想撰寫一個方法來接受這樣的組件并回傳與MyComponent.data. 這就是我正在努力解決的問題。我正在嘗試撰寫此方法并將其呼叫為：
function myFunc<T, U extends BaseProps<T>>(component: React.FC<U>): T {
return ...
}
const ret1 = myFunc(MyComponent);
const ret2 = myFunc<string, MyProps>(MyComponent);
ret2有正確的型別string，但ret出來有unknown型別。myFunc有沒有一種方法可以在方法中強制執行約束，以便ret1正確鍵入而不需要我顯式宣告型別<>？
更新
@futut 和 @proton 都給出了（幾乎）相同的解決方案，在這種情況下顯然有效！贊！
但是，我在這里撰寫的示例代碼有點過于簡化了。如果我將BaseProps界面更改為：
interface BaseProps<T> {
callback: (value: T) => void;
}
那我就不能再用了U["data"]。在這種情況下，有沒有辦法能夠回傳value引數型別的值MyComponent.callback？
PS：抱歉在這里轉移球門柱。我不擅長過于簡單化。
uj5u.com熱心網友回復：
TypeScript 不知道U提供的型別也可以告訴它是什么T。您可以改為使用單個型別引數并使用索引訪問來獲取其data屬性的型別：
function myFunc<T extends BaseProps<any>>(component: React.FC<T>): T["data"] {
/* ... */
}
uj5u.com熱心網友回復：
只需明確告知打字稿，該型別BaseProps.data將是函式回傳值，如下所示：
function myFunc<T, U extends BaseProps<T>>(component: React.FC<U>): U['data'] {
...
}
這樣，您就不必將型別傳遞給泛型陳述句 ( <>)，只要傳遞給的組件myFunc型別正確。
編輯：關于問題的第二個版本：這里的事情變得棘手。infer您可以使用如下關鍵字指向回呼的值：
function myFunc<T extends BaseProps<any>>(
component: React.FC<T>,
): T['callback'] extends (a: infer R) => void ? R : never {
...
檢查有關該關鍵字的檔案： https ://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/483536.html