How to assign types to components? about react

[janhesters]

Add undefined to the type: keyboardDidShowListener?: EmitterSubscription or keyboardDidShowListener: EmitterSubscription | undefined. Properties whose type include undefined skip the strictPropertyInitialization verification completely.

I tried this, but since I use .remove() I'll get a linting error there becuase undefined does not have that function.

If what you're doing in componentDidMount can be safely moved to the constructor without breaking anything, moving it would fix the error and still ensure type safety.
It seems to be feasible, since Platform and Keyboard are imported from react-native and do not seem to be attached to the components' instance in anyway (I haven't personally ever done anything with React Native so take this with a grain of salt). There may also be performance issues if React ever instantiates your component without mounting it, therefore never calling componentWillUnmount.

This seems about right, which is why I used componentDidMount().

You can overrule that verification by adding a ! after the field name, as such: keyboardDidShowListener!: EmitterSubscription. That basically tells Typescript that even though there is no explicit initialization, you are sure that it will be initialized (as it is).
An example of a situation where this wouldn't work is if you were defining a field that was going to be used inside render, but would be undefined in the first render (before calling componentDidMount).

This also has the problem that .remove() throws a linting error.
Therefore I chose to set strictPropertyInitialization: true. Thank you very much for your help, you helped me out tremendously!

[vhfmag]

Your fix was correct, the issue is that you have the strict flag (or the more specific strictPropertyInitialization flag) activated on tsconfig.json and didn't initialize that field either inline or in a constructor. There are three ways for you to fix it:

• If what you're doing in componentDidMount can be safely moved to the constructor without breaking anything, moving it would fix the error and still ensure type safety.
  • It seems to be feasible, since Platform and Keyboard are imported from react-native and do not seem to be attached to the components' instance in anyway (I haven't personally ever done anything with React Native so take this with a grain of salt). There may also be performance issues if React ever instantiates your component without mounting it, therefore never calling componentWillUnmount.
• You can overrule that verification by adding a ! after the field name, as such: keyboardDidShowListener!: EmitterSubscription. That basically tells Typescript that even though there is no explicit initialization, you are sure that it will be initialized (as it is).
  • An example of a situation where this wouldn't work is if you were defining a field that was going to be used inside render, but would be undefined in the first render (before calling componentDidMount). Which brings us to the last option:
• Add undefined to the type: keyboardDidShowListener?: EmitterSubscription or keyboardDidShowListener: EmitterSubscription | undefined. Properties whose type include undefined skip the strictPropertyInitialization verification completely.

I hope that can be helpful :). To read more about that strictPropertyInitialization, check https://blog.mariusschulz.com/2018/05/20/typescript-2-7-strict-property-initialization.

[vhfmag]

Happy to help! :)

[swyxio]

glad you got helped!!!! keeping this open hopefully to incorporate some insights from this in a future addition

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!