TypeScript 支持JSDoc @property

20jt8wwn  于 4个月前  发布在  TypeScript
关注(0)|答案(7)|浏览(139)
  • 2017年5月8日9:1*
  • VSCode版本:1.12.1
  • 操作系统版本:Ubuntu 16.04.1 LTS(Xenial Xerus)

示例代码:
MyController.js

// @ts-check
class MyController {
    getWorld() {
        return this.world; // <--- Marked as error
    }
}
angular
    .module('myApp')
    .component('myComponent', {
        bindings: {
            'world': '<'
        },
        controller: MyController,
        template: `<div>Hello {{$ctrl.getWorld()}}</div>`
    });

标记为错误的 this.world 是预期的。但实际上很烦人,因为在Angular中,你需要经常使用这些组件绑定。我知道有一个选项 // @ts-ignore ,但这真的会污染代码,使它更难阅读。
对于这个问题的一个扩展将非常有用。
我现在使用的解决方法是

// @ts-check
class MyController {
    constructor() {
        this.world = this.world;
    }
    getWorld() {
        return this.world;
    }
}

[...]

我一点都不喜欢这种方法,但比写 // @ts-ignore 要好。
还有其他选择/解决方法吗?

ifsvaxew

ifsvaxew1#

是的,我认为在构造函数中添加声明是解决这个问题的适当方法。当TypeScript看到MyController类时,它无法知道该类将与一组绑定一起使用。
@mhegazy / @chuckjaz对此有任何其他想法吗?Angular语言服务能在这里提供帮助吗?

o4tp2gmn

o4tp2gmn2#

关于这个问题,你有什么其他的想法吗?Angular语言服务能帮忙解决吗?
实际上,AngularJS(1.x)和Angular(2+)非常不同。你可以创建一个专门抑制错误的语言服务并增强补全功能,但这是一个糟糕的想法。

6yjfywim

6yjfywim3#

BrunnerLivio,你是在使用类似Babel的东西,还是仅仅针对ES6运行时?如果你使用的是编译器,你可以像这样声明你的类属性,并使用适当的插件:

class C {
    /** @type {string} */ world;
    
    foo() {
        this.world;
    }
}
nvbavucw

nvbavucw4#

@DanielRosenwasser no, I'm not using Babel, I target a ES6 runtime. But thanks for the tip.
What about a more general solution (not AngularJS specific)? Maybe defining in a JSDoc comment above a Class, which properties get injected into a class.
For Example:

/*
* @inject {string} world
*/
class MyController {
  foo() {
    return this.world;
  }
}

Unfortunately @inject does not exist in JSDoc, but maybe you can use @property. But the definition of @Property is not fitting:
The @Property tag is a way to easily document a list of static properties of a class, namespace or other object.
Maybe other options?

bnl4lu3b

bnl4lu3b5#

我认为,@property 是最好的选择。

omqzjyyz

omqzjyyz6#

See #28440 for another example of property tag usage:

/**
* @description
* A Person
*
* @class
*/
function Person(name) {
    /**
* @description
* Name of the person
* @property {String}
*/
    this.name = name;

    /**
* @description
* Another Name of the person
* @property {String}
*/
    this.anotherName = name;

    /**
* @description
* Another Name of the person
* @property {String}
* @name Person#AndEvenMoreNames
*/
}
yh2wf1be

yh2wf1be7#

好的,我在这里复制我的案例:

// my-new-type.js

/**
* MyNewType
* @typedef {Object} MyNewType
* @property {Factory~logFirst} logFirst
* @property {Factory~logSecond} logSecond
*/

/**
* MyNewType factory
* @constructor
* @param {number} first
* @param {number} second
* @returns MyNewType
*/
function Factory(first, second) {
  /**
* logs first argument
* @param {number} times
*/
  function logFirst(times) {
    for (let i = 0; i < times; i++) {
      console.log(first);
    }
  }

  /**
* logs second argument
* @param {number} times
*/
  function logSecond(times) {
    for (let i = 0; i < times; i++) {
      console.log(second);
    }
  }

  return {
    logFirst,
    logSecond
  };
}

module.exports = Factory;

上面的例子目前不起作用,因为它“看不到”子方法。
这不仅仅是关于 @property 的问题,还涉及到支持 jsdoc namepath 的问题。
http://usejsdoc.org/about-namepaths.html
感谢创建了一个很棒的产品。
此致,

相关问题