代码之家 › 专栏 › 技术社区 › Rigorous implementation

如何将流转换为typescript

flowtype typescript

Rigorous implementation · 技术社区 · 7 年前

嗨,我有这段代码,我想从flow转换成typescript。到目前为止,我的进展是将类型转换为接口,但我被困在这里

// @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

到目前为止,我的进步很快

export type AlertType = 'success'

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

interface AlertTypeIconMap {
  +[AlertType]: IconType
}

我在这一行遇到了一个错误

interface AlertTypeIconMap {
  +[AlertType]: IconType
}

说“AlertType”只是指一个类型,但在这里用作值

1 回复 | 直到 7 年前

t7yang 7 年前

TypeScript语法是这样的 [k in AlertType] ,

// assume IconType
type IconType = '';

export type AlertType = 'success';

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

RY_ Zheng 6 年前

flow-to-ts

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

还有其他选择:

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

推荐文章

Christopher Francisco · 流-缓存公共变量检查时,读取联合类型属性不起作用

8 年前

David Schumann Axnyff · 使用react native中无状态功能组件的流定义属性类型

8 年前

JD. · 流-可能类型与看似有效的默认对象参数不兼容

8 年前

arnoldbird · 如何使用非字符串引用而不导致流错误

8 年前

Andy Haskell · 为什么Web包在我的主目录中查找预设?

8 年前

Ilja · 扩展flow“type Props”以包括来自其他组件的道具类型?

8 年前

Soichi Takamura · 流类型是否可以在方法链接中收紧实例的方法定义

8 年前

Janekx · 如何构建流程

8 年前

Daniel Jung · eslint无法解析$ReadOnlyArray

8 年前

Saad · Flowtype libdefs如何从其他libdef导入类型?

8 年前