[英]How do you import untyped ES6 react components into a Typescript component without typing the JS child components?
如果我有這樣的ES6組件:
component OldThing extends React.Component { constructor(props) { super(props); } render() { return <div>{this.props.someProp}</div>; } }
像這樣的ES6容器:
const OldThingContainer = connect(mapStateToProps, mapDispatchToProps)(OldThing);
和一個新的打字稿組件,如下所示:
component NewThing extends React.Component<Props, State> { render() { return <OldThingContainer someProp={someValue} /> } }
我目前收到有關OldThing上不存在的someProp的IntrinsicAttributes錯誤。 如何在不為OldThing和/或OldThingContainer添加類型/ typedef的情況下擺脫該錯誤? 我在定義它的OldThingContainer上嘗試了@augments解決方案,但這似乎無濟於事。 也沒有在組件本身上添加注釋。
我希望能夠不帶類型地導入JS的原因是,我們正在將打字稿添加到一個很大的,已有多年歷史的代碼庫中,並且目前很難使人們完全編寫打字稿組件,更不用說他們是否也必須打字刪除其組件要導入的每個現有組件。
是否存在解決此問題的優雅解決方案,還是我將不得不先經過每個人並在某個typedef文件中手動鍵入每個現有的JS組件(數百個)以消除/防止這些錯誤?
我嘗試了您的示例,並且為您的組件推斷出的connect
類型似乎有些問題。
一種快速的解決方法是使用以下方法注釋您的JS組件:
/**
* @type {React.ComponentType<any>}
*/
const OldThingContainer = connect(mapStateToProps, mapDispatchToProps)(
OldThing
);
一種更優雅的解決方案(但可能無法實現)將試圖深入到react-redux
。 connect
函數要求您提供一些類型參數以使其正常工作。 如果未提供,這些參數將被賦予{}
,而不是any
(因為any
參數都可以悄悄地吞噬您的類型)。
評論:從我使用react + redux + typescript進行的工作中,lib typedef是最大的痛點之一。 React typedef會變得非常復雜。 (流只會使您的編輯器掛起“等待流服務器”,這甚至更糟)。 隨着TS + Redux變得越來越流行並且添加了更多支持,這在幾個月內可能會變得更好...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.