Увеличение типа Vue из модуля узла - PullRequest
Новая
       10

Увеличение типа Vue из модуля узла

0 голосов
/ 13 июня 2019

Я застрял над этой проблемой уже более суток и надеялся, что кто-нибудь сможет пролить на нее свет.

Цель

Я работаю над модулем узла, который будет использоваться в нескольких проектах VUE. Модуль узла написан на машинописном шрифте и использует увеличение типа для изменения маршрутизатора vuex и добавления метода с именем $ logout к экземпляру Vue.
Часть, на которой я застрял -

добавить метод с именем $ logout к экземпляру Vue

Структура модуля

Мой модуль узла имеет такую ​​структуру 

index.js
package.json
/src
  /types
    index.d.ts
    adlogin.d.ts
    adloginvuex.d.ts
  index.ts
  adlogin.ts
  adloginvuex.d.ts
/lib
  <output directory for tsc compiler>

package.json 

{
  "name": "@wwinc/NPM-VueADRedirect",
  "version": "0.5.0",
  "main": "index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "license": "MIT",
  "devDependencies": {
    "@types/jest": "^24.0.13",
    "@types/node": "^12.0.8",
    "@types/vue": "^2.0.0",
    "jest": "^24.8.0",
    "typescript": "^3.5.1"
  },
  "dependencies": {
    "@wwinc/NPM-WWLogon": "^1.2.0",
    "axios": "^0.18.0",
    "@types/vue": "^2.0.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.1"
  }
}

tsconfig.json 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2015", "es6", "dom"],
    "declaration": true,
    "outDir": "./lib",
    "strict": true,
    "types": ["jest", "node"],           
    "esModuleInterop": true
  }
}

Код

index.js (используется только для экспорта всего из библиотеки) 

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
exports.__esModule = true;
__export(require("./lib/index.js"));

index.ts 

export * from './adlogin';
export * from './adloginvuex';

adlogin.ts - это место, где происходит большая часть кода. Он содержит одну функцию для использования в качестве плагина Vue. Я также пытаюсь создать расширение интерфейса для Vue внутри этого файла.

adlogin.ts 

import { SessionService } from '@wwinc/NPM-WWLogon'; // class with Logout() method
import Vue from 'vue';

// Type augmentation here
declare module 'vue/types/vue' {
  export interface Vue {
    $logout: () => void;
  }
}

interface PluginOptions {
  router: any,
  store: any,
  accessibleGroups: string[],
  logonPageURL: string,
  debug: boolean
};

// Vue Plugin
export function ADLogin (
  _Vue: any, 
  options: PluginOptions) {

  // Set $logout to a function that does something
  Vue.prototype.$logout = function () {
    SessionService.Logout();
  }


  options.router.addRoutes([
    {
      path: '/redirect',
      name: 'redirectpage',
    }
  ])

  options.router.beforeEach((to: any, from: any, next: any) => {
    // do some cool routing stuff
  });
}

Проект, импортирующий модуль

main.ts 

import Vue from 'vue';
import { ADLogin } from '@wwinc/NPM-VueADRedirect';
import App from './App.vue';
import router from './router';
import store from './store';
import { accessibleGroups } from './groups';

Vue.config.productionTip = false;

Vue.use(ADLogin, {
  router,
  store,
  debug: false,
  logonPageURL: process.env.VUE_APP_LOGINSITE_URL,
  accessibleGroups,
});

const vm = new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

Когда я пытаюсь использовать метод $logout из компонента, я получаю сообщение об ошибке Property '$logout' does not exist on type 'Header'.

Header.Vue 

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Header extends Vue {
  public Logout() {
    this.$logout();
  }
}

Если я создаю файл с именем logout.d.ts в папке src / проекта, который импортирует модуль, и помещаю в него расширение типа следующим образом 

import Vue from 'vue';
declare module 'vue/types/vue' {
  export interface Vue {
    $logout: () => void;
  }
}

Все работает как положено. Я бы не хотел добавлять эту декларацию модуля в каждый проект, в котором используется этот модуль, поэтому я надеюсь, что кто-нибудь подскажет, где я ошибся.

Я также пытался поместить logout.d.ts в папку lib/ модуля узла самостоятельно, но кажется, что проект игнорирует проект, импортирующий модуль.

Заранее благодарим за понимание и за то, что нашли время прочитать это!

...