fix: move type statement of handlers to child component to use them.

Author: r-toki

src/components/EditTodoForm.vue

@@ -14,10 +14,9 @@
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref, onMounted } from "vue";
 import type Todo from "@/models/todo";
-import type {
-  HandleCancelEdit,
-  HandleSubmitEditedTodo,
-} from "@/pages/Index.vue";
+
+export type HandleCancelEdit = () => void;
+export type HandleSubmitEditedTodo = (editedTodo: Todo) => void;
 
 export default defineComponent({
   props: {

src/components/TodoItem.vue

@@ -25,7 +25,10 @@
 import { defineComponent, PropType } from "vue";
 import { FontAwesomeIcon } from "@/plugins/font-awesome";
 import Todo from "@/models/todo";
-import type { HandleClickEdit, HandleClickRemove, HandleToggleCompleted } from "@/pages/Index.vue";
+
+export type HandleToggleCompleted = (todo: Todo) => void;
+export type HandleClickEdit = (todo: Todo) => void;
+export type HandleClickRemove = (todo: Todo) => void;
 
 export default defineComponent({
   components: { fa: FontAwesomeIcon },
@@ -47,7 +50,7 @@ export default defineComponent({
       type: Function as PropType<HandleClickRemove>,
       required: true
     }
-  },
+  }
 });
 </script>
 

src/components/TodoList.vue

@@ -24,6 +24,16 @@ import Todo from "@/models/todo";
 import TodoItem from "@/components/TodoItem.vue";
 import EditTodoForm from "@/components/EditTodoForm.vue";
 
+import type {
+  HandleToggleCompleted,
+  HandleClickEdit,
+  HandleClickRemove,
+} from "@/components/TodoItem.vue";
+import type {
+  HandleCancelEdit,
+  HandleSubmitEditedTodo,
+} from "@/components/EditTodoForm.vue";
+
 export default defineComponent({
   components: { TodoItem, EditTodoForm },
 
@@ -33,29 +43,27 @@ export default defineComponent({
       required: true
     },
     todoIdBeingEdited: {
-      // nullable のため required は false
       type: String as PropType<string | null>,
-      required: false
+      default: undefined
     },
-    // 以下の props は子に渡すだけなので、PropType をわざわざ書く必要はない？
     handleToggleCompleted: {
-      type: Function,
+      type: Function as PropType<HandleToggleCompleted>,
       required: true
     },
     handleClickEdit: {
-      type: Function,
+      type: Function as PropType<HandleClickEdit>,
       required: true
     },
     handleClickRemove: {
-      type: Function,
+      type: Function as PropType<HandleClickRemove>,
       required: true
     },
     handleSubmitEditedTodo: {
-      type: Function,
+      type: Function as PropType<HandleSubmitEditedTodo>,
       required: true
     },
     handleCancelEdit: {
-      type: Function,
+      type: Function as PropType<HandleCancelEdit>,
       required: true
     }
   },

src/pages/Index.vue

@@ -21,40 +21,42 @@ import { defineComponent, Ref, ref } from "vue";
 import CreateTodoForm from "@/components/CreateTodoForm.vue";
 import TodoList from "@/components/TodoList.vue";
 import useTodos from "@/composables/use-todos";
-import Todo from "@/models/todo";
 
-import { HandleSubmitNewTodo } from "@/components/CreateTodoForm.vue";
-
-export type HandleToggleCompleted = (todo: Todo) => void;
-export type HandleClickEdit = (todo: Todo) => void;
-export type HandleClickRemove = (todo: Todo) => void;
-export type HandleCancelEdit = () => void;
-export type HandleSubmitEditedTodo = (editedTodo: Todo) => void;
+import type { HandleSubmitNewTodo } from "@/components/CreateTodoForm.vue";
+import type {
+  HandleToggleCompleted,
+  HandleClickEdit,
+  HandleClickRemove,
+} from "@/components/TodoItem.vue";
+import type {
+  HandleCancelEdit,
+  HandleSubmitEditedTodo,
+} from "@/components/EditTodoForm.vue";
 
 export default defineComponent({
   components: { CreateTodoForm, TodoList },
 
   setup() {
     const { todos, createTodo, updateTodo, removeTodo } = useTodos();
 
-    const handleSubmitNewTodo: HandleSubmitNewTodo = title => {
+    const handleSubmitNewTodo: HandleSubmitNewTodo = (title) => {
       createTodo({ title: title.value, completed: false });
       title.value = "";
     };
 
     const todoIdBeingEdited: Ref<string | null> = ref(null);
-    const handleToggleCompleted: HandleToggleCompleted = todo => {
+    const handleToggleCompleted: HandleToggleCompleted = (todo) => {
       const { id, title, completed } = todo;
       updateTodo({ id, title, completed: !completed });
     };
-    const handleClickEdit: HandleClickEdit = todo => {
+    const handleClickEdit: HandleClickEdit = (todo) => {
       todoIdBeingEdited.value = todo.id;
     };
-    const handleClickRemove: HandleClickRemove = todo => {
+    const handleClickRemove: HandleClickRemove = (todo) => {
       const { id } = todo;
       removeTodo({ id });
     };
-    const handleSubmitEditedTodo: HandleSubmitEditedTodo = editedTodo => {
+    const handleSubmitEditedTodo: HandleSubmitEditedTodo = (editedTodo) => {
       const { id, title, completed } = editedTodo;
       updateTodo({ id, title, completed });
       todoIdBeingEdited.value = null;
@@ -72,8 +74,8 @@ export default defineComponent({
       handleClickEdit,
       handleClickRemove,
       handleSubmitEditedTodo,
-      handleCancelEdit
+      handleCancelEdit,
     };
-  }
+  },
 });
 </script>