在 VSCode 中获得正确流的推荐方法？

Question

我在这里阅读了很多关于如何设置 VSCode 以允许在文件顶部启用 // @flow 时对 Javascript 文件进行 linting 的讨论。

我相信我已经正确地实施了一些事情，但仍然收到神秘的错误，这些错误似乎表明情况并非如此。

例如，我在这里得到 classes 的 Missing type annotation for destructuring.Flow(InferError)：

const AddCustomer = ({ classes }) => {

所以我改成这样：

const AddCustomer = ({ classes:any }) => {

但错误仍然存在。

这是我目前 VSCode 的另一个观察结果：

export const useFetch = (initialUrl, initialData) => {

使用这段代码，我得到了两个参数未键入的警告。所以我将代码更改为：

export const useFetch = (initialUrl:string, initialData:any) => {

没有立即发生，但是当我保存文件时警告消失了。不是什么大问题，但这不是我期望 linters 工作的方式。

可能有人对为什么 @flow linting 在我的 VSCode 中工作不正常有任何想法吗？

Answer 1

因此，关于 Missing type annotation for destructuring.Flow(InferError) 的第一个问题，我认为类型放置在错误的位置。语法 ({ classes: any }) 将第一个参数的 classes 属性重命名为 any。可以在 MDN 的页面 Destructuring assignment 中阅读更详尽的解释。要正确指定对象参数的类型，您需要将类型定义放在对象之后

const addCustomer = ({ classes }: { classes: any }) => { ... };

这可能会让人觉得冗长和重复，但想法是将代码与类型分开。例如，客户的类型定义可能是从另一个文件导入的，所以代码看起来更像

// types.js
export type Customer = { classes: any };

// index.js
import type { Customer } from './types';

const addCustomer = ({ classes }: Customer) => { ... };

这允许以任何方式指定参数（例如，不解构）和以任何方式指定类型。

对于第二个问题，请检查以确保设置 flow.runOnEdit 已设置为 true。这将允许 Flow 在不保存的情况下检查您的文件。如果这似乎不能解决问题，那么我会向 VSCode 扩展的维护者提出问题。

在 VSCode 中获得正确流的推荐方法？

Recommended Way to get Proper Linting for Flow in VSCode?

visual-studio-code

flowtype