Typescript: Définir la classe et ses méthodes dans des fichiers séparés

Question

est-il possible de déclarer une classe dans un fichier et de définir ses méthodes dans des fichiers séparés?

J'ai des classes avec beaucoup de méthodes et ce serait génial si je pouvais les diffuser un peu.

Answer 1

Réponse courte: TypeScript ne prend pas en charge la division d'une définition de classe dans plusieurs fichiers.

Solution de contournement : Vous pouvez définir une interface contenant des membres pour la classe et deux classes différentes implémentant cette interface. Ensuite, mélangez les propriétés d'une classe à l'autre, pour faire une classe combinée. Par exemple:

largeclass.a.ts

interface LargeClass {
   methodA(): string;
   methodB(): string;
}

class LargeA implements LargeClass {
   methodA: () => string; // not implemented, needed since otherwise we don't extend LargeClass
   methodB() {
     return "Hello world";
   }
}

largeclass.b.ts

class LargeB implements LargeClass {
   methodA() {
     return "Foo";
   }
   methodB: () => string; // not implemented, needed since otherwise we don't extend LargeClass
}

usage.ts

// Using underscore's extend to copy implementation from A to B
var c:LargeClass = _.extend(new LargeA(), new LargeB());

// Manually mixing in a to b
var a = new LargeA();
var b:LargeClass = new LargeB();
for (var prop in a) {
    b[prop]=a[prop];
}

Cela ne fonctionnera pas si vous avez besoin de constructeurs pour la classe, cependant. Et vraiment c'est sous-optimal ... Solution de contournement non plus :)

OH, d'ailleurs, cela fonctionne parce que Thypscript n'émet pas de déclarations de type de propriété / champ unitalisé pour les classes - il ne les utilise que pour la vérification de type.

Je réalise également que vous pouvez le faire sans interfaces et la construction de la classe de manière plus jolie ... Je vais laisser comment faire cela comme un exercice aux lecteurs pour l'instant ...

Answer 2

Vous pouvez importer vos fonctions à partir d'autres fichiers que la classe elle-même

Voici l'exemple du fichier de classe:

import {func1, func2, func3} from "./functions"

class MyClass {
   public foo: string = "bar"
   public func1 = func1.bind(this)
   public func2 = func2.bind(this)
   public func3 = func3.bind(this)
}

Voici l'exemple d'un fichier de fonction:

import {MyClass} from "./MyClass"

export function func1(this: MyClass, param1: any, param2: any){
   console.log(this.foo)
   ...
} 

Note importante: Assurez-vous que chaque fonction exportée n'est pas une fonction fléchée, car vous ne pouvez pas faire la liaison (ceci) sur une fonction de flèche