如何纠正流警告:解构(缺少注释)

IT技术 javascript reactjs react-native flowtype
2021-04-30 20:29:05

我正在编写一个小型 React Native 应用程序并且我正在尝试使用 Flow,但我无法在任何地方获得有关它的正确教程。

我不断收到错误消息:destructuring (Missing annotation)关于({ station })此代码的第一行:

const StationDetail = ({ station }) => {
  const {
    code,
    label,
  } = station;

station是一个JSON响应codelabelstrings其内部JSON

如何修复错误/警告?

3个回答

我会把这个写成

type StationType = {
  code: String,
  label: String,
}

function StationDetail({ station } : {station : StationType}) => {
  const {
    code,
    label,
} = station;

需要声明函数接受的对象参数的类型。

我尝试了您的示例并得到了No errors!,因为 Flow 不需要对私有函数进行类型注释。

如果相反,我添加了export这样的:

// @flow
export const StationDetail = ({ station }) => {
  const {
    code,
    label,
  } = station;
  return code + label;
};

我收到以下错误。(我认为这与您所看到的足够接近。)

Error: 41443242.js:2
  2: export const StationDetail = ({ station }) => {
                                   ^^^^^^^^^^^ destructuring. Missing annotation


Found 1 error

你至少可以通过两种方式解决这个问题。更好的方法是为函数参数添加类型注释。例如:

export const StationDetail =
  ({ station }: { station: { code: number, label: string } }) =>

或者

export const StationDetail =
  ({ station }: {| station: {| code: string, label: string |} |}) =>

甚至

type Code = 1 | 2 | 3 | 4 | 5 | 6;
type Radio ={|
  station: {| code: Code, label: string |},
  signalStrength: number,
  volume: number,
  isMuted: bool,
|};
export const StationDetail = ({ station }: Radio) =>
  ...

如果您想确保StationDetail始终使用适当的 Radio 对象调用 ,即使当前实现只查看该station字段。

另一种选择是将第一个注释更改为// @flow weak并让 Flow 自行推断参数类型。这就是 Less Good™,因为它更容易意外更改您的公共 API,并使您的实际意图不那么明确。

为了对象解构工作,您应该在赋值的右侧提供适当的对象结构。在这种特殊情况下{station},函数参数(赋值的左侧)应该由类似{station:{code: "stg", label:"stg"}}. 确保您StationDetail使用适当的对象作为参数调用函数。

var StationDetail = ({ station }) => {
  var {code, label} = station;
  console.log(code,label);
},
    data = {station: {code: 10, label:"name"}};

StationDetail(data);