Question

我已经在这个问题上停留了一天多，希望有人对此有所帮助。

目标

我正在研究一个可在多个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();
  }
}

如果我在要导入模块的项目的src /文件夹中创建一个名为logout.d.ts的文件，并像这样在其中放置类型增强类型

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

一切正常。我希望避免在每个使用该模块的项目中添加此模块声明，以便希望有人可以告诉我我哪里出了问题。

我也尝试过将logout.d.ts本身放置在节点模块的lib/文件夹中，但是导入该模块的项目似乎忽略了它。

在此先感谢您提供任何见解并花时间阅读！

来自节点模块的Vue类型扩充

0 个答案: