CODEWITHSUNDEEP
typescriptflowtype
Rigorous implementation
Rigorous implementation

Reputation: 470

How to convert flow to typescript

Hi I have this piece of code and I want to convert from flow to typescript. My progress so far is to convert the type to interface but I am stuck here 

// @flow
export type AlertType = 'success'

export type AlertProps = {
  type: AlertType,
  text: string,
  testId: string,
}

type AlertTypeIconMap = {
  +[AlertType]: IconType,
}

const Alert = ({ type, text, testId }: AlertProps) => {
  const alertTypeIconMap: AlertTypeIconMap = {
    success: 'tick',
  }
  const styles = getStyles({ type })

  return (
      <View style={styles.iconContainer}>
        <Icon type={alertTypeIconMap[type]} />
      </View>
  )
}

export default Alert

my progress so far is 

export type AlertType = 'success'

export interface AlertProps {
  type: AlertType
  text: string
  testId: string
}

interface AlertTypeIconMap {
  +[AlertType]: IconType
}

I am getting an error at this line

interface AlertTypeIconMap {
  +[AlertType]: IconType
}

saying 'AlertType' only refers to a type, but is being used as a value here

Upvotes: 1

Views: 685

Answers (2)

RY_ Zheng
RY_ Zheng

Reputation: 3437

I used flow-to-ts

yarn global add @khanacademy/flow-to-ts
flow-to-ts --write --delete-source ${myProjectPath}/src/**/**.js

There are other options: 

Usage: flow-to-ts [options]

Options:
  -V, --version                    output the version number
  --inline-utility-types           inline utility types when possible, defaults to 'false'
  --prettier                       use prettier for formatting
  --semi                           add semi-colons, defaults to 'false' (depends on --prettier)
  --single-quote                   use single quotes instead of double quotes, defaults to 'false' (depends on --prettier)
  --tab-width [width]              size of tabs (depends on --prettier) (default: 4)
  --trailing-comma [all|es5|none]  where to put trailing commas (depends on --prettier) (default: "all")
  --bracket-spacing                put spaces between braces and contents, defaults to 'false' (depends on --prettier)
  --arrow-parens [avoid|always]    arrow function param list parens (depends on --prettier) (default: "avoid")
  --print-width [width]            line width (depends on --prettier) (default: 80)
  --write                          write output to disk instead of STDOUT
  --delete-source                  delete the source file
  -h, --help                       output usage information

Upvotes: 0

t7yang
t7yang

Reputation: 754

TypeScript syntax is something like this [k in AlertType],

// assume IconType
type IconType = '';

export type AlertType = 'success';

export type AlertTypeIconMap = { [k in AlertType]: IconType };

Upvotes: 1

Related Questions