web-dev-qa-db-fra.com

Comment implémenter les constantes de classe en dactylographie?

Dans TypeScript, le mot clé const ne peut pas être utilisé pour déclarer les propriétés de la classe. Cela entraînerait une erreur du compilateur avec "Un membre de la classe ne peut pas avoir le mot clé" const "."

Je me trouve dans le besoin d'indiquer clairement dans le code qu'une propriété ne devrait pas être changée. Je veux que le IDE ou le compilateur génère une erreur si j'essaie d'attribuer une nouvelle valeur à la propriété une fois qu'elle a été déclarée. Comment faites-vous cela?

J'utilise actuellement une propriété en lecture seule, mais je suis novice dans TypeScript (et JavaScript) et je me demande s'il existe un meilleur moyen:

get MY_CONSTANT():number {return 10};

J'utilise TypeScript 1.8. Suggestions?

PS: J'utilise maintenant TypeScript 2.0.3, alors j'ai accepté réponse de David

typescriptclass-constants
337
BeetleJuice

TypeScript 2.0 a le modificateur readonly) :

class MyClass {
    readonly myReadOnlyProperty = 1;

    myMethod() {
        console.log(this.myReadOnlyProperty);
        this.myReadOnlyProperty = 5; // error, readonly
    }
}

new MyClass().myReadOnlyProperty = 5; // error, readonly

Ce n'est pas exactement une constante car cela permet une affectation dans le constructeur, mais ce n'est probablement pas grave.

Solution alternative

Une alternative consiste à utiliser le mot clé static avec readonly:

class MyClass {
    static readonly myReadOnlyProperty = 1;

    constructor() {
        MyClass.myReadOnlyProperty = 5; // error, readonly
    }

    myMethod() {
        console.log(MyClass.myReadOnlyProperty);
        MyClass.myReadOnlyProperty = 5; // error, readonly
    }
}

MyClass.myReadOnlyProperty = 5; // error, readonly

Cela présente l'avantage de ne pas être assignable dans le constructeur et d'exister uniquement à un endroit.

507
David Sherret

Les constantes peuvent être déclarées en dehors des classes et utilisées dans votre classe. Sinon, la propriété get est une solution de contournement de Nice

const MY_CONSTANT: string = "wazzup";

export class MyClass {

    public myFunction() {

        alert(MY_CONSTANT);
    }
}
54
j3ff

Vous pouvez marquer des propriétés avec le modificateur readonly dans votre déclaration:

export class MyClass {
  public static readonly MY_PUBLIC_CONSTANT = 10;
  private static readonly myPrivateConstant = 5;
}

@see TypeScript Deep Dive book - en lecture seule

28
am0wa

Angular 2 fournit une fonctionnalité très agréable appelée Constantes opaques. Créez une classe et définissez toutes les constantes à l'aide de constantes opaques.

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("my.config");

export interface MyAppConfig {
    apiEndpoint: string;
}

export const AppConfig: MyAppConfig = {    
    apiEndpoint: "http://localhost:8080/api/"    
};

Injectez-le dans les fournisseurs dans app.module.ts

Vous pourrez l'utiliser sur tous les composants.

EDIT pour Angular 4:

Pour Angular 4, le nouveau concept est le jeton d'injection et le jeton opaque est déconseillé dans Angular 4.

Jeton d'injection Ajoute des fonctionnalités au-dessus des jetons opaques, il permet d'attacher des informations de type sur le jeton via des génériques TypeScript, plus des jetons d'injection, éliminant la nécessité d'ajouter @Inject.

Exemple de code

Angular 2 en utilisant des jetons opaques

const API_URL = new OpaqueToken('apiUrl'); //no Type Check


providers: [
  {
    provide: DataService,
    useFactory: (http, apiUrl) => {
      // create data service
    },
    deps: [
      Http,
      new Inject(API_URL) //notice the new Inject
    ]
  }
]

Angular 4 Utilisation de jetons d'injection

const API_URL = new InjectionToken<string>('apiUrl'); // generic defines return value of injector


providers: [
  {
    provide: DataService,
    useFactory: (http, apiUrl) => {
      // create data service
    },
    deps: [
      Http,
      API_URL // no `new Inject()` needed!
    ]
  }
]

Les jetons d'injection sont conçus de manière logique au-dessus des jetons Opaque et les jetons Opaque sont déconseillés dans Angular 4.

8
Parth Ghiya

Vous pouvez utiliser le modificateur readOnly avec la constante à déclarer ou vous pouvez déclarer une constante en dehors de la classe et l’utiliser spécifiquement dans la classe requise à l’aide de l’opérateur get.

4
kg11

Pour cela, vous pouvez utiliser le modificateur readonly. Les propriétés d'objet readonly ne peuvent être affectées que lors de l'initialisation de l'objet.

Exemple dans les classes:

class Circle {
  readonly radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  get area() {
    return Math.PI * this.radius * 2;
  }
}

const circle = new Circle(12);
circle.radius = 12; // Cannot assign to 'radius' because it is a read-only property.

Exemple en littéraux d'objet:

type Rectangle = {
  readonly height: number;
  readonly width: number;
};

const square: Rectangle = { height: 1, width: 2 };
square.height = 5 // Cannot assign to 'height' because it is a read-only property

Il faut également savoir que le modificateur readonly est purement une construction TypeScript et que, lorsque le TS est compilé en JS, la construction ne sera pas présente dans le JS compilé. Lorsque nous modifions des propriétés en lecture seule, le compilateur TS nous en avertit (il s'agit de JS valide).

1
Willem van der Veen