使用TS在RN中设置类型

时间:2019-07-15 04:21:02

标签: reactjs typescript react-native

在我的RN应用程序中,我具有以下界面。

interface IProps extends Props<IProps> {
  label?: string;
  editable?: boolean;
  maxLength?: number;
  autoCorrect?: boolean;
  placeholder?: string;
  // tslint:disable-next-line: max-line-length
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters' | undefined;
  // tslint:disable-next-line: max-line-length
  returnKeyType?: 'none' | 'done' | 'search' | 'default' | 'go' | 'next' | 'send' | 'previous' | 'google' | 'join' | 'route' | 'yahoo' | 'emergency-call';
  // tslint:disable-next-line: max-line-length
  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'visible-password' | 'ascii-capable' | 'numbers-and-punctuation' | 'url' | 'number-pad' | 'name-phone-pad' | 'decimal-pad' | 'twitter' | 'web-search' | undefined;
  secureTextEntry?: boolean;
  inputStyle?: object;
  containerStyle?: object;
  inputContainerStyle?: object;
}

此处为autoCapitalize,returnKeyType类型为枚举。在这里定义整个枚举似乎很丑。有更好的方法吗?

1 个答案:

答案 0 :(得分:3)

尝试一下:

enum AutoCapitalize {
  NONE = 'none',
  SENTENCES = 'sentences',
  WORDS = 'words',
  CHARACTERS = 'characters',
  UNDEFINED = '',
}

enum ReturnKeyType {
  ...
}

interface IProps extends Props<IProps> {
  label?: string;
  editable?: boolean;
  maxLength?: number;
  autoCorrect?: boolean;
  placeholder?: string;
  // tslint:disable-next-line: max-line-length
  autoCapitalize?: AutoCapitalize;
  ...
}