TypeScript to Flow

import React from 'react';
export interface Props {
  /** The user's name */
  name: string;
  /** Should the name be rendered in bold */
  priority?: boolean
}
export interface FauxactClassComponent<Props extends {}, State = {}> {
  props: Props
  state: State
  setState: (prevState: State, props: Props) => Props
  callback?: () => void
  render(): FauxactClassComponent<any> | null
}
export const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>{props.name}</p>
    </div>
  )
}
export const ShowUser: React.FC<Props> = (props) => {
  return <PrintName name="Ned" />
}
let username = "Cersei"
export const ShowStoredUser: React.FC<Props> = (props) => {
  return <PrintName name={username} priority />
}

Enter to Rename, Shift+Enter to Preview

Flow

This code is converted on the server.

import React from "react";
export interface Props {
  /**
   * The user's name
   */
  name: string;
  /**
   * Should the name be rendered in bold
   */
  priority?: boolean;
}
export interface FauxactClassComponent<Props: { ... }, State = { ... }> {
  props: Props;
  state: State;
  setState: (prevState: State, props: Props) => Props;
  callback?: () => void;
  render(): FauxactClassComponent<any> | null;
}
declare export var PrintName: React.FC<Props>;
declare export var ShowUser: React.FC<Props>;
declare var username: "Cersei";
declare export var ShowStoredUser: React.FC<Props>;
import { useState, useEffect } from "react";
declare export var CounterExample: React.FC<{ ... }>;

Enter to Rename, Shift+Enter to Preview