Method return Type cannot use *this*

224 Views Asked by At

I'm currently being assigned a task where I have to test out Vue as a frontend framework, another developer is testing out React.

The main takeaway is we want strong type hinting and errors on compile, I'm struggling to implement a method return type.

Works:

<template>
  <div class="home flex flex-col">
    <h1 class="flex justify-center">Spy Table:</h1>
    <h2>Hi: {{ test2() }}</h2>
    <SpyTable />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import SpyTable from "@/components/SpyTable/SpyTable.vue";

function test3(): string {
  return "Vue Test 3";
}

export default defineComponent({
  props: {
    dataset: {
      type: Object as () => FormType,
      required: true,
    },
    name: String,
    msg: { type: String, required: true },
  },
  methods: {
    test1: function (): string {
      return "Vue Test 1";
    },
    test2: function (): typeof test3 {
      return test3;
    },
  },
});
</script>

The above example will work, the method test2 is hinted to return a typeof test3 function, this works all fine.

Does not work:

<template>
  <div class="home flex flex-col">
    <h1 class="flex justify-center">Spy Table:</h1>
    <h2>Hi: {{ test2() }}</h2>
    <SpyTable />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import SpyTable from "@/components/SpyTable/SpyTable.vue";

function test3(): string {
  return "Vue Test 3";
}

export default defineComponent({
  props: {
    dataset: {
      type: Object as () => FormType,
      required: true,
    },
    name: String,
    msg: { type: String, required: true },
  },
  methods: {
    test1: function (): string {
      return "Vue Test 1";
    },
    test2: function (): typeof this.test1 {
      return this.test1;
    },
  },
});
</script>

This will not work, it won't compile and in general, just gives me trouble... Is there not a way for me to tell test2 that it should expect a typeof test1 to be returned?

I really would like to be able to do this as I am working with Vue on my own private project, I really like Vue, and there is another colleague who is doing the same as I am just with react, I would really like that the company chooses vue, can someone help me out solving this?

0

There are 0 best solutions below