轉換React項目時的Typescript錯誤

Question

這是我正在從標准ES2015轉換為Typescript的React應用程序。 在我的.tsx文件（從常規.js文件轉換）我得到幾個打字稿錯誤，我不知道如何解決。

第一個是： error TS2339: Property 'propTypes' does not exist on type 'typeof App'.

這適用於：

App.propTypes = {
  actions: PropTypes.object.isRequired,
  fuelSavingsAppState: PropTypes.object.isRequired
};

我嘗試在定義App的代碼上面創建一個接口，如：

interface App {
    propTypes?: any;
}

但這沒有效果。 很明顯我是新手稿，所以我錯過了什么？

另一個錯誤是：

error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Element'

這適用於：

{settings.necessaryDataIsProvidedToCalculateSavings ? <FuelSavingsResults savings={settings.savings} /> : null}

該錯誤特指有關<FuelSavingsResults的位

完全失去了從哪里開始。 任何建議都是最受歡迎的。

---

如果它有幫助，FuelSavingsResults的定義開始如下：

let FuelSavingsResults = (props) => {
    let savingsExist = NumberFormatter.scrubFormatting(props.savings.monthly) > 0;
    let savingsClass = savingsExist ? 'savings' : 'loss';
    let resultLabel = savingsExist ? 'Savings' : 'Loss';

然后有一個常規的React渲染方法，但我認為這不重要。

Answer 1

錯誤TS2339：屬性'propofs'在類型'typeof App'上不存在。

代替

class App extends React.Component{
}
App.propTypes = {
  actions: PropTypes.object.isRequired,
  fuelSavingsAppState: PropTypes.object.isRequired
};

使用static屬性。

class App extends React.Component{
    static propTypes = {
      actions: PropTypes.object.isRequired,
      fuelSavingsAppState: PropTypes.object.isRequired
    };
}

錯誤TS2605：JSX元素類型'Element'不是JSX元素的構造函數。 'Element'類型中缺少屬性'render'

這是編譯器中的一個錯誤，已經修復： https ： //github.com/Microsoft/TypeScript/issues/6349 Alternative為props提供類型注釋。 🌹

Answer 2

propTypes真的需要嗎？ 編譯時不會檢查propTypes在運行時檢查的接口嗎？

interface IApp{
  actions:any;
  fuelSavingsAppState: (props:any)=> void;
}

class App extends React.Component<IApp,{}>{
}

或者如果你使用啞組件

const App = ({actions,  fuelSavingsAppState }:IApp):React.ReactElement<{}> => (
  <div>
   What Ever you want to do with the props 
  </div>
)

注意：如果您正在使用對象，請為其創建一個接口。 就像現在給出的行為一樣，理想情況下應該是一個接口。