[feature request] make vuex-class more type safe

[Evertt]

I just read a blog post which explained that TypeScript 2.1 has a new feature which makes it possible to type-check the keys of objects. Here's the blog post.

So basically I'm imagining that it should also be possible to do this with vuex, since the store object is just a regular object, right?

So my feature request means that if I have a store like this:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

And I have a component like this:

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const ModuleGetter = namespace('path/to/module', Getter)

@Component
export class MyComp extends Vue {
  @State('count') count
  @Mutation('incremet') increment
}

That the type-annotation would make typescript understand that the count variable of MyComp is a number, since the state variable is a number. And also that typescript would throw an error during compilation, because it can see that increment was misspelled.

Do you think you could try to implement that? Even just having one of those two features would already be awesome.

[ktsn]

I guess this can't be implemented, unfortunately, because decorators can't affect/detect the property's type 😞

[Evertt]

Well you might be right about affect, but I'm pretty sure it can detect. Because I've seen another library implement such a thing:

This library allows you to decorate your component's properties without having to explicitly state which type they are. Here's a snippet from the example code:

@vts.component({components: {ChildComponent}})
export default class Example extends Vue {
    // props with initializer -> sets default value and type
    @vts.prop() aStringPropWithValue = 'abc'
    @vts.prop() aNumberPropWithValue = 123
}

So that means that library is able to detect the property's type that typescript is inferring it to be, right?

[ktsn]

This example code is doing just infer the property types from the default value. The decorator still does not detect it's type.

You can see the PropertyDecorator type does not have the information of property's type. https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es6.d.ts#L1326

[Evertt]

Ah damn, that's too bad.

[Evertt]

This guy found a cool solution using functions combined with decorators. :-)

[Evertt]

I'm still a bit confused. Like okay, I'm starting to accept that you can't influence a property's type using a property decorator. However, you do know the "key" to which the property is referring. As in, you know that when someone writes @State('count') count or @State count that they are referring to the count state in the store. So doesn't that mean you should at least be able to use the keyof T feature of typescript to check for spelling mistakes? Simply by doing something like this?

function prop<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

const doesntMatter = prop(store, propertyName);

Not that you are going to use that constant.. the point of that line of code is simply to make TypeScript throw a compilation-error if the property name contains a spelling error.

To be honest, I don't really know what I'm talking about and I'm just making guesses here. If I'm saying stupid shit and it annoys you, just let me know. :-)

[ktsn]

I see, we can check spelling error but maybe we need to some changes for API. I also noticed we need to update Vuex's declaration file because it currently does not have the type of getter/action/mutation.

I'm considering to implement them but I'm currently too busy by the other jobs. Maybe need 1 week or more 😢

[Evertt]

I don't mind waiting a week. I'm already really happy that you're willing to look into this. :-)

[Evertt]

I just learned something new while implementing the parentheses-less thingy on that other repo (your explanation was a great help by the way).

So yes, a property decorator can't detect the type of the property it is decorating, because it's only getting the target object and the property-name. However, that just so happens to be enough information to then do Reflect.getMetadata('design:type', target, key) to get the property type. Doesn't that mean we can also check the type? I'm just not sure if that then counts as runtime or compile-time...

[ktsn]

Reflect metadata provides a type information on runtime. So we cannot detect our mistake on compile time. In addition, it does not provide enough information. For example, it always returns Object for all following cases.

foo: null // null type
bar: undefined // undefined type
baz: string | number // union type
qux: { disalbed: boolean } // object type

I don't think it's useful for our use case 😞

[JsonSong89]

@ktsn
I have a idea, like vue-class-component
Use a @VuexComponent decorate MyVuexClass
property->state
get->getter
set->mutation
method->action
and when combining the store, use ClassToModule method ,
transform a new instance(maybe can use singleton pattern) to a object like this:

export default {
    state,
    mutations,
    getters,
    actions
}

In our Vue Component , we can declare a instance(myStore) from MyVuexClass , because we had inject the store in root , we also can access state by myStore

        @StoreComponent( MyVuexClass.SingleInstance) myStore: MyVuexClass
        testClick2() {
            this.myStore.mutation1 = "123"
            this.myStore.mutation2 = 123
            this.myStore.action1({param1: "123", param2: 123})
            console.log(this.myStore.state1)
            console.log(this.myStore.getter1())
        }

I am new with TypeScript , this is just a imagine, is it possible? 😄

[NightCatSama]

Is there any progress?

// store/modules/product
export interface ProductState {
  name: string
  price: number
}
const state: ProductState = {
   name: '',
   price: 0
}

What can I do to know the state type in the Vue component?

  @State(state => state.product.name) productName // can be inferred to be a string

[akoidan]

Can we also consider adding compile type check instead of relying on typescript type-safe? Like linter or so. Thus we can add it to vue-loader or smth.

[championswimmer]

I have been working lately on https://www.npmjs.com/package/vuex-module-decorators
We can probably use that in conjunction to infer types? We can build class-based store modules using this, and from class we can infer datatypes of store entities

[akoidan]

@championswimmer which features make it better than vue-property-decorator? I don't want to redeclare types above each action, I'm even lazy to append import for annotation, I guess other folks are lazy as I am.