Skip to content

fix(type): avoid ThisType incompatibility of the nextTick function #3607

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

Closed
wants to merge 1 commit into from
Closed

fix(type): avoid ThisType incompatibility of the nextTick function #3607

wants to merge 1 commit into from

Conversation

HcySunYang
Copy link
Member

Fix: #3599

When the component has the emits options, the ThisType of the nextTick function may be incompatible with the component instance, e.g.

  defineComponent({
    emits: ['click']
  })

The $emit's type of the component instance is:

(event: "click", n: number) => void

But the $emit's type of ThisType of $nextTick is:

(event: string, n: number) => void

So there is a type incompatibility 'Type 'string' is not assignable to type '"click"''. At first, I tried to unify their types, but I failed, maybe @pikax can give it another try.

},
mounted() {
// #3599
this.$nextTick()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
this.$nextTick()
this.$nextTick(function() {
this.$emit('click', 1)
this.$emit('input', 'foo')
// @ts-expect-error
expectError(this.$emit('nope'))
// @ts-expect-error
expectError(this.$emit('click'))
// @ts-expect-error
expectError(this.$emit('click', 'foo'))
// @ts-expect-error
expectError(this.$emit('input'))
// @ts-expect-error
expectError(this.$emit('input', 1))
})

this: ComponentPublicInstance | void,
fn?: () => void
): Promise<void> {
export function nextTick(this: object | void, fn?: () => void): Promise<void> {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export function nextTick(this: object | void, fn?: () => void): Promise<void> {
export function nextTick<T = ComponentPublicInstance | void>(
this: T,
fn?: (this: T) => void
): Promise<void> {

@HcySunYang HcySunYang closed this Apr 15, 2021
@HcySunYang
Copy link
Member Author

@pikax will give a new PR

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

Successfully merging this pull request may close these issues.

Typescript: incompatible "this" in component when adding emits
2 participants