La arquitectura que encuentro particularmente limpia y fácil de mantener es aquella en la que se separa la lógica de la presentación en dos archivos como este:

Capa de servicio (ts):

 export class Service implements ServiceInterface { constructor(private instanceVariable: string = "foo") { } private methodOne(): string { return this.instanceVariable } public methodTwo(argumentVariable: string): string { const importantString = this.methodOne(); return importantString + argumentVariable; } } interface ServiceInterface { methodTwo(argumentVariable: string): string; } export default new Service();

Capa de servicio (js):

 export class Service { instanceVariable; constructor(contructorArgument) { this.instanceVariable = contructorArgument; } methodOne() { return this.instanceVariable } methodTwo(argumentVariable) { const importantString = this.methodOne(); return importantString + argumentVariable; } } export default new Service();

Capa de presentación:

 import Service from "./service.ts"; const FunctionalComponent = () => { const [localState, setLocalState] = useState(localStateInit); return ( <> <div>{Service.methodTwo("bar")}</div> </> ) }

Pocas cosas suceden aquí (principalmente con respecto a la implementación de ts).

1. Mantenga las capas de servicio y presentación del componente en archivos separados.
2. Utilice una interfaz para describir la clase de servicio y sus métodos. Esto ayudará a trabajar con su capa de servicio en su componente, ya que obtendrá IntelliSense de Typescript.
3. Para este ejemplo, estoy exportando una instancia del servicio como exportación predeterminada desde su archivo. Esto le brinda una API más limpia en el archivo de su componente, donde puede llamar a métodos sin tener que "contaminar" el archivo del componente con la creación de instancias. Esto tiene al menos los siguientes dos inconvenientes:

• en su mayoría pierde la capacidad de trabajar bien con miembros de clase estáticos
• La variable de instancia preconfigurada (iniciada como miembro privado en el constructor) significa que su valor no se puede reemplazar en las pruebas.

Si alguno de los anteriores no funciona, limpie el constructor, exporte solo la clase en sí y cree una instancia según sea necesario en el archivo del componente.

4. También estoy exportando la clase en sí. Esto es para fines de prueba. En las pruebas, desea poder intercambiar los argumentos pasados al constructor de la clase y necesita tener una definición de clase para hacerlo.
5. Notarás la notación abreviada para declarar e instanciar una variable de clase privada en el constructor: private instanceVariable: string = "foo" . Esto es equivalente a algo como esto:

 class Service { private instanceVariable: string; constructor(constructorArgument: string) { this.instanceVariable = constructorArgument; }

Tal notación es particularmente agradable cuando se usa con inyección de dependencia.

6. En general, esta configuración lo ayudará con la lógica de prueba unitaria en su capa de servicio, ya que puede probarla como cualquier otra clase. Esto es particularmente útil cuando hay mucha lógica de representación condicional.

Déjame saber si esto es lo que has estado buscando. Tal vez podamos adaptarlo mejor a su caso de uso.