В старом стиле прототипа «[js]« this »неявно имеет тип« any », потому что у него нет аннотации типа».

Question

Я пытаюсь комментировать типы в моем старом коде JavaScript.У меня проблемы с this при использовании prototype определений классов.

Например, в:

/**
 * @constructor 
 * @param {string} name
 * @type {Animal}
 */
function Animal(name){
    this.name=name;
}

Animal.prototype.show = function show(){
    console.log(this.name);
}

var a = new Animal("bob");
a.show();

Я получаю:

Когда я использую стиль класса, у меня нет никаких проблем:

class AnimalClass{
    /**
     * @param {string} name
     */
    constructor(name){
        this.name=name;
    }

    show(){
        console.log(this.name);
    }
}

var animal = new AnimalClass("bob");
animal.show();

Мой tsconfig.json:

{
  "compilerOptions": {
    "lib":["es2017", "es2015", "dom"],
    "noImplicitAny": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
    "strict": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "checkJs": true,
    "noImplicitThis": true
  }
}

Мой вопрос заключается в том, как аннотировать тип в старом стиле JavaScript.

Answer 1

Помимо синтаксического сахара, классы ES6 по своей природе обеспечивают правильную типизацию в TypeScript, в то время как обычные функции должны вводиться явно.

Этот класс

function Foo() {};

Foo.prototype.bar = function () {
    this.baz;
};

становится

interface Foo {
    bar(): void;
    baz: any;
}

interface FooStatic {
    new(): Foo;
}

const Foo = <FooStatic><Function>function Foo(this: Foo) {};

Foo.prototype.bar = function (this: Foo) {
    this.baz;
};

для правильной типизации.

Тот же класс может быть типично введен как класс ES6:

class Foo {
    baz: any;
    bar() {
        this.baz;
    }
}