javascript export default to typecript

Question

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?

What problem do you have? It's already a valid TS because TS is a superset of JS. Add some types, and it's good enough. I see no benefits from exporting an object, it could be export function createStudent.... — Estus Flask
– Estus Flask, Commented Aug 3, 2019 at 15:55
I am thinking of it as a service class. Which can do all the axios related logic and handle business logic so that component stays slim — Janier
– Janier, Commented Aug 3, 2019 at 16:26
I've added an explanation. You don't need to a class to do that. — Estus Flask
– Estus Flask, Commented Aug 3, 2019 at 16:35

Estus Flask · Accepted Answer · 2019-08-03 20:00:43Z

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(...);

edited Aug 3, 2019 at 20:00

answered Aug 3, 2019 at 16:33

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Janier Over a year ago

github.com/johnpapa/vue-typescript/blob/master/client/… what about this pattern? this was a pattern i was hoping for and it comes from github.com/johnpapa

Estus Flask Over a year ago

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.

Janier Over a year ago

even in angular , service class is like this rite

Estus Flask Over a year ago

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 Over a year ago

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.

|

Collectives™ on Stack Overflow

javascript export default to typecript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related