Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

watch scope #5

Closed
mvujica opened this issue Oct 30, 2016 · 9 comments
Closed

watch scope #5

mvujica opened this issue Oct 30, 2016 · 9 comments
Labels

Comments

@mvujica
Copy link

mvujica commented Oct 30, 2016

Probably not an issue but a caveat or I'm doing something wrong.
Inside watch function type of (this) is Vue so I have to do something like this or it won't compile:

// Watched class property @Watch plus declaration and initiation
    @Watch(function (newValue, oldValue) {
        let self = <AddressComponent>this;
        if (newValue == 0)
            self.isNewAddress = true;
        else
            self.isNewAddress = false;
    })
    selectedBillingAddress: string = undefined;

also data and watched members must be initialized.

@HerringtonDarkholme
Copy link
Owner

HerringtonDarkholme commented Oct 30, 2016

Thanks for filing this.

This is limitation of TypeScript's inference schema. Watch's annotation cannot have the annotated class's information.

Try this:

@Watch<AddressComponent, string>(function(newVal, oldVal){
  this.isNewAdress
})

@HerringtonDarkholme
Copy link
Owner

HerringtonDarkholme commented Oct 30, 2016

I might change the Watch function when microsoft/TypeScript#11929 is merged.

Then the Watch decorator will be like vue-typescript.

@Watch<MyComponent>('key')
myWatchMethod(newVal: string, oldVal: string) {

}
declare function Watch<V extends Vue>(key: keysof V): TypedProperty<(n: V[key], o: V[key]) => void>

User still needs to annotate Component class and value type, but the watch scope is correctly set to the enclosing class. And watch property type is checked.

@HerringtonDarkholme
Copy link
Owner

New style watch in next branch
https:/HerringtonDarkholme/av-ts/tree/next

@mvujica
Copy link
Author

mvujica commented Nov 15, 2016

Ok, next branch has it stringly typed like other libraries and vue, but I really like your strongly typed style, although it require additional annotation for "this" scope.

@HerringtonDarkholme
Copy link
Owner

Hi, it has a string API but everything is type checked! It's powered by typescript's new keyof and mapped type. We can achieve type safety without additional annotation

@mvujica
Copy link
Author

mvujica commented Nov 16, 2016

Really nice, when do you plan to merge?

@HerringtonDarkholme
Copy link
Owner

Probably after typescript officially released mapped types in stable.

@whitetrefoil
Copy link
Contributor

Watching on this issue...
Using this.$watch in mounted() until new TS release...

@HerringtonDarkholme
Copy link
Owner

Shipped in 0.6.0!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants