Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use prop-types as type definition in typescript?

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 in type-script (where aforementioned JS is imported).

like image 830
Top-Master Avatar asked May 20 '19 07:05

Top-Master


People also ask

Should you use PropTypes with TypeScript?

Props are required in TypeScript In the prop-types package, all props are optional by default. To make a prop required, you will have to use . isRequired explicitly.

How do you put a prop in TypeScript?

To pass an object as props to a component in React TypeScript: Define an interface for the type of the object. Pass an object of the specified type to the child component, e.g. <Employee {... obj} /> .

How do you define a function prop in TypeScript?

To pass a function as props in React TypeScript: Define a type for the function property in the component's interface. Define the function in the parent component. Pass the function as a prop to the child component.


1 Answers

We can use InferProps of @types/prop-types package to extract raw-type from prop-type objects, like:

import PropTypes, { InferProps } from 'prop-types'

const myTypes = {
  activeColor: PropTypes.string,
  // ...
}

type MyComponentProps = InferProps<typeof myTypes>

const dark_theme_properties: MyComponentProps = {
  activeColor: 'green'
  // ...
};
like image 82
AsukaSong Avatar answered Sep 20 '22 23:09

AsukaSong