如何使用 JSDoc + TypeScript 输入 JavaScript 函数？

Question

更新（2023）

我实际上做了一个关于如何获得

tsc

+ JSDoc 的演讲来回答这个问题以及更多问题：

• https://jswithtypes.com

并创建了一个包来帮助处理

tsconfig

样板：

• https://npmjs.org/jswt

  npx jswt init
  

原始问题

我正在尝试将

tsc

与普通的 Vanilla JS 一起使用，但我对如何将类型声明为函数感到困惑。

看起来应该就这么简单：

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

编辑：

/** @type PersonGreet */

正确。当前的行为是 tsc 中的 错误。下面选定的答案提供了有效的解决方法。

减少测试用例

忽略这样一个事实：有人可能想将其重构为使用类或原型或类似的东西 - 它很好地演示了问题。

回购：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;

错误地输入了“any”

当我运行

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 的东西，肯定有一种方法来输入函数？

我需要使用什么注释来声明函数的类型？或者

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

或者，使用如下所示的打字稿语法声明

@typedef

：

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