簡體   English   中英

如何在不鍵入JS子組件的情況下將未類型化的ES6 react組件導入Typescript組件?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM