Saltar al contenido

como definir static propiedad en la interfaz de TypeScript

Este dilema se puede resolver de diversas formas, pero nosotros te mostramos la que para nosotros es la solución más completa.

Solución:

Siga la respuesta de @Duncan @Bartvds, aquí para proporcionar una forma viable después de que hayan pasado años.

En este punto, después del lanzamiento de Typescript 1.5 (@Jun 15 '15), su útil interfaz

interface MyType 
    instanceMethod();


interface MyTypeStatic 
    new():MyType;
    staticMethod();

se puede implementar de esta manera con la ayuda de decorador.

/* class decorator */
function staticImplements() 
    return (constructor: U) => constructor;


@staticImplements()   /* this statement implements both normal interface & static interface */
class MyTypeClass { /* implements MyType  */ /* so this become optional not required */
    public static staticMethod() 
    instanceMethod() 

Consulte mi comentario en el problema de github 13462.

resultado visual: error de compilación con un toque de static falta el método.
ingrese la descripción de la imagen aquí

Después static método implementado, falta una sugerencia para el método.
ingrese la descripción de la imagen aquí

Compilación pasada después de ambos static Interfaz e interfaz normal cumplidas.
ingrese la descripción de la imagen aquí

No puedes definir un static propiedad en una interfaz en TypeScript.

Digamos que querías cambiar el Date objeto, en lugar de tratar de agregar a las definiciones de Datepodría envolverlo, o simplemente crear su clase de fecha enriquecida para hacer las cosas que Date no lo hace

class RichDate 
    public static MinValue = new Date();

Debido a que Date es una interfaz en TypeScript, no puede extenderla con una clase usando el extends palabra clave, lo cual es un poco vergonzoso, ya que sería una buena solución si la fecha fuera una clase.

Si desea ampliar el objeto Fecha para proporcionar una MinValue propiedad en el prototipo, puede:

interface Date 
    MinValue: Date;


Date.prototype.MinValue = new Date(0);

Llamado usando:

var x = new Date();
console.log(x.MinValue);

Y si desea que esté disponible sin una instancia, también puede hacerlo... pero es un poco complicado.

interface DateStatic extends Date 
    MinValue: Date;


Date['MinValue'] = new Date(0);

Llamado usando:

var x: DateStatic = Date; // We aren't using an instance
console.log(x.MinValue);

Puede definir la interfaz normalmente:

interface MyInterface 
    Name:string;

pero no puedes simplemente hacer

class MyClass implements MyInterface 
    static Name:string; // typescript won't care about this field
    Name:string;         // and demand this one instead

Para expresar que una clase debe seguir esta interfaz para su static propiedades que necesita un poco de engaño:

var MyClass: MyInterface;
MyClass = class 
    static Name:string; // if the class doesn't have that field it won't compile

Incluso puede mantener el nombre de la clase, TypeScript (2.0) no le importará:

var MyClass: MyInterface;
MyClass = class MyClass 
    static Name:string; // if the class doesn't have that field it won't compile

Si desea heredar estáticamente de muchas interfaces, primero deberá fusionarlas en una nueva:

interface NameInterface 
    Name:string;

interface AddressInterface 
    Address:string;

interface NameAndAddressInterface extends NameInterface, AddressInterface  
var MyClass: NameAndAddressInterface;
MyClass = class MyClass 
    static Name:string; // if the class doesn't have that static field code won't compile
    static Address:string; // if the class doesn't have that static field code won't compile

O si no desea nombrar la interfaz combinada, puede hacerlo:

interface NameInterface 
    Name:string;

interface AddressInterface 
    Address:string;

var MyClass: NameInterface & AddressInterface;
MyClass = class MyClass 
    static Name:string; // if the class doesn't have that static field code won't compile
    static Address:string; // if the class doesn't have that static field code won't compile

ejemplo de trabajo

Recuerda que puedes comunicar este tutorial si si solucionó tu problema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada.