Ca build (enfin)

package.json

@@ -11,13 +11,13 @@
     "lint": "eslint src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@faker-js/faker": "^6.0.0-alpha.7",
     "clsx": "^1.1.1",
     "nanoid": "^3.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@faker-js/faker": "^6.0.0-alpha.7",
     "@tailwindcss/forms": "^0.4.0",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
@@ -26,6 +26,7 @@
     "@vitejs/plugin-react": "^1.0.7",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.9.0",
+    "Faker": "^0.7.2",
     "husky": "7.0.4",
     "postcss": "^8.4.6",
     "prettier": "2.5.1",

src/App.tsx

@@ -1,15 +1,15 @@
-import { useState } from 'react';
+import { ReactElement, useState } from 'react';
 import { faker } from '@faker-js/faker';
-import { TodoItem } from './TodoItem';
+import { TodoItem,TypeTest } from './TodoItem';
 import { nanoid } from 'nanoid';
 
-const generateFakeTodoItem = () => ({
+const generateFakeTodoItem = ():TypeTest => ({
   label: faker.hacker.phrase(),
   status: faker.random.arrayElement(['open', 'done', 'archived']),
   id: nanoid(),
 });
 
-const generateNTodo = (size) => {
+const generateNTodo = (size:number):TypeTest[] => {
   return Array.from(Array(size).keys()).map(generateFakeTodoItem);
 };
 
@@ -32,10 +32,10 @@ const initialList = [
   ...generateNTodo(10),
 ];
 
-function App() {
+function App():ReactElement {
   const [todoList, setTodoList] = useState(initialList);
 
-  const updater = (id, newStatus) => {
+  const updater = (id: string, newStatus: string):void  => {
     setTodoList((oldList) =>
       oldList.map((it) => {
         if (it.id !== id) {
@@ -57,7 +57,7 @@ function App() {
             key={item.id}
             label={item.label}
             status={item.status}
-            onChecked={(newState) => updater(item.id, newState)}
+            onChecked={(newState: string):void => updater(item.id, newState)}
           />
         ))}
       </div>

src/TodoItem.tsx

@@ -1,6 +1,19 @@
 import clsx from 'clsx';
+import { ReactElement } from 'react';
 
-export const TodoItem = ({ status, label, onChecked }) => {
+type TypeTest = {
+  label: string;
+  status: string,
+  id: string
+};
+
+interface Props {
+  status: string,
+  label: string,
+  onChecked: (numStatus: string) => void
+}
+
+export const TodoItem = ({ status, label, onChecked }:Props):ReactElement => {
   return (
     <div
       className={clsx('p-4 flex items-center', {
@@ -17,8 +30,10 @@ export const TodoItem = ({ status, label, onChecked }) => {
         disabled={status === 'archived'}
         type="checkbox"
         className="rounded text-pink-500 ml-8 cursor-pointer disabled:cursor-not-allowed disabled:bg-black disabled:hover:bg-black"
-        onChange={() => onChecked(status === 'open' ? 'done' : 'open')}
+        onChange={():void => onChecked(status === 'open' ? 'done' : 'open')}
       />
     </div>
   );
 };
+
+export type {TypeTest};