Typescript 在Vue js中使用服务的正确方式是什么？

我有一个带有数据映射的类（MappingService），我只是将其导入到组件包装器中，并使用其方法转换数据

例如，这是我的服务类：

class WfmMappingService {

    constructor(
        private shiftService: WfmShiftService,
    ) {
    }

    public static demandsMapping(demands: WfmDemandResponseModel): object {}

    public static recommendationsMapping(
        recommendationsResp: WfmRecommendedResponseModel,
        demands: object,
        quantityDays,
    ) {}

    public static employeesMapping(employees: Array<WfmEmployeesResponseModel>): object {}

    public static availablePlansMapping(availablePlans): {[key: string]: WfmAvailablePlan} {}

    getSortRolesIdsList(rolesList: WfmRoleResponseModel[]) {}

    private static getEmptyRecommendedRole(quantityDays, demands?): object {}

    getEmptyPlanEmployee(quantityDays, month, idEmployee, idDayRole, holidays): object {}
}

export { WfmMappingService }

我真的不明白什么是正确的方法？也许我应该让define variable=new WfmMappingService？但我的例子是有效的

    import { WfmMappingService } from '@/services/MappingService';
    const sharedModule = namespace(SHARED_MODULE);

    @Component({})
    export default class wfmPlan extends Vue {
        @Inject(DependencyConstants.WORKSPACESERVICE) private apiService!: WorkspaceService;
        public async getAvailablePlans() {
            const availablePlansResponse: WfmAvailablePlansResponse = await this.apiService.getAvailablePlans();
            const { availablePlans } = availablePlansResponse;
            const availablePlansMapping = WfmMappingService.availablePlansMapping(availablePlans);
            this.$store.dispatch('setAvailablePlans', availablePlansMapping);
        }