refactor: 컴포넌트 context 타이핑 수정

yongjae/projects/FEDC5-3_VanillaJS_1/src/components/App.ts

@@ -8,7 +8,7 @@ import TodoList from "./TodoList";
 
 interface AppProps {
   $target: HTMLElement;
-  initialState: any;
+  initialState: TodosType;
 }
 
 // 임시 Context : this의 property를 정의하는 부분

yongjae/projects/FEDC5-3_VanillaJS_1/src/components/Header.ts

@@ -1,12 +1,14 @@
+import { TodoComponentStatelessContext } from "../types/todo";
+
 interface HeaderProps {
   $target: HTMLElement;
   text: string;
 }
-interface HeaderContext {
-  render: () => void;
-}
 
-const Header = function (this: HeaderContext, { $target, text }: HeaderProps) {
+const Header = function (
+  this: TodoComponentStatelessContext,
+  { $target, text }: HeaderProps
+) {
   const $header = document.createElement("h1");
 
   $target.appendChild($header);
@@ -16,6 +18,6 @@ const Header = function (this: HeaderContext, { $target, text }: HeaderProps) {
   };
 
   this.render();
-} as any as { new (props: HeaderProps): HeaderContext };
+} as any as { new (props: HeaderProps): TodoComponentStatelessContext };
 
 export default Header;

yongjae/projects/FEDC5-3_VanillaJS_1/src/components/TodoCount.ts

@@ -1,18 +1,12 @@
-import { TodosType } from "../types/todo";
+import { TodoComponentStatefulContext, TodosType } from "../types/todo";
 
 interface TodoCountProps {
   $target: HTMLElement;
   initialState: TodosType;
 }
 
-// 임시 Context : this의 property를 정의하는 부분
-interface TodoCountContext {
-  state: TodosType;
-  setState: (nextState: TodosType) => void;
-  render: () => void;
-}
 const TodoCount = function (
-  this: TodoCountContext,
+  this: TodoComponentStatefulContext,
   { $target, initialState }: TodoCountProps
 ) {
   this.state = initialState;
@@ -35,6 +29,6 @@ const TodoCount = function (
   };
 
   this.render();
-} as any as { new (props: TodoCountProps): TodoCountContext };
+} as any as { new (props: TodoCountProps): TodoComponentStatefulContext };
 
 export default TodoCount;

yongjae/projects/FEDC5-3_VanillaJS_1/src/components/TodoForm.ts

@@ -1,13 +1,12 @@
-interface TodoFormContext {
-  render: () => void;
-}
+import { TodoComponentStatelessContext } from "../types/todo";
+
 interface TodoFormProps {
   $target: HTMLElement;
   onSubmit: (text: string) => void;
 }
 
 const TodoForm = function (
-  this: TodoFormContext,
+  this: TodoComponentStatelessContext,
   { $target, onSubmit }: TodoFormProps
 ) {
   const $form = document.createElement("form");
@@ -40,6 +39,6 @@ const TodoForm = function (
   };
 
   this.render();
-} as any as { new (props: TodoFormProps): TodoFormContext };
+} as any as { new (props: TodoFormProps): TodoComponentStatelessContext };
 
 export default TodoForm;

yongjae/projects/FEDC5-3_VanillaJS_1/src/components/TodoItem.ts

@@ -1,16 +1,14 @@
-import { TodoType } from "../types/todo";
+import { TodoComponentStatelessContext, TodoType } from "../types/todo";
 
 type TodoItemProps = {
   $target: HTMLElement;
   initialValue: TodoType;
   onToggle: (id: number) => void;
   onDelete: (id: number) => void;
 };
-type TodoItemContext = {
-  render: () => void;
-};
+
 const TodoItem = function (
-  this: TodoItemContext,
+  this: TodoComponentStatelessContext,
   { $target, initialValue, onToggle, onDelete }: TodoItemProps
 ) {
   const { id, text, isCompleted } = initialValue;
@@ -33,6 +31,6 @@ const TodoItem = function (
     });
   };
   this.render();
-} as any as { new (props: TodoItemProps): TodoItemContext };
+} as any as { new (props: TodoItemProps): TodoComponentStatelessContext };
 
 export default TodoItem;

yongjae/projects/FEDC5-3_VanillaJS_1/src/components/TodoList.ts

@@ -1,20 +1,15 @@
-import { TodosType } from "../types/todo";
+import { TodoComponentStatefulContext, TodosType } from "../types/todo";
 import { setItem } from "../utils/storage";
 import TodoItem from "./TodoItem";
 
-interface TodoListContext {
-  state: TodosType;
-  setState: (nextState: TodosType) => void;
-  render: () => void;
-}
 interface TodoListProps {
   $target: HTMLElement;
   initialState: TodosType;
   onToggle: (id: number) => void;
   onDelete: (id: number) => void;
 }
 const TodoList = function (
-  this: TodoListContext,
+  this: TodoComponentStatefulContext,
   { initialState, $target, onToggle, onDelete }: TodoListProps
 ) {
   this.state = initialState;
@@ -41,6 +36,6 @@ const TodoList = function (
     );
   };
   this.render();
-} as any as { new (props: TodoListProps): TodoListContext };
+} as any as { new (props: TodoListProps): TodoComponentStatefulContext };
 
 export default TodoList;

yongjae/projects/FEDC5-3_VanillaJS_1/src/types/todo.ts

@@ -4,3 +4,25 @@ export interface TodoType {
   isCompleted: boolean;
 }
 export type TodosType = TodoType[];
+
+// 컴포넌트 구조 typing
+interface CoreComponentContext<T> {
+  state?: T;
+  setState?: (nextState: T) => void;
+  render: () => void;
+}
+type StatefulComponentContext<T> = {
+  [K in keyof CoreComponentContext<T>]-?: CoreComponentContext<T>[K];
+};
+type StatelessComponentContext<T> = Omit<
+  CoreComponentContext<T>,
+  "state" | "setState"
+>;
+export type TodoComponentContext = CoreComponentContext<TodosType>;
+export type TodoComponentStatefulContext = StatefulComponentContext<TodosType>;
+export type TodoComponentStatelessContext =
+  StatelessComponentContext<TodosType>;
+
+interface CoreComponentProps<T> {
+  $target: HTMLElement;
+}