Skip to content

Update typescript definitions#1891

Closed
dawnmist wants to merge 3 commits intoGeekyAnts:masterfrom
dawnmist:feature/updateTypescriptDefinitions
Closed

Update typescript definitions#1891
dawnmist wants to merge 3 commits intoGeekyAnts:masterfrom
dawnmist:feature/updateTypescriptDefinitions

Conversation

@dawnmist
Copy link

The Typescript definitions had several cases where they were significantly out of date.

  • None of the functions (e.g. connectStyle) were defined in the Typescript types, so these were unusable in Typescript.
  • None of the component definitions in the Typescript types specified the presence of the _root references, so these were unusable in Typescript.
  • Many types were missing some fields, or had obsolete fields specified.
  • Some components were missing entirely.
  • Some components were defined that had been removed (mostly around native-base 0.50).
  • Components that spread their props into ReactNative components (e.g. View, Text, TouchableOverlay, etc) only allowed access to a few of the ReactNative component's props, instead of extending from the ReactNative ones.
  • Where possible, I've updated prop interfaces to extend from their upstream types rather than re-declaring the upstream fields so that updates upstream are automatically available for use, & cleaned up the areas where that duplication already existed.
  • Updated all the "Function" type declarations to provide the expected function signatures for those functions.
  • Updated the imported ReactNative Props names from "ViewProperties" to "ViewProps", etc, to match updates in ReactNative's type names.
  • Theme information had no types at all, so it was not possible to safely access theme variable fields, or to extend the variable interface with user-customised types for custom components.
  • Created a separate module definition to permit importing the dist/src/utils/computeProps function (couldn't merge this into the main definitions due to how Typescript handles the difference between @types packages and packages that provide their own definitions), and made sure that this was properly copied over to the dist directory when transpiling.

I have done my best to review the exported native-base and update the Typescript definitions to match the current native-base master branch. In doing so, I also found one component (Switch) that was spreading it's own propTypes into its propTypes definition instead of the ReactNative Switch's propTypes - a minor patch for that is included.

In order to test the Typescript definitions, I made a clone of the NativeBase-KitchenSync CRNA branch and converted that from Javascript to Typescript, to ensure that the expected functionality was all available and actually worked on the device. That branch is available here.

This also depends on the update to Typescript definitions in react-native-easy-grid, which adds the _root refs to the Grid, Row and Col components. The native-base types in this pull request now simply re-export the react-native-easy-grid ones instead of redefining them. They will still function as they currently do without that pull request - but the _root refs for Grid, Row and Col components will not be available until that pull request is also merged.

dawnmist added 3 commits May 12, 2018 04:23
* Add _root reference items to classes
* Update names of imported ReactNative Props to match renaming in RN 0.55
  typescript definitions.
* Update all "Function" types to define the signature of the expected
  function.
* Where possible, extend props from their RN type (e.g. if the propTypes
  spread from 'ReactNative.ViewProps', extend the interface from
  ReactNative.ViewProps). This means that future updates to the upstream
  props are automatically available for use in components that spread their
  incoming props into the upstream type.
* Where possible, use defined upstream types directly instead of copying
  their fields.
@akhil-ga
Copy link
Contributor

@dawnmist got this error after running npm run tsc on your NativeBase-KitchenSync CRNA branch. Can you check this. Attaching a gif.

typescript

@dawnmist
Copy link
Author

dawnmist commented May 23, 2018

Looks like both @types/react-native and @types/expo have been updated since I submitted the pull request, introducing an issue where it couldn't infer the style type in some cases. I've cleaned up the style types in the NativeBase-KitchenSink repo. This didn't affect the native-base type definitions in this pull request though - just the implementation of them in the example repo.

In terms of tsc, it also doesn't understand that the 'index.android.tsx' and 'index.ios.tsx' files provide the index file for a folder, so it reports issues in the 3 folders that provide platform specific indexes:
image
Using the normal yarn start compiles and works correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants