Having trouble with variables (this.x) in react native - react-native

Question

I'm following this tutorial to try to get tensorflow js working in react native.
The tutorial's code is as follows (working, tested by cloning the repo):
class App extends React.Component {
state = {
isTfReady: false,
isModelReady: false,
predictions: null,
image: null
}
async componentDidMount() {
await tf.ready()
this.setState({
isTfReady: true
})
this.model = await mobilenet.load()
this.setState({ isModelReady: true })
this.getPermissionAsync()
}
While my code:
const modelJson = require('../assets/model/model.json');
const modelWeights = require('../assets/model/group1-shard1of1.bin');
class CameraCompo extends Component {
async componentDidMount(){
this.model = await tf.loadGraphModel(bundleResourceIO(modelJson, modelWeights));
}
Gives me the error: Property 'model' does not exist on type 'CameraCompo'
I've tried adding this.model into a constructor, as follows:
constructor(props){
super(props)
this.model = tf.GraphModel
}
But then, it simply gives me the same error.
Any help would be greatly appreciated.

Answer 1

Typescript is complaining that model is not a property of the component
An interface can be defined for the props and the state for typescript to infer them along the way. If not they can be simply set to any which defeats the purpose of using typescript
inferface Props {
// add what is necessary
}
interface State {
model: any
}
class CameraCompo extends Component<Props, State> {
async componentDidMount(){
const model = await tf.loadGraphModel(bundleResourceIO(modelJson, modelWeights));
this.setState(model)
// later model can be accessed with this.state.model.predict(input)
}
}
The above would be to define a model and set it in the state of the component. But the model hardly changes and there might probably not a need to keep it in the state of the component. In that case, model simply needs to be declared
class CameraCompo extends Component {
private model: any
async componentDidMount(){
this.model = await tf.loadGraphModel(bundleResourceIO(modelJson, modelWeights));
}
}