Allow and support non-reactive instance variables in vue's d.ts

[joma74]

Version

2.5.3

Reproduction link

https://codesandbox.io/s/vn1zlz8n63

Steps to reproduce

Hover over this.logit in m_logitShouldBeInferredCorrectly

What is expected?

Hover over should display property logit:debug.Debugger. I have your common understanding that hover is just the TS inference effect.

What is actually happening?

Displays any

[yyx990803]

This is not a bug, and I'm not sure if this is even possible within TypeScript. I'll close as a wontfix, but cc @ktsn @HerringtonDarkholme feel free to provide more info.

[ktsn]

TypeScript compiler cannot infer this from assignment statement, so this is impossible.

I thought about supporting such use case by manually providing non-reactive properties type as type parameter. But current TS compiler does not allow both providing part of type parameters and infer remaining type parameters from arguments.

[joma74]

Thanks @ktsn for clarification.

Let me first explain that i am technically on the JS side of coding, merely using the VSCode-TS-for-JS language-over-Vue service. Look back again at that marvelous word i just plugged together - a chain of technologies in certain flux. And, from my point of view, not very open to the end user(read me). Not open means certain feedback is lacking, read as not logging/traceable/documented. Without experience, reading github issues to keep up, reasoning why certain things in software-land might have happened or not, is very hard. Is it VS-Code, TS Config, TS language service, TS Version, my code using this instance variables there in Vue's created method, just me ... bug-or-feature?

So, please, say more prominently of what's In and what's Out. So that's the now-issue part of this issue for me. Would appreciate to hear/have your kind feedback about those points.

Additionally

• What's your certain best practice/workflow for learning/debugging and testing this kind of issue yourself?
• What is your preferred way for reaching out to you on this kind of issue(Triage upon multiple product/projects involved, bug-or-feature, ...)?
• Do you plan to give more consideration to the JS-first-TS-Typings usage/experience/documentation based on ES6? It is my understanding that Typings on JS is a necessary point to help learning how micro-coding usages/completions are meant to be done and to prevent certain bugs upfront. Those IDE red squiggle lines really get me alerted, even more if i am bugged by false-positives as related to the op question. So very open to and using https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript and @types/packaged d.tss as much as possible. Don't get me wrong - JS-first-TS seems very promising to me. And may eventually result in more fun and confidence in JS coding. On the ES6 subpoint, just as browsers nowadays get ES6 compatible natively i was very happy to throw away my babel workflow, so i am somewhat reluctant to work with ES7 annotations or TS language or anything that involves an additional layer of future magic or failure.

Last but not least, my current pain points related around the op question

• I created a Vue mixin in a separate JS file. I TS-JSDoc-typed it ComponentOptions per @HerringtonDarkholme 's suggestion. While that Typing certainly got the squiggle lines away from the using Vue component side, the mixin side did not get any TS-Typing love. Had to learn that ComponentOptions does not include the TS this magic. As a workaround i changed my mixin code to begin with Vue.extend to get coding completion/feedback. Which can eventually be argumented to be a sign of code-smell. As this is neither documented as per https://vuejs.org/v2/guide/mixins.html#Basics as a valid option(while it is a valid option per vue's d.ts if i do not error that i do not have any squiggle lines there). Nor do i understand what the ramifications may be - but it seems to work for me(hmm).
• Same situation as at the end above, but now on the using Vue component side of the mixin. Does not give any TS-Typing love either from the mixin. Neither data, nor methods, nor anything is included from the mixin. Again, please document if this a bug-or-feature or lacking something elsewhere.
• Again on the mixin side. If i have no computed prop, TS type interference certainly breaks. See Typescript powered code completion hangs if no computed property is given microsoft/TypeScript-Vue-Starter#28 as issued there for triage.

P.S. If you ever reach this line, i personally thank you for taking your time ⭐

[fromberg100]

This is how I managed to initialize non-reactive variables in TypeScript. You will need to use vue-class-component:

import Vue from 'vue';
import Component from 'vue-class-component';

interface MyComponent {
	myVar: number
}

@Component
class MyComponent extends Vue {
	created() {
		this.myVar = 150;
	}
}

export default MyComponent;

Note the interface.