转换 React 项目时的 Typescript 错误

IT技术 javascript reactjs typescript
2021-05-22 22:42:18

这是特定于我正在从标准 ES2015 转换为 Typescript 的 React 应用程序。在我的 .tsx 文件（从常规 .js 文件转换而来）中，我遇到了几个typescript错误，我不知道如何解决。

第一个是： 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;
}

但这没有效果。显然我是 Typescript 的新手，所以我错过了什么？

另一个错误是： 

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 渲染方法，但我认为这无关紧要。

2个回答

错误 TS2339：“typeof App”类型上不存在属性“propTypes”。

代替 

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 元素类型“元素”不是 JSX 元素的构造函数。“元素”类型中缺少属性“渲染”

这是编译器中的一个错误，此后已修复：https : //github.com/Microsoft/TypeScript/issues/6349替代提供props. 🌹

真的需要 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>
)

注意：如果您正在使用对象，请为其创建一个接口。就像现在给出的任何动作一样，理想情况下应该是一个界面。

其它你可能感兴趣的问题
上一篇React-Redux：绑定按键操作以启动减速器序列的规范方法是什么？ 下一篇多个 observable 协同工作