javascript - 来自外部文件的流类型导入类型 - 名称已绑定(bind)

Question

我有以下组件:

// @flow

import React from 'react';

import TEA_DATA from './Tea.data';
import TeaInfo from './TeaInfo.component';

const Tea = () => <TeaInfo teaData={TEA_DATA}/>;

export default Tea;

然后我有以下 Tea.data.types.js 文件:

// @flow

export type id = string;
export type image = string;
export type header = string;
export type text = Array<string>;
export type brewTime = Array<any>;

export type TEA_DATA = {
  id: id,
  image: image,
  header: header,
  text: text,
  brewTime: brewTime
};

然后我有以下 tea.data.js 文件:

// @flow

import black from '../images/blacktea.png';
import white from '../images/whitetea.png';
import oolong from '../images/oolongtea.png';
import green from '../images/greentea.png';

import type TEA_DATA from './Tea.data.types';

const TEA_DATA = [{
  id: 'wtid',
  image: white,
  header: 'White tea',
  text: [
    "Currently there is no generally accepted definition of white tea and very little international agreement - some sources use the term to refer to tea that is merely dried with no additional processing, some to tea made from the buds and immature tea leaves picked shortly before the buds have fully opened and allowed to wither and dry in natural sun,[citation needed] while others include tea buds and very young leaves which have been steamed or fired before drying. Most definitions agree, however, that white tea is not rolled or oxidized, resulting in a flavour characterized as \"lighter\" than green or traditional black teas.",
    "In spite of its name, brewed white tea is pale yellow. Its name derives from the fine silvery-white hairs on the unopened buds of the tea plant, which give the plant a whitish appearance. It is harvested primarily in China, mostly in the Fujian province, but more recently produced in Eastern Nepal, Taiwan, Northern Thailand, Galle (Southern Sri Lanka) and India."
  ],
  brewTime: {
    mild: 1,
    strong: 3
  }
}...];

export default TEA_DATA;

根据flow docs这是导入数据类型的正确方法，但我收到以下错误:

src/Tea/Tea.data.js:10 10: const TEA_DATA = [{ ^^^^^^^^ TEA_DATA. name is already bound 8: import type TEA_DATA from './Tea.data.types'; ^^^^^^^^ type TEA_DATA

src/Tea/Tea.data.js:58 58: export default TEA_DATA; ^^^^^^^^ TEA_DATA. type referenced from value position 8: import type TEA_DATA from './Tea.data.types'; ^^^^^^^^ type TEA_DATA

我做错了什么？

Answer 1

您只需将您的类型命名为不同的名称即可。 Flow 不允许您在同一范围内同时拥有同名的类型和值。您已导入类型 TEA_DATA，并且还在同一文件中命名了常量 TEA_DATA。

此外，在这种情况下您应该使用

import type {TEA_DATA} from './Tea.data.types';

(注意用于解构的花括号)，以便您仅导入类型 TEA_DATA 而不是整个模块。