typescript - page - ¿Hay una manera de agregar métodos sobre la marcha a una clase usando mecanografiado?

router angular navigationend

Question

Estoy intentando crear algún tipo de método mixin que agregue métodos al prototipo / clase sobre la marcha, pero obtengo errores como

La propiedad ''greetName'' no existe en el valor de tipo ''Greeter'' ninguna

y

La propiedad ''greetName'' no existe en el valor de tipo ''Greeter'' ninguna

cuando corro el siguiente código.

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

Greeter.prototype.greetName = function(name){
        return this.greet() + '' '' + name;
}

var greeter = new Greeter(''Mr'');

window.alert(greeter.greetName(''Name''));

En realidad, se compila a js válido y se ejecuta como se esperaba. ¿Hay alguna manera de hacer esto sin las advertencias / errores del compilador?

Answer 1

Así es como RxJS hace RxJS .

import {Observable} from "./observable"; // which is Greeter in your case 


declare module "./observable" {
    interface Observable<T> {
        map<U>(f: (x: T) => U): Observable<U>;
    }
}

Observable.prototype.map = function (f) {

}

Esto se llama módulo de aumento.

Answer 2

Después de tener que implementar métodos y propiedades dinámicas en las clases, esta fue la solución que pude encontrar para evitar que el compilador Typescript se quejara:

...
window.alert(greeter[''greetName''](''Name''));

Básicamente, utilice el método de soporte de los accesores de propiedad .

Answer 3

Esta solución tiene la ventaja de proporcionarle una verificación de tipos cuando agrega dinámicamente un método:

class MyClass {
    start() {

    }
}
var example = new MyClass();
// example.stop(); not allowed


interface MyClass {
  stop(): void;
}

MyClass.prototype[''stop''] = function () {
    alert(''Stop'');
}
var stage2 = example;
stage2.stop();

Answer 4

Hay otra manera de hacer esto.

Greeter["SomeProperty"] = function() {
     return "somevalue";
};

Funciona de la misma manera y usa la función de indexador de propiedades en javascript y no escribe quejas.

Answer 5

Necesitarían un concepto de clases parciales para que esto funcione, que actualmente no es compatible. Le diré que lo que he encontrado que funciona mejor para este tipo de escenarios es utilizar interfaces en lugar de eso (he estado programando en TypeScript durante aproximadamente 6 meses, estoy en MS pero no en el equipo de TypeScript)

Las interfaces son extensibles después del hecho, simplemente definiendo los métodos que está agregando a la interfaz. Como ejemplo de esto, si instala un complemento de jQuery, querrá volver a definir la interfaz IJQuery e IJQueryUtil para incluir los métodos adicionales de los complementos. Desde ese momento en adelante, puede invocar los métodos de los complementos a través de $ .plugin () y TypeScript estará contento.

Answer 6

Similar al ejemplo de @Fenton, pero sin las cosas complicadas:

class MyClass {
    start() {
    }
}
MyClass.prototype[''stop''] = function () {
    alert(''Stop'');
}

interface MyClass {
    stop(): void;
}

var example = new MyClass();
example.stop(); // Allowed!!!