Add missings types

.eslintrc.js

@@ -1,15 +1,10 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  plugins: [
-    '@typescript-eslint',
-  ],
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-  ],
+  plugins: ['@typescript-eslint'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
   rules: {
-    "@typescript-eslint/explicit-function-return-type": "error",
-    "@typescript-eslint/no-explicit-any": "error"
-  }
-};
+    '@typescript-eslint/explicit-function-return-type': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+  },
+};

.prettierignore

@@ -0,0 +1 @@
+dist

src/App.tsx

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

src/TodoItem.tsx

@@ -1,6 +1,18 @@
 import clsx from 'clsx';
+import React from 'react';
+import { TodoStatus } from './types';
 
-export const TodoItem = ({ status, label, onChecked }) => {
+interface TodoItemProps {
+  status: TodoStatus;
+  label: string;
+  onChecked: (status: TodoStatus) => void;
+}
+
+export const TodoItem = ({
+  status,
+  label,
+  onChecked,
+}: TodoItemProps): React.ReactElement => {
   return (
     <div
       className={clsx('p-4 flex items-center', {
@@ -17,7 +29,7 @@ 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>
   );

src/types/index.ts

@@ -0,0 +1,7 @@
+export type TodoStatus = 'open' | 'done' | 'archived';
+
+export interface Todo {
+  label: string;
+  status: TodoStatus;
+  id: string;
+}