Flow报错：函数隐式this参数缺少注解[missing-this-annot]的修复方案

这个错误是因为Flow无法推断出init函数中this的类型，必须显式给this参数添加类型注解。以下是具体修复方案：

1. 定义模块类型别名 #

先在代码开头声明导出对象的结构类型，让Flow明确模块的整体结构：

// @flow
/**
 * My database module.
 *
 * Interact with the database.
 */
'use strict';

// 定义模块的类型别名，明确各方法的类型
type DatabaseModule = {
  mongoose: () => Object,
  env: () => Object,
  init: (
    callbackOK: () => number,
    callbackInitError: (x: string) => null,
    callbackError: (x: string) => null
  ) => void,
  uri: () => string,
};

2. 给使用this的函数添加类型注解 #

在init和uri函数的参数列表最前面，添加this: DatabaseModule注解，告诉Flow当前函数中this的类型：

修复后的init函数 #

init: function(
  this: DatabaseModule,
  callbackOK /*:: : () => number */,
  callbackInitError /*:: : (x: string) => null */,
  callbackError /*:: : (x: string) => null */
) {
  try {
    this.mongoose().connect(this.uri(), {}).then(
      () => callbackOK(),
      err => callbackInitError(String(err)), // 额外修复：将Error转为string匹配回调参数类型
    );
    this.mongoose().connection.on('error',
      err => callbackError(String(err)), // 同样转为string
    );
  }
  catch (err) {
    callbackInitError(String(err)); // 转为string
  }
},

修复后的uri函数 #

uri: function(this: DatabaseModule) /*:: : string */ {
  const user = String(this.env().required('MONGO_USER'));
  const pass = String(this.env().required('MONGO_PASS'));
  const host = String(this.env().required('MONGO_HOST'));
  const port = String(this.env().required('MONGO_PORT'));
  const db = String(this.env().required('MONGO_DB'));

  return 'mongodb://' + user + ':' + pass + '@' + host + ':' + port + '/' + db + '?authSource=admin';
},

额外说明 #

• 额外将err转为String(err)是因为回调函数要求参数为string类型，原生Error对象直接传入会触发Flow类型检查错误。
• 若不想单独定义类型别名，也可以直接在this注解中使用对象字面量类型，比如this: { mongoose: () => Object, env: () => Object, uri: () => string }，但类型别名更便于维护。

完整修复代码 #

// @flow
/**
 * My database module.
 *
 * Interact with the database.
 */
'use strict';

type DatabaseModule = {
  mongoose: () => Object,
  env: () => Object,
  init: (
    callbackOK: () => number,
    callbackInitError: (x: string) => null,
    callbackError: (x: string) => null
  ) => void,
  uri: () => string,
};

module.exports = {

  /** Mockable wrapper around mongoose. */
  mongoose: function() /*:: : Object */ {
    // $FlowExpectedError
    return require('mongoose');
  },

  /** Mockable wrapper around env. */
  env: function() /*:: : Object */ {
    // $FlowExpectedError
    return require('./env.js');
  },

  /** Initialize the connection to Mongoose. */
  init: function(
    this: DatabaseModule,
    callbackOK /*:: : () => number */,
    callbackInitError /*:: : (x: string) => null */,
    callbackError /*:: : (x: string) => null */
  ) {
    try {
      this.mongoose().connect(this.uri(), {}).then(
        () => callbackOK(),
        err => callbackInitError(String(err)),
      );
      this.mongoose().connection.on('error',
        err => callbackError(String(err)),
      );
    }
    catch (err) {
      callbackInitError(String(err));
    }
  },

  /** Get the connection URI for the Mongoose database. */
  uri: function(this: DatabaseModule) /*:: : string */ {
    const user = String(this.env().required('MONGO_USER'));
    const pass = String(this.env().required('MONGO_PASS'));
    const host = String(this.env().required('MONGO_HOST'));
    const port = String(this.env().required('MONGO_PORT'));
    const db = String(this.env().required('MONGO_DB'));

    return 'mongodb://' + user + ':' + pass + '@' + host + ':' + port + '/' + db + '?authSource=admin';
  },
};

内容的提问来源于stack exchange，提问作者alberto56