Est-il possible d'utiliser des getters/setters dans la définition d'une interface ?

Question

En ce moment, TypeScript ne permet pas d'utiliser les méthodes get/set (accesseurs) dans les interfaces. Par exemple :

interface I {
      get name():string;
}

class C implements I {
      get name():string {
          return null;
      } 
}

En outre, TypeScript ne permet pas l'utilisation de l'expression Array Function dans les méthodes de classe : par exemple.. :

class C {
    private _name:string;

    get name():string => this._name;
}

Existe-t-il un autre moyen d'utiliser un getter et un setter sur une définition d'interface ?

Answer 1

Vous pouvez spécifier la propriété sur l'interface, mais vous ne pouvez pas imposer l'utilisation de getters et setters, comme ceci :

interface IExample {
    Name: string;
}

class Example implements IExample {
    private _name: string = "Bob";

    public get Name() {
        return this._name;
    }

    public set Name(value) {
        this._name = value;
    }
}

var example = new Example();
alert(example.Name);

Dans cet exemple, l'interface ne force pas la classe à utiliser des getters et setters, j'aurais pu utiliser une propriété à la place (exemple ci-dessous) - mais l'interface est censée cacher ces détails d'implémentation de toute façon puisqu'elle est une promesse au code appelant sur ce qu'il peut appeler.

interface IExample {
    Name: string;
}

class Example implements IExample {
    // this satisfies the interface just the same
    public Name: string = "Bob";
}

var example = new Example();
alert(example.Name);

Et enfin, => n'est pas autorisé pour les méthodes de classe - vous pourriez lancer une discussion sur Codeplex si vous pensez qu'il y a un cas d'utilisation brûlant pour cela. Voici un exemple :

class Test {
    // Yes
    getName = () => 'Steve';

    // No
    getName() => 'Steve';

    // No
    get name() => 'Steve';
}

Answer 2

Pour compléter les autres réponses, si votre désir est de définir une get value sur une interface, vous pouvez utiliser readonly :

interface Foo {
  readonly value: number;
}

let foo: Foo = { value: 10 };

foo.value = 20; //error

class Bar implements Foo {
  get value() {
    return 10;
  }
}

mais pour autant que je sache, et comme d'autres l'ont mentionné, il n'y a actuellement aucun moyen de définir une propriété de type set-only dans l'interface. Vous pouvez cependant déplacer la limitation vers une erreur d'exécution (utile uniquement pendant le cycle de développement) :

interface Foo {
  /* Set Only! */
  value: number;
}

class Bar implements Foo {
  _value:number;
  set value(value: number) {
    this._value = value;
  }
  get value() {
    throw Error("Not Supported Exception");
  }
}

Pratique non recommandée mais une option.

Answer 3

Tout d'abord, Typescript ne supporte que get y set syntaxe lors du ciblage d'Ecmascript 5. Pour cela, il faut appeler le compilateur avec

tsc --target ES5

Les interfaces ne supportent pas les getters et setters. Pour que votre code compile, vous devriez le changer en

interface I { 
    getName():string;
}

class C implements I { 
    getName():string {
          return null;
    }   
}

Ce que typescript supporte, c'est une syntaxe spéciale pour les champs dans les constructeurs. Dans votre cas, vous pourriez avoir

interface I {
    getName():string;
}

class C implements I {
    constructor(public name: string) {
    }
    getName():string {
        return name;
    }
}

Remarquez comment la classe C ne spécifie pas le champ name . Il est en fait déclaré en utilisant un sucre syntaxique public name: string dans le constructeur.

Comme le souligne Sohnee, l'interface est en fait censée cacher tous les détails de l'implémentation. Dans mon exemple, j'ai choisi l'interface pour exiger une méthode getter de style java. Cependant, vous pouvez également définir une propriété et laisser la classe décider de l'implémentation de l'interface.

Answer 4

Utilisation de TypeScript 3.4 :

interface IPart {
    getQuantity(): number;
}

class Part implements IPart {
    private quantity: number;
    constructor(quantity: number) {
        this.quantity = quantity;
    }
    public getQuantity = (): number => {
        return this.quantity;
    };
}

let part = new Part(42);

// When used in typescript, quantity is not accessible.
// However, when compiled to javascript it will log '42'.
console.log(part.quantity);

// Logs '42'.
console.log(part.getQuantity());

Voir l'exemple sur [Terrain de jeu TypeScript](https://www.typescriptlang.org/play/#src=interface%20IPart%20%7B%0D%0A%20%20%20%20getQuantity()%3A%20number%3B%0D%0A%7D%0D%0A%0D%0Aclass%20Part%20implements%20IPart%20%7B%0D%0A%20%20%20%20private%20quantity%3A%20number%3B%0D%0A%20%20%20%20constructor(quantity%3A%20number)%20%7B%0D%0A%20%20%20%20%20%20%20%20this.quantity%20%3D%20quantity%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20public%20getQuantity%20%3D%20()%3A%20number%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20this.quantity%3B%0D%0A%20%20%20%20%7D%3B%0D%0A%7D%0D%0A%0D%0Alet%20part%20%3D%20new%20Part(42)%3B%0D%0A%0D%0A%2F%2F%20When%20used%20in%20typescript%2C%20quantity%20is%20not%20accessible.%0D%0A%2F%2F%20However%2C%20when%20compiled%20to%20javascript%20it%20will%20log%20'42'.%0D%0Aconsole.log(part.quantity)%3B%0D%0A%0D%0A%2F%2F%20Logs%20'42'.%0D%0Aconsole.log(part.getQuantity())%3B) .