fix: Vue.jsとTypeScript相性悪い問題に遭遇したため戻り値を明示的に指定して解消した

vuejs/vue#8721

src/components/TodoList.vue

@@ -40,19 +40,20 @@
 </template>
 <script lang="ts">
 import Vue from "vue";
-import { Tasks } from "@/interfaces/todolist";
+import { Tasks, Task } from "@/interfaces/todolist";
+
 export default Vue.extend({
   name: "TodoList",
   props: {
     type: String,
   },
-  data: function () {
+  data(): Tasks {
     return {
-      tasks: [{ completed: false, task: "" }] as Tasks,
+      tasks: [{ completed: false, task: "" }],
     };
   },
   computed: {
-    filterdTasks() {
+    filterdTasks(): Task[] {
       switch (this.type) {
         case "active":
           return this.tasks.filter((task) => task.completed === false);

src/interfaces/todolist.ts

@@ -1,6 +1,6 @@
-export type Tasks = Task[];
+export type Tasks = { tasks: Task[] };
 
-type Task = {
+export type Task = {
   completed: boolean;
   task: string;
 };