Situation:
Consider having the myTypes
constant holding prop-types (written somewhere in a file called my-component.js
), like below:
import React from 'react'import { View } from 'react-native'import PropTypes from 'prop-types'export const myTypes = { activeColor: PropTypes.string, color: PropTypes.string, fontFamily: PropTypes.string, fontSize: PropTypes.number, fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), height: PropTypes.number, icon: PropTypes.node, iconOverlay: PropTypes.node, marginBottom: PropTypes.number, marginLeft: PropTypes.number, marginRight: PropTypes.number, marginTop: PropTypes.number, maxHeight: PropTypes.number, minHeight: PropTypes.number, onBlur: PropTypes.func, onChangeText: PropTypes.func, paddingBottom: PropTypes.number, paddingLeft: PropTypes.number, paddingRight: PropTypes.number, paddingTop: PropTypes.number}export default class MyComponent extends React.Component { static propTypes = myTypes render () { return (<View></View> ); }}
How would you use myTypes
as a type or helper to enable IDE auto-completion?
What I tried (in another file written in type-script
instead) is below:
import MyComponent, { myTypes } from 'my-component';const dark_theme_properties: myTypes = { activeColor: 'green'};
But of course, that gives the 'myTypes' refers to a value, but is being used as a type here. ts(2749)
error, and using typeof myTypes
is not giving the right auto-complete in IDE either.
Note that the component is written in
JavaScript ES6
while the desired auto-complete is expected intype-script
(where aforementioned JS is imported).