如何使用 JSDoc + TypeScript 键入 JavaScript function？

Question

我正在尝试将tsc与普通的 Vanilla JS 一起使用，但我对如何声明类型为 function 感到困惑。

看起来应该是这么简单：

/** @type PersonGreet */
person.greet = function greet(other) {
  return `Hello ${other.name}, my name is ${person.name}!`;
};

简化的测试用例

忽略这样一个事实，即有人可能希望将其重构为使用类或原型或类似的东西——它很好地说明了问题。

回购： https://github.com/BeyondCodeBootcamp/hello-tsc

"use strict";

/**
 * @typedef {Object} Person
 * @property {String} name
 * @property {PersonGreet} greet
 */

/**
 * @typedef {Function} PersonGreet
 * @param {Person} other
 * @returns {String}
 */

let Person = {};

/**
 * Creates a person
 * @param {Object} p
 * @param {String} p.name
 * @returns {Person}
 */
Person.create = function (p) {
  let person = {};

  person.name = p.name;

  /////////////////////////////////////////////////////////////////////////////////
  //
  // error TS7006: Parameter 'other' implicitly has an 'any' type.  <======= WRONG!
  //
  /////////////////////////////////////////////////////////////////////////////////

  /** @type PersonGreet */
  person.greet = function greet(other) {
    return `Hello ${other.name}, my name is ${person.name}!`;
  };

  return person;
};

module.exports = Person;

错误地键入为“任何”

当我运行tsc进行检查时，它给出了一个关于隐式 any 的错误：

tsc -p jsconfig.json

person.js:28:33 - error TS7006: Parameter 'other' implicitly has an 'any' type.

28   person.greet = function greet(other) {
                                   ~~~~~


Found 1 error in person.js:28

该怎么办？

对我来说，这似乎是tsc中的一个错误……但这是 JS 101 的东西，肯定有办法输入 function 吗？

我需要使用什么注释来声明函数的类型？ 或者tsc / tsserver / typescript不能处理这种基本的 JS 使用？

Answer 1

解决方案 1

您应该像这样使用@callback而不是@function ：

"use strict";

/**
 * @typedef {Object} Person
 * @property {String} name
 * @property {PersonGreet} greet
 */

/**
 * @callback PersonGreet
 * @param {Person} other
 * @returns {String}
 */

let Person = {};

/**
 * Creates a person
 * @param {Object} p
 * @param {String} p.name
 * @returns {Person}
 */
Person.create = function (p) {
  let person = {};

  person.name = p.name;

  /** @type {PersonGreet} */
  person.greet = function greet(other) {
    return `Hello ${other.name}, my name is ${person.name}!`;
  };

  return person;
};

module.exports = Person;

解决方案 2

或者，使用 typescript 语法声明@typedef ，如下所示：

/**
 * @typedef {(other: Person) => string} PersonGreet
 */