0

in vue , i have a service class [for doing axios class] which was previously written in javascript..now codebase is being migrated to full typescript....this module has to be migrated to typescript how can the below be a good typecript code?

import Axios from 'axios'

export default {
  createStudent (name, age) {
    return Axios.post('localhost:9090/student', { name: name , age: age })
  }
}

I know i can just change the extension to ts and it wil all work...But want to the right code for this in typescript Should it be a class? This code is being called from vue class components and it abstracts out the axios calls into one place rather than polluting the vue component class.. If i make this as a typescript class , how can i use this in the vue class based components?should i inject or just create new?

Janier
  • 3,982
  • 9
  • 43
  • 96

1 Answers1

1

This code is valid TypeScript because TypeScript is a superset of JavaScript, except that it also has be provided with types.

It cannot currently benefit from being a class because this class instance isn't in use, this is an antipattern in JavaScript and TypeScript.

Methods that don't use this should preferably be converted to static, but static-only class is also an antipattern:

export default class Service {
  static createStudent (name, age) {...}
}

It can be a class with prototype methods that is meant to be instantiated:

export class Service {
  createStudent (name, age) {...}
}

Since classes also act as interfaces, a good reason for such class to exist is to use it as a type in case this is needed:

let service: Service = { createStudent() { ... } }; // not an instance of Service class

This class is supposed to be used either as a singleton:

export default new Service;

Or instanced every time it's used:

let service = new Service;

Classes shouldn't be used as glorified namespaces, this is what modules are for. Since it's already a module, it can be:

export function createStudent(name, age) {...}

It can be namespaced and benefit from being a ES module, e.g. use tree-shaking:

import * as service from './service';

service.createStudent(...);
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • https://github.com/johnpapa/vue-typescript/blob/master/client/hero.service.ts what about this pattern? this was a pattern i was hoping for and it comes from https://github.com/johnpapa – Janier Aug 03 '19 at 17:18
  • It's 100% antipattern at this point, the example doesn't seem to be thought-out, it's a singleton of a class that doesn't make use of `this` instance. If there are plans to change this, e.g. to use an instance to cache data and possibly extend a class then it's a different case that could justify the use of a class. – Estus Flask Aug 03 '19 at 17:31
  • even in angular , service class is like this rite – Janier Aug 03 '19 at 17:35
  • 1
    It's a bit different in Angular because classes are first-class citizens there that are used for DI and testability. There are no such design restrictions in other frameworks like Vue. I'd write this as a class only if I intended to use an instance for some reason. Caching comes to mind first. – Estus Flask Aug 03 '19 at 17:42
  • Thanks..can u add some more recommended code and then i will accept the answer – Janier Aug 03 '19 at 18:21
  • 1
    The post seems to contain all relevant code already. I've tried to update it to make it more clear. TL;DR: if you deal with `this` class instance or can benefit from making it a class in some way (extensibility, testability, etc) then make it a class, otherwise keep it a plain object (which `*` import actually is). Hope this helps. – Estus Flask Aug 03 '19 at 20:03