Как использовать prop-types в качестве определения типа для машинописи? - PullRequest
Новая
       23

Как использовать prop-types в качестве определения типа для машинописи?

4 голосов
/ 20 мая 2019

Когда константа myTypes записана где-то в файле с именем my-component.js, как показано ниже: 

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>
    );
  }
}

Учтите, что вы хотели бы использовать myTypes (в другом файле, записанном в type-script) в качестве типа или помощника для включения автозаполнения IDE, как бы вы это сделали?

То, что я попробовал, ниже: 

import MyComponent, { myTypes } from 'my-component';

const dark_theme_properties: myTypes = {
  activeColor: 'green'
};

Но, конечно, это дает ошибку 'myTypes' refers to a value, but is being used as a type here. ts(2749).

Редактировать: вопрос в старом названии был "How to use a value as a type definition in typescript?", что благодаря ответам, которые я теперь знаю, было бы так просто: 

const dark_theme_properties: typeof myTypes = {
  activeColor: 'green'
  // ...
};

Ответы [ 2 ]

2 голосов
/ 20 мая 2019

Используйте InferProps из @types/prop-types, например: 

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

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

type MyComponentProps = InferProps<typeof myTypes>

const dark_theme_properties: MyComponentProps = {
  activeColor: 'green'
  // ...
};
2 голосов
/ 20 мая 2019

Поскольку вы используете Typescript, вы можете создать интерфейс как помощник по типу и автозаполнение. 

import React from 'react'

export interface myTypes {
  activeColor: string;
  color: string;
  fontFamily: string;
  fontSize: number;
  fontWeight: string | number;
  height: number;
  icon: React.ReactNode;
  iconOverlay: React.ReactNode;
  marginBottom: number;
  marginLeft: number;
  marginRight: number;
  marginTop: number;
  maxHeight: number;
  minHeight: number;
  onBlur: () => void;
  onChangeText: () => void;
  paddingBottom: number;
  paddingLeft: number;
  paddingRight: number;
  paddingTop: number;
}

import { myTypes } from "my-types-interface";

const dark_theme_properties: myTypes = {
  activeColor: "green",
  ...
};
...