1

I have a Typescript class that is getting quite big. To organize it better and avoid cramming it up, I'd like to split it over 5-7 different files based on the page object structure. Currently it looks like this in a single file:

mainAPI.ts


const axios = require('axios');
export class API {
  makeAxiosRequest() {}
  doLogin() {}
  getJSESSIONID() {}
  getLoginResponse() {}
  deleteAnUser(userName) {}
  addAnUser(userName) {}
  .,etc
}

testFile.ts


import mainAPI from mainAPI.ts

await mainAPI.doLogin();
await mainAPI.addAnUser();
await mainAPI.logout();

EDIT: I'm looking to achieve something like this:

mainAPI.ts


const axios = require('axios');
export class API {
  //Want the methods from loginAPI.ts, userAPI.ts, purchaseAPI.ts to be a part of this class.
}

loginAPI.ts

doLogin() {}
doAdminLogin() {}
doMemberLogin() {} etc

userAPI.ts

deleteAnUser() {}
addAnUser() {}
updateUser() {} etc

purchaseAPI.ts

addToCart() {}
buyProduct() {}
cancelOrder() {} etc

So far I have only tried to split the API methods component-wise by comments. I'm reaching out for help on how one can split a class into multiple files. Thank you

mark_Ruff
  • 57
  • 5
  • You really can't. You could use namespaces but it wouldn't become a class anymore, but based on the class name and methods, I think a namespace *could* work, but again, you should probably keep it like this. – kelsny Oct 25 '22 at 15:26
  • You could try to find functions that do roughly the same, such as everything to do with User. Then you could make a separate class UserAPI and put all User stuff there. Then if the rest is small enough you could keep it in your API class. But it depends on how big your class is. Personally, I think approaching 400 lines is getting bloated, but if it's justified then there's no problem. – CoderApprentice Oct 25 '22 at 15:31
  • Your question is too broad. You need to think of smaller units. Right now you have one class that does too much. – Ruan Mendes Oct 25 '22 at 15:47

3 Answers3

0

a programmer doesn't simply just "split the code into different files" but follows programming conventions called design patterns...

there is a structure/design pattern best suited for your application, and given the limited ability for us to see your code, it would be best to look up the gang of four books yourself to make this judgement call, or give us a broader question and more insight into what your doing.

Max Alexander Hanna
  • 3,388
  • 1
  • 25
  • 35
-1

What you could do would be to have a class which is extended by your class API. For example what you can do is

export class API extends YourNewClass {
  
}

and

export class YourNewClass {
  makeAxiosRequest() {}
  doLogin() {}
  getJSESSIONID() {}
  getLoginResponse() {}
  deleteAnUser(userName) {}
  addAnUser(userName) {}
  .,etc
}
Foucauld Gaudin
  • 9
  • 2
-1

You can do this by making a separate file for each function (of course you can put more than one function in each file as well) and import them in the file where your API class is defined.

So your file structure would be sth like:

| - API.ts
| - makeAxiosRequest.ts
| - doLogin.ts
| - ...

Then, you have your makeAxiosRequest.ts:

import { API } from "./API";
import axios from "axios";

export function makeAxiosRequest(this: API /* other args */) {
  // do logic
}

and your doLogin.ts:

import { API } from "./API";
import axios from "axios";

export function doLogin(this: API /*, other args */) {
  // do logic
}

and so on.

In your API.ts then, you can do:

import { makeAxiosRequest } from "./makeAxiosRequest";
import { doLogin } from "./doLogin";
// ...
export class API {
  makeAxiosRequest = makeAxiosRequest;
  doLogin = doLogin;
  // ...
}
Apollo79
  • 674
  • 3
  • 14
  • Please don't encourage the OP to put a bunch of unrelated code into the same object. What's the benefit of making this all a class? If you really want to encourage a big bucket, it makes more sense to say `export const API = {doLogin, makeAxiosRequest}`, no class needed and you can benefit from the property having the same name. – Ruan Mendes Oct 25 '22 at 15:50