如何使用 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
 */