时间戳

首页 > 解决方案 > 打字稿扩展/修改现有接口 - Vue路由器元

typescript - 打字稿扩展/修改现有接口 - Vue路由器元

问题描述

抱歉，如果这个问题已经得到解答，但我似乎无法在任何地方找到答案。如果有好的答案，请有人链接它。

我试图在我的应用程序的 node_module 中扩展现有的打字稿接口。“扩展”是指覆盖使用的默认定义。'meta' 当前已设置，我想更改它而不是创建一个使用当前库中的接口的新接口。

我想尝试将此附加到 this.$router.currentRoute.meta 的全局实例，而不是每次使用它时都执行“as TYPE”。

路由器.ts

export interface Meta {
    Auth: boolean,
    displayName: string | null
}

shims-vue.d.ts

import {Meta} from '@/router'

declare module "vue/types/vue" {
  interface Vue{
    $router: {
      currentRoute: {
        meta: Meta // This should be set to my new Meta interface rather than the default meta?: any type within vue-router/types/router.d.ts
      }
    }
  }
}

页面.vue

const name = this.$router.currentRoute.meta.displayName // type: any

谢谢大家。

标签： typescriptvue.jsvue-router

解决方案

不确定你是否已经找到了解决方案，但这对我有用，所以如果有人在寻找解决方案时偶然发现这篇文章，我会分享这个。

我创建了一组 Vue 插件并想扩展 TypeScript 的类型。

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "outDir": "lib",
    "baseUrl": ".",
    "paths": {
      "vue": [ "node_modules/vue/types/index" ],
      "vue-router": [ "node_modules/vue-router/types/index" ],
      "vuex": [ "node_modules/vuex/types/index" ],
      "axios": [ "node_modules/axios/index" ]
    }
  },
    "compileOnSave": false,
    "exclude": [
      //"node_modules",
      "wwwroot"
    ]
  }

打字/vue-extension.d.ts

/**
 * Augment the typings of Vue.js
 */

import Vue from 'vue'
import { AxiosStatic } from "axios"

declare module '../../../node_modules/vue/types/vue' {
    interface Vue {

        /**Axios HTTP client */
        $http: AxiosStatic;

        /**
         * Check if user belongs to an application role
         * @param role single role or array of roles
         * @returns True/False
        */
        $UserInRole(role: string | string[]): boolean;

        /**Executes box widgets (Collapse/Remove) */
        $boxWidget(): void;
    }
}

用户配置文件.ts

import Avatar from "../../../node_modules/vue-avatar/index";
import Vue, { ComponentOptions } from "vue";

export default {
    name: "user-profile",
    components: {
        Avatar
    },
    template: `<div> <avatar round :name="Fullname"></avatar> </div>`,
    data() {
        return {
            user: { "Title": "", "Bio": "" } as VueComp["user"]
        }
    },
    computed: {
        Fullname() {
            if (this.$store.state.profile.user.Fullname != undefined) {
                this.user.Title = this.$store.state.profile.info.Title;
                this.user.Bio = this.$store.state.profile.info.Bio;

                return this.$store.state.profile.user.Fullname;
            }
            return "";
        }
    },
    methods: {
        Save() {
            // Both $http and component's data extended from 'VueComp'
            let vm = this as VueComp;

            vm.$http.post("api/account/aboutme", vm.user)
                .then(() => {

                    let info = {
                        Title: vm.user.Title,
                        Bio: vm.user.Bio
                    };

                    //write back to store
                    vm.$store.commit("profile/Info", info);
                });
        }
    },
    mounted() {
        // $boxWidget extended from 'vue-extension.d.ts'
        let vm = this as Vue;
        vm.$boxWidget();
    }
} as ComponentOptions<any>


interface VueComp extends Vue {
    user: { Title?: string, Bio?: string }
}

推荐阅读