[Vue2.7] A type error. method can't be called in option "data"

[timongh]

Version

2.7.14

Reproduction link

github.com

Steps to reproduce

1. run pnpm install(or use npm, yarn)
2. run pnpm type-check(actual command is vue-tsc --noEmit)

What is expected?

no error

What is actually happening?

An error was reported: The method in option methods could not be found in the option data

src/main.ts:6:19 - error TS2339: Property 'method1' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin,
 ComponentOptionsMixin, {}, {}, {}, false, OptionTypesType<{}, {}, {}, {}, {}, {}>, {}, {}, {}, {}, {}, {}>'.

6       data1: this.method1(),
                    ~~~~~~~

---

The main code in the repository is:

defineComponent({
  data() {
    return {
      data1: this.method1(),
    }
  },
  methods: {
    method1(): number {
      return 1
    }
  }
})

[zhixinghy]

[posva]

This might be the same issue of computed referencing other computed properties needing an explicit type annotation. Have you tried this:

defineComponent({
  data(): { data1: number } {
    return {
      data1: this.method1(),
    }
  },
  methods: {
    method1(): number {
      return 1
    }
  }
})

[timongh]

@posva I just tried it and the problem still exists

[bill-mark]

Illegal usage
The object must be plain: native objects such as browser API objects and prototype properties are ignored.

[rudyxu1102]

The error will gone if you move methods option before data option like below.

TS Playground link with relevant code

defineComponent({
 methods: {
    foo(): number {
      return 1
    }
  },
  data() {
    return {
      data1: this.foo(),
    }
  },
})

It's due to the infer order of typescript.
This limitation still exists in Vue3, but the rest key of data context is inferred to Function in Vue3.

Releated to microsoft/TypeScript#52849