Types in .js/.jsx files

Question

I am trying to read understand the react-grid-layout library, and I am a little confused how can types exist in .js/.jsx files.

Here is an exmple from a .jsx file.

type Props = {
  children: ReactElement<any>,
  cols: number,
  containerWidth: number,
  margin: [number, number],
  containerPadding: [number, number],
  rowHeight: number,
  maxRows: number,
  isDraggable: boolean,
  isResizable: boolean,
  isBounded: boolean,
  static?: boolean,
  useCSSTransforms?: boolean,
  usePercentages?: boolean,
  transformScale: number,
  droppingPosition?: DroppingPosition,

  className: string,
  style?: Object,
  // Draggability
  cancel: string,
  handle: string,

  x: number,
  y: number,
  w: number,
  h: number,

  minW: number,
  maxW: number,
  minH: number,
  maxH: number,
  i: string,

  resizeHandles?: ResizeHandleAxis[],
  resizeHandle?: ResizeHandle,

  onDrag?: GridItemCallback<GridDragEvent>,
  onDragStart?: GridItemCallback<GridDragEvent>,
  onDragStop?: GridItemCallback<GridDragEvent>,
  onResize?: GridItemCallback<GridResizeEvent>,
  onResizeStart?: GridItemCallback<GridResizeEvent>,
  onResizeStop?: GridItemCallback<GridResizeEvent>
};

Is there VSCode extension for this?

Answer 1

The library is using Flow instead of typescript, so it's very similar but slightly different

In the build file here

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          cacheDirectory: true
        }
      }

The "test" attribute will include all js or jsx files

The babelrc reference the flow plugin

 "@babel/preset-flow"

Here is Flow's syntax.

Flow was supposed to be a less intrusive typescript. It encourage gradual, incremental typing similar to python's typing change to the language. Everyone preferred the more intrusive syntax of typescript, and here we are today.