[英]Typescript Errors while converting a React project
This is specific to a React app I am converting from standard ES2015 to Typescript. 这是我正在从标准ES2015转换为Typescript的React应用程序。 In my .tsx files (converted from regular .js files) I am getting a couple of typescript errors I do not know how to solve.
在我的.tsx文件(从常规.js文件转换)我得到几个打字稿错误,我不知道如何解决。
The first is: error TS2339: Property 'propTypes' does not exist on type 'typeof App'.
第一个是:
error TS2339: Property 'propTypes' does not exist on type 'typeof App'.
This applies to: 这适用于:
App.propTypes = {
actions: PropTypes.object.isRequired,
fuelSavingsAppState: PropTypes.object.isRequired
};
I tried creating an interface above that code that defined App like: 我尝试在定义App的代码上面创建一个接口,如:
interface App {
propTypes?: any;
}
But this had no effect. 但这没有效果。 Clearly I am new to Typescript so what am I missing?
很明显我是新手稿,所以我错过了什么?
The other error is: 另一个错误是:
error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Element'
and this applies to: 这适用于:
{settings.necessaryDataIsProvidedToCalculateSavings ? <FuelSavingsResults savings={settings.savings} /> : null}
The error specifically refers to the bit about <FuelSavingsResults
该错误特指有关
<FuelSavingsResults
的位
At a complete loss as to where to even start with that. 完全失去了从哪里开始。 Any suggestions are most welcome.
任何建议都是最受欢迎的。
in case it helps, the definition for FuelSavingsResults starts like: 如果它有帮助,FuelSavingsResults的定义开始如下:
let FuelSavingsResults = (props) => {
let savingsExist = NumberFormatter.scrubFormatting(props.savings.monthly) > 0;
let savingsClass = savingsExist ? 'savings' : 'loss';
let resultLabel = savingsExist ? 'Savings' : 'Loss';
and then has a regular React render method that follows, but I don't think that will matter. 然后有一个常规的React渲染方法,但我认为这不重要。
error TS2339: Property 'propTypes' does not exist on type 'typeof App'.
错误TS2339:属性'propofs'在类型'typeof App'上不存在。
Instead of 代替
class App extends React.Component{
}
App.propTypes = {
actions: PropTypes.object.isRequired,
fuelSavingsAppState: PropTypes.object.isRequired
};
Use a static
property. 使用
static
属性。
class App extends React.Component{
static propTypes = {
actions: PropTypes.object.isRequired,
fuelSavingsAppState: PropTypes.object.isRequired
};
}
error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
错误TS2605:JSX元素类型'Element'不是JSX元素的构造函数。 Property 'render' is missing in type 'Element'
'Element'类型中缺少属性'render'
This was a bug in the compiler that has since been fixed : https://github.com/Microsoft/TypeScript/issues/6349 Alternative provide type annotations for props
. 这是编译器中的一个错误,已经修复: https : //github.com/Microsoft/TypeScript/issues/6349 Alternative为
props
提供类型注释。 🌹 🌹
Is propTypes really required? propTypes真的需要吗? Won't interface check at compile time what propTypes check in runtime?
编译时不会检查propTypes在运行时检查的接口吗?
interface IApp{
actions:any;
fuelSavingsAppState: (props:any)=> void;
}
class App extends React.Component<IApp,{}>{
}
or if you are using dumb components 或者如果你使用哑组件
const App = ({actions, fuelSavingsAppState }:IApp):React.ReactElement<{}> => (
<div>
What Ever you want to do with the props
</div>
)
Note: If you are using object please create an interface for the same. 注意:如果您正在使用对象,请为其创建一个接口。 Like actions as of now given as any which should be ideally an interface.
就像现在给出的行为一样,理想情况下应该是一个接口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.