Styjun

Wrathful Smite, and the term 'Creature'

Procedure for traffic not in sight

Determining if file in projected or geographic coordinates using ArcGIS Desktop?

How can I fix a framing mistake so I can drywall?

Are there take-over requests in aviation?

What is going on: C++ std::move on std::shared_ptr increases use_count?

Do any aircraft carry boats?

Renewing British passport with permanent green card in USA

What is this dollar sign ($) icon in my Menu Bar?

On the origin of "casa"

What was the first LISP compiler?

What are the advantages and disadvantages of Preprepints.org compared with arXiv?

Is there a basic list of ways in which a low-level Rogue can get advantage for sneak attack?

What is an Unlucky Word™?

What is negative current?

Expected value until a success?

What's the biggest difference between these two photos?

How would two worlds first establish an exchange rate between their currencies

Writing a love interest for my hero

Are there any instances of members of different Hogwarts houses coupling up and marrying each other?

Why would "an mule" be used instead of "a mule"?

Is there any detail about ambulances in Star Wars?

Can i say "I will encrypt something" if i hash something?

2.5 year old daughter refuses to take medicine

declare interface in typescript from module

What is TypeScript and why would I use it in place of JavaScript?TypeScript Converting a String to a numberIn TypeScript, how do I extend the ambient JQuery interface in an external module?Typescript: Interfaces vs TypesTypeScript 2.0 and merging the react-router interface declared in Route.d.tsVue + Typescript - invalid typesVue & TypeScript How to get the data property in render?Angularjs typescript compiler error due to lack of interface definitionTypescript declaration merging to expand or override module type or interface propertyErrors compiling Vue with TypeScript

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

How do I declare a type so my ts file compile?

I'm using vue and what I'm trying to do is to create a mixing: I'm using:

import Vue, ComponentOptions, VueConstructor from 'vue';

let mixin : ComponentOptions<Vue> = 
 computed: 
 logger() : Logger 
 console.log(this.$options._componentTag);
 
 ,
;

ComputedOptions has the definition here. But this code fails to compile with

this.$options._componentTag: with exception ts2339 property
_componentTag doesn't exist on type ComputedOption

I also tried to declare this type but no success:

declare module 'vue' 
 interface ComputedOptions<T> 
 _componentTag?: string;
 

typescript vue.js

share|improve this question

edited Mar 28 at 9:44

Yannick Meeus

3,77511 gold badge2626 silver badges3030 bronze badges

asked Mar 28 at 7:48

deathangel908deathangel908

3,32533 gold badges2020 silver badges4242 bronze badges

add a comment | 

0

How do I declare a type so my ts file compile?

I'm using vue and what I'm trying to do is to create a mixing: I'm using:

import Vue, ComponentOptions, VueConstructor from 'vue';

let mixin : ComponentOptions<Vue> = 
 computed: 
 logger() : Logger 
 console.log(this.$options._componentTag);
 
 ,
;

ComputedOptions has the definition here. But this code fails to compile with

this.$options._componentTag: with exception ts2339 property
_componentTag doesn't exist on type ComputedOption

I also tried to declare this type but no success:

declare module 'vue' 
 interface ComputedOptions<T> 
 _componentTag?: string;
 

typescript vue.js

share|improve this question

edited Mar 28 at 9:44

Yannick Meeus

3,77511 gold badge2626 silver badges3030 bronze badges

asked Mar 28 at 7:48

deathangel908deathangel908

3,32533 gold badges2020 silver badges4242 bronze badges

add a comment | 

How do I declare a type so my ts file compile?

I'm using vue and what I'm trying to do is to create a mixing: I'm using:

import Vue, ComponentOptions, VueConstructor from 'vue';

let mixin : ComponentOptions<Vue> = 
 computed: 
 logger() : Logger 
 console.log(this.$options._componentTag);
 
 ,
;

ComputedOptions has the definition here. But this code fails to compile with

this.$options._componentTag: with exception ts2339 property
_componentTag doesn't exist on type ComputedOption

I also tried to declare this type but no success:

declare module 'vue' 
 interface ComputedOptions<T> 
 _componentTag?: string;
 

typescript vue.js

share|improve this question

edited Mar 28 at 9:44

Yannick Meeus

3,77511 gold badge2626 silver badges3030 bronze badges

asked Mar 28 at 7:48

deathangel908deathangel908

3,32533 gold badges2020 silver badges4242 bronze badges

import Vue, ComponentOptions, VueConstructor from 'vue';

let mixin : ComponentOptions<Vue> = 
 computed: 
 logger() : Logger 
 console.log(this.$options._componentTag);
 
 ,
;

declare module 'vue' 
 interface ComputedOptions<T> 
 _componentTag?: string;
 

share|improve this question

edited Mar 28 at 9:44

Yannick Meeus

3,77511 gold badge2626 silver badges3030 bronze badges

asked Mar 28 at 7:48

deathangel908deathangel908

3,32533 gold badges2020 silver badges4242 bronze badges

share|improve this question

edited Mar 28 at 9:44

Yannick Meeus

3,77511 gold badge2626 silver badges3030 bronze badges

asked Mar 28 at 7:48

deathangel908deathangel908

3,32533 gold badges2020 silver badges4242 bronze badges

edited Mar 28 at 9:44

Yannick Meeus

3,77511 gold badge2626 silver badges3030 bronze badges

edited Mar 28 at 9:44

Yannick Meeus

3,77511 gold badge2626 silver badges3030 bronze badges

asked Mar 28 at 7:48

deathangel908deathangel908

3,32533 gold badges2020 silver badges4242 bronze badges

asked Mar 28 at 7:48

deathangel908deathangel908

3,32533 gold badges2020 silver badges4242 bronze badges

1 Answer
1

active

oldest

votes

1

Try to use vue-property-decorator over at npm. Creation of mixins with this library is very simple:

import Component, Vue from "vue-property-decorator";

@Component
export default class BaseMixin extends Vue 
 check = false;

 someMethod() 
 this.check = true;
 

And then you can use it in components:

import Component, Mixins from "vue-property-decorator";
import BaseMixin from "@/mixins/BaseMixin";

@Component
export default class MyComponent extends Mixins(BaseMixin) 
 mounted() 
 this.someMethod(); // someMethod is visible here
 

ComponentOptions

But, if you need to extend ComponentOptions interface, maybe this helps you:

(my_vue.d.ts)

import Vue from 'vue';

declare module 'vue/types/options' 
 interface ComponentOptions<V extends Vue> 
 _componentTag?: string;
 

You can use them in components and mixins:

(MyMixin.ts)

import Component, Vue from "vue-property-decorator";

@Component
export default class MyMixin extends Vue 

 check() 
 return this.$options._componentTag;
 

share|improve this answer

edited Mar 28 at 10:08

answered Mar 28 at 8:17

AlexanderAlexander

1,18544 silver badges1414 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you try to use it with global mixins? I use Vue.mixin(BaseMixin) and I receive a long exception. I see resolved issue, but seems it doesn't work. Im still getting an error with declaring module in your way. I'm using gts
  
  – deathangel908
  Mar 28 at 9:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm affraid that is imposible with vue-property-decorator. If you need declare some method that you will use in all components, better use vue plugins maybe?
  
  – Alexander
  Mar 28 at 9:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do you know why ts refuses to compile? I can create a github example or snippet if you can't reproduce.
  
  – deathangel908
  Mar 28 at 9:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I suppose that vue-property-decorator's mixin has another type that vue expected. For creating global mixins you can try vue-typed
  
  – Alexander
  Mar 28 at 9:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I mean why declare module doesn't work. So if some module exports a module like vue does (this can be something else but vue) and I can't override interface of inner class with declare. This is not related to vue in anyway, only to typescript itself.
  
  – deathangel908
  Mar 28 at 9:45
  
  

  
  
  
  

 | 
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55392496%2fdeclare-interface-in-typescript-from-module%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Try to use vue-property-decorator over at npm. Creation of mixins with this library is very simple:

import Component, Vue from "vue-property-decorator";

@Component
export default class BaseMixin extends Vue 
 check = false;

 someMethod() 
 this.check = true;
 

And then you can use it in components:

import Component, Mixins from "vue-property-decorator";
import BaseMixin from "@/mixins/BaseMixin";

@Component
export default class MyComponent extends Mixins(BaseMixin) 
 mounted() 
 this.someMethod(); // someMethod is visible here
 

ComponentOptions

But, if you need to extend ComponentOptions interface, maybe this helps you:

(my_vue.d.ts)

import Vue from 'vue';

declare module 'vue/types/options' 
 interface ComponentOptions<V extends Vue> 
 _componentTag?: string;
 

You can use them in components and mixins:

(MyMixin.ts)

import Component, Vue from "vue-property-decorator";

@Component
export default class MyMixin extends Vue 

 check() 
 return this.$options._componentTag;
 

share|improve this answer

edited Mar 28 at 10:08

answered Mar 28 at 8:17

AlexanderAlexander

1,18544 silver badges1414 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you try to use it with global mixins? I use Vue.mixin(BaseMixin) and I receive a long exception. I see resolved issue, but seems it doesn't work. Im still getting an error with declaring module in your way. I'm using gts
  
  – deathangel908
  Mar 28 at 9:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm affraid that is imposible with vue-property-decorator. If you need declare some method that you will use in all components, better use vue plugins maybe?
  
  – Alexander
  Mar 28 at 9:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do you know why ts refuses to compile? I can create a github example or snippet if you can't reproduce.
  
  – deathangel908
  Mar 28 at 9:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I suppose that vue-property-decorator's mixin has another type that vue expected. For creating global mixins you can try vue-typed
  
  – Alexander
  Mar 28 at 9:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I mean why declare module doesn't work. So if some module exports a module like vue does (this can be something else but vue) and I can't override interface of inner class with declare. This is not related to vue in anyway, only to typescript itself.
  
  – deathangel908
  Mar 28 at 9:45
  
  

  
  
  
  

 | 
show 2 more comments

1

Try to use vue-property-decorator over at npm. Creation of mixins with this library is very simple:

import Component, Vue from "vue-property-decorator";

@Component
export default class BaseMixin extends Vue 
 check = false;

 someMethod() 
 this.check = true;
 

And then you can use it in components:

import Component, Mixins from "vue-property-decorator";
import BaseMixin from "@/mixins/BaseMixin";

@Component
export default class MyComponent extends Mixins(BaseMixin) 
 mounted() 
 this.someMethod(); // someMethod is visible here
 

ComponentOptions

But, if you need to extend ComponentOptions interface, maybe this helps you:

(my_vue.d.ts)

import Vue from 'vue';

declare module 'vue/types/options' 
 interface ComponentOptions<V extends Vue> 
 _componentTag?: string;
 

You can use them in components and mixins:

(MyMixin.ts)

import Component, Vue from "vue-property-decorator";

@Component
export default class MyMixin extends Vue 

 check() 
 return this.$options._componentTag;
 

share|improve this answer

edited Mar 28 at 10:08

answered Mar 28 at 8:17

AlexanderAlexander

1,18544 silver badges1414 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you try to use it with global mixins? I use Vue.mixin(BaseMixin) and I receive a long exception. I see resolved issue, but seems it doesn't work. Im still getting an error with declaring module in your way. I'm using gts
  
  – deathangel908
  Mar 28 at 9:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm affraid that is imposible with vue-property-decorator. If you need declare some method that you will use in all components, better use vue plugins maybe?
  
  – Alexander
  Mar 28 at 9:23
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Do you know why ts refuses to compile? I can create a github example or snippet if you can't reproduce.
  
  – deathangel908
  Mar 28 at 9:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I suppose that vue-property-decorator's mixin has another type that vue expected. For creating global mixins you can try vue-typed
  
  – Alexander
  Mar 28 at 9:43
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I mean why declare module doesn't work. So if some module exports a module like vue does (this can be something else but vue) and I can't override interface of inner class with declare. This is not related to vue in anyway, only to typescript itself.
  
  – deathangel908
  Mar 28 at 9:45
  
  

  
  
  
  

 | 
show 2 more comments

Try to use vue-property-decorator over at npm. Creation of mixins with this library is very simple:

import Component, Vue from "vue-property-decorator";

@Component
export default class BaseMixin extends Vue 
 check = false;

 someMethod() 
 this.check = true;
 

And then you can use it in components:

import Component, Mixins from "vue-property-decorator";
import BaseMixin from "@/mixins/BaseMixin";

@Component
export default class MyComponent extends Mixins(BaseMixin) 
 mounted() 
 this.someMethod(); // someMethod is visible here
 

ComponentOptions

But, if you need to extend ComponentOptions interface, maybe this helps you:

(my_vue.d.ts)

import Vue from 'vue';

declare module 'vue/types/options' 
 interface ComponentOptions<V extends Vue> 
 _componentTag?: string;
 

You can use them in components and mixins:

(MyMixin.ts)

import Component, Vue from "vue-property-decorator";

@Component
export default class MyMixin extends Vue 

 check() 
 return this.$options._componentTag;
 

share|improve this answer

edited Mar 28 at 10:08

answered Mar 28 at 8:17

AlexanderAlexander

1,18544 silver badges1414 bronze badges

import Component, Vue from "vue-property-decorator";

@Component
export default class BaseMixin extends Vue 
 check = false;

 someMethod() 
 this.check = true;
 

import Component, Mixins from "vue-property-decorator";
import BaseMixin from "@/mixins/BaseMixin";

@Component
export default class MyComponent extends Mixins(BaseMixin) 
 mounted() 
 this.someMethod(); // someMethod is visible here
 

import Vue from 'vue';

declare module 'vue/types/options' 
 interface ComponentOptions<V extends Vue> 
 _componentTag?: string;
 

import Component, Vue from "vue-property-decorator";

@Component
export default class MyMixin extends Vue 

 check() 
 return this.$options._componentTag;
 

share|improve this answer

edited Mar 28 at 10:08

answered Mar 28 at 8:17

AlexanderAlexander

1,18544 silver badges1414 bronze badges

answered Mar 28 at 8:17

AlexanderAlexander

1,18544 silver badges1414 bronze badges

answered Mar 28 at 8:17

AlexanderAlexander

1,18544 silver badges1414 bronze badges