TypeScript 支持JSDoc @property

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

示例代码:
MyController.js

  1. // @ts-check
  2. class MyController {
  3. getWorld() {
  4. return this.world; // <--- Marked as error
  5. }
  6. }
  7. angular
  8. .module('myApp')
  9. .component('myComponent', {
  10. bindings: {
  11. 'world': '<'
  12. },
  13. controller: MyController,
  14. template: `<div>Hello {{$ctrl.getWorld()}}</div>`
  15. });

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

  1. // @ts-check
  2. class MyController {
  3. constructor() {
  4. this.world = this.world;
  5. }
  6. getWorld() {
  7. return this.world;
  8. }
  9. }
  10. [...]

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

ifsvaxew

ifsvaxew1#

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

o4tp2gmn

o4tp2gmn2#

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

6yjfywim

6yjfywim3#

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

  1. class C {
  2. /** @type {string} */ world;
  3. foo() {
  4. this.world;
  5. }
  6. }
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:

  1. /*
  2. * @inject {string} world
  3. */
  4. class MyController {
  5. foo() {
  6. return this.world;
  7. }
  8. }

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:

  1. /**
  2. * @description
  3. * A Person
  4. *
  5. * @class
  6. */
  7. function Person(name) {
  8. /**
  9. * @description
  10. * Name of the person
  11. * @property {String}
  12. */
  13. this.name = name;
  14. /**
  15. * @description
  16. * Another Name of the person
  17. * @property {String}
  18. */
  19. this.anotherName = name;
  20. /**
  21. * @description
  22. * Another Name of the person
  23. * @property {String}
  24. * @name Person#AndEvenMoreNames
  25. */
  26. }
展开查看全部
yh2wf1be

yh2wf1be7#

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

  1. // my-new-type.js
  2. /**
  3. * MyNewType
  4. * @typedef {Object} MyNewType
  5. * @property {Factory~logFirst} logFirst
  6. * @property {Factory~logSecond} logSecond
  7. */
  8. /**
  9. * MyNewType factory
  10. * @constructor
  11. * @param {number} first
  12. * @param {number} second
  13. * @returns MyNewType
  14. */
  15. function Factory(first, second) {
  16. /**
  17. * logs first argument
  18. * @param {number} times
  19. */
  20. function logFirst(times) {
  21. for (let i = 0; i < times; i++) {
  22. console.log(first);
  23. }
  24. }
  25. /**
  26. * logs second argument
  27. * @param {number} times
  28. */
  29. function logSecond(times) {
  30. for (let i = 0; i < times; i++) {
  31. console.log(second);
  32. }
  33. }
  34. return {
  35. logFirst,
  36. logSecond
  37. };
  38. }
  39. module.exports = Factory;

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

展开查看全部

相关问题