Skip to content

Instantly share code, notes, and snippets.

@git-init-wesley
Created March 9, 2023 15:12
Show Gist options
  • Save git-init-wesley/d1f15dd301f62f8be1919111e752eec7 to your computer and use it in GitHub Desktop.
Save git-init-wesley/d1f15dd301f62f8be1919111e752eec7 to your computer and use it in GitHub Desktop.
Translation

Fonctionnalité

Le code fourni définit une classe générique appelée Translation qui gère l'injection d'une interface canTranslation et fournit des méthodes pour observer et modifier la valeur de cette interface.

Utilisation

La classe Translation est instanciée avec une valeur current de type T qui implémente l'interface générique canTranslation<T>. Cette valeur peut être modifiée en appelant la méthode set() avec une nouvelle valeur de type T. Les observateurs peuvent s'abonner aux modifications de la valeur en appelant la méthode onChange() qui renvoie un objet Observable.

Logique

La classe Translation utilise un objet BehaviorSubject pour stocker la valeur actuelle de l'interface canTranslation. Lorsque la méthode set() est appelée avec une nouvelle valeur, l'objet onChange de l'ancienne valeur est remplacé par la méthode set() elle-même, puis la nouvelle valeur est affectée à la propriété _current et notifiée aux observateurs via l'objet BehaviorSubject.

La méthode get() renvoie simplement la valeur actuelle de la propriété _current.

Interfaces

L'interface canTranslation<T> est définie avec une méthode onChange qui prend un injecteur de type T en argument. Cette interface est utilisée pour définir les types génériques pour la classe Translation.

Remarques

  • La classe Translation utilise des méthodes fléchées pour définir les méthodes onChange, set, et get. Cela permet d'avoir une syntaxe plus concise et évite d'avoir à utiliser la méthode bind() pour lier this.

  • La propriété _current est initialisée avec la valeur undefined, mais elle est immédiatement remplacée par la valeur current passée en argument au constructeur.

Exemple

Typescript

class ExampleClass implements canTranslation<ExampleClass> {
    value: string = 'My value'

    setValue(newValue: string) {
        value = newValue
        if (this.onChange) this.onChange(this) //Use this

        //Or create a function and use this
        // _update()
    }

    _update(): ExampleClass {
        if (this.onChange) this.onChange(this)
        return this
    }
}

Une classe ExampleClass qui implémente l'interface générique canTranslation avec un type ExampleClass.

La propriété value de la classe ExampleClass est initialisée avec la chaîne de caractères "My value". Cette classe contient également deux méthodes :

  • La méthode setValue(newValue: string) qui prend une chaîne de caractères en argument et modifie la propriété value de la classe avec cette nouvelle valeur. Ensuite, elle vérifie si la propriété onChange existe et, si c'est le cas, appelle cette méthode avec l'instance courante de la classe ExampleClass.
  • La méthode _update(): ExampleClass est une méthode privée qui vérifie si la propriété onChange existe et, si c'est le cas, appelle cette méthode avec l'instance courante de la classe ExampleClass. Elle renvoie ensuite l'instance courante de la classe ExampleClass.

Il est important de noter que la classe ExampleClass est un exemple et que son fonctionnement dépend de l'interface canTranslation et des types spécifiques qui peuvent être utilisés avec elle.

Svelte | HTML | Others

let exampleClass: ExampleClass = new ExampleClass()

const translation = new Translation<ExampleClass>(exampleClass)

translation.onChange().subscribe((next) => {
    if (next) exampleClass = next
})

//Render : 'My value'

exampleClass.setValue('My new value')

//Render with Translation after setValue : 'My new value'
//Render without Translation after setValue : 'My value'

Une instance de la classe ExampleClass et la stocke dans une variable exampleClass. Ensuite, il crée une instance de la classe générique Translation en utilisant ExampleClass comme type générique. Cette instance de Translation est initialisée avec l'instance de ExampleClass créée précédemment.

La méthode onChange de l'objet translation est souscrite en utilisant la méthode subscribe de l'observable renvoyé. Lorsque l'événement onChange est déclenché, la nouvelle valeur est stockée dans exampleClass (si elle n'est pas undefined).

La méthode setValue de exampleClass est appelée avec la chaîne de caractères "My new value". Si onChange existe, elle appelle cette méthode avec l'instance courante de la classe ExampleClass. Dans ce cas, la nouvelle valeur de exampleClass est stockée dans l'objet translation. Si onChange n'existe pas, exampleClass est simplement mis à jour avec la nouvelle valeur.

Ainsi, si la méthode setValue est appelée sur exampleClass sans utiliser l'objet translation, la valeur de exampleClass sera mise à jour mais la valeur stockée dans translation ne le sera pas. En revanche, si setValue est appelée en utilisant l'objet translation, la valeur de exampleClass sera mise à jour et la nouvelle valeur sera stockée dans translation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment