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?