TypeScript prop-types.arrayOf函數代碼示例

// $ExpectType Requireable<number>
AirbnbPropTypes.nonNegativeInteger;

// $ExpectType Requireable<number>
AirbnbPropTypes.nonNegativeNumber();

// $ExpectType Requireable<string>
AirbnbPropTypes.numericString();

// $ExpectType Requireable<object>
const props: PropTypes.Requireable<object> = AirbnbPropTypes.object();
// $ExpectType Requireable<{ foo: string; }>
AirbnbPropTypes.object<{ foo: string }>();

AirbnbPropTypes.or([PropTypes.bool.isRequired, AirbnbPropTypes.explicitNull().isRequired]);
AirbnbPropTypes.or([PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.string)]);
AirbnbPropTypes.or([PropTypes.number, PropTypes.string, PropTypes.bool], 'foo');

// $ExpectType Requireable<number>
AirbnbPropTypes.range(0, 10);
// $ExpectType Requireable<5>
AirbnbPropTypes.range<5>(0, 10);

// $ExpectType Requireable<string | null>
AirbnbPropTypes.requiredBy('foo', PropTypes.string);
// $ExpectType Validator<number>
AirbnbPropTypes.requiredBy('bar', PropTypes.number, 42).isRequired;

validateRequireableTop(AirbnbPropTypes.restrictedProp());
validateRequireableTop(AirbnbPropTypes.restrictedProp(() => 'Error'));
validateRequireableTop(AirbnbPropTypes.restrictedProp(() => new Error('Error')));

   '300',
   '400',
   '500',
   '600',
   '700',
   '800',
   '900'
 ]),
 /**
  * @platform ios
  */
 fontVariant: ReactPropTypes.arrayOf(
   ReactPropTypes.oneOf([
     'small-caps',
     'oldstyle-nums',
     'lining-nums',
     'tabular-nums',
     'proportional-nums'
   ])
 ),
 textShadowOffset: ReactPropTypes.shape({
   width: ReactPropTypes.number,
   height: ReactPropTypes.number
 }),
 textShadowRadius: ReactPropTypes.number,
 textShadowColor: ColorPropType,
 /**
  * @platform ios
  */
 letterSpacing: ReactPropTypes.number,
 lineHeight: ReactPropTypes.number,

export const SingleChildShape = PropTypes.shape({
  id: PropTypes.number,
  active: PropTypes.bool,
  self: (...args) => SingleChildShape(...args),
});

export interface SingleChildShape {
  id?: number;
  active?: boolean;
  self?: SingleChildShape;
}

export const ParentShape = PropTypes.shape({
  id: PropTypes.number,
  name: PropTypes.string,
  children: PropTypes.arrayOf(MultipleChildrenShape),
  orphan: SingleChildShape,
  polymorph: PropTypes.oneOfType([
    SingleChildShape,
    MultipleChildrenShape,
  ]),
  polymorph_fk: KeyShape,
  polymorph_type: PropTypes.string,
});

export interface ParentShape {
  id?: number;
  name?: string;
  children?: Array<MultipleChildrenShape>;
  orphan?: SingleChildShape;
  polymorph?: SingleChildShape | MultipleChildrenShape;

   *
   * `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])`
   *
   * The skew transformations require a string so that the transform may be
   * expressed in degrees (deg). For example:
   *
   * `transform([{ skewX: '45deg' }])`
   */
  transform: ReactPropTypes.arrayOf(
    ReactPropTypes.oneOfType([
      ReactPropTypes.shape({perspective: ReactPropTypes.number}),
      ReactPropTypes.shape({rotate: ReactPropTypes.string}),
      ReactPropTypes.shape({rotateX: ReactPropTypes.string}),
      ReactPropTypes.shape({rotateY: ReactPropTypes.string}),
      ReactPropTypes.shape({rotateZ: ReactPropTypes.string}),
      ReactPropTypes.shape({scale: ReactPropTypes.number}),
      ReactPropTypes.shape({scaleX: ReactPropTypes.number}),
      ReactPropTypes.shape({scaleY: ReactPropTypes.number}),
      ReactPropTypes.shape({translateX: ReactPropTypes.number}),
      ReactPropTypes.shape({translateY: ReactPropTypes.number}),
      ReactPropTypes.shape({skewX: ReactPropTypes.string}),
      ReactPropTypes.shape({skewY: ReactPropTypes.string})
    ])
  ),

  /**
   * Deprecated. Use the transform prop instead.
   */
  transformMatrix: TransformMatrixPropType,
  /**
   * Deprecated. Use the transform prop instead.
   */

    node: PropTypes.node,
    requiredNode: PropTypes.node.isRequired,
    number: PropTypes.number.isRequired,
    object: PropTypes.object.isRequired,
    string: PropTypes.string.isRequired,
    symbol: PropTypes.symbol.isRequired,
    instanceOf: PropTypes.instanceOf(TestClass).isRequired,
    oneOf: PropTypes.oneOf<'a' | 'b' | 'c'>(['a', 'b', 'c']).isRequired,
    oneOfType: PropTypes.oneOfType(arrayOfTypes).isRequired,
    numberOrFalse: PropTypes.oneOfType([PropTypes.oneOf<false>([false]), PropTypes.number]).isRequired,
    // The generic function type (() => any) is assignable to ReactNode because ReactNode extends the empty object type {}
    // Which widens the array literal of validators to just Array<Requireable<() => any>>
    // It's too risky to change ReactNode to exclude {} even though it's invalid, as it's required for children-as-function props to work
    // So we assert the explicit tuple type
    nodeOrRenderFn: PropTypes.oneOfType([PropTypes.node, PropTypes.func] as [PropTypes.Requireable<ReactNode>, PropTypes.Requireable<() => any>]),
    arrayOf: PropTypes.arrayOf(PropTypes.bool.isRequired).isRequired,
    objectOf: PropTypes.objectOf(PropTypes.number.isRequired).isRequired,
    shape: PropTypes.shape(innerProps).isRequired,
    optionalNumber: PropTypes.number,
    customProp: (() => null) as PropTypes.Validator<typeof uniqueType | undefined>
};

// JS checking
const propTypesWithoutAnnotation = {
    any: PropTypes.any,
    array: PropTypes.array.isRequired,
    bool: PropTypes.bool.isRequired,
    element: PropTypes.element.isRequired,
    func: PropTypes.func.isRequired,
    node: PropTypes.node,
    requiredNode: PropTypes.node.isRequired,