Day28 :TypeScript Learning : React + TypeScript Todo App Part1

After taking so many notes, it's finally time to implement a simple to-do app and document the issues encountered during the implementation.

If there are any mistakes, please feel free to leave comments. Thank you!

Environment Setup

Use create-react-app to set up the environment:

npx create-react-app my-app --template typescript
 
# or
 
yarn create react-app my-app --template typescript

Start the App

cd my-app

npm start
 
# or
 
yarn start

Open http://localhost:3000/ to see the React logo, indicating that the app has started successfully.

Adding TypeScript

Install TypeScript to add it to the existing Create React App project:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
 
# or
 
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Remove Unused Files

cd src
 
rm App.css App.test.tsx index.css logo.svg serviceWorker.ts setupTests.ts

Edit Code

In src/index.tsx, remove and organize some unused code.

//@file: src/index.tsx
 
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
 
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);

In src/App.tsx:

const App = () => {
    return <>hello world</>;
};
 
export default App;

After organizing, check if "hello world" is printed.

Add Necessary Packages

Install the packages you usually use, and remember to install the TypeScript support versions. If you don't install them, you will encounter errors when importing.

yarn add --dev styled-components @types/styled-components bootstrap react-bootstrap uuid @types/uuid

Type Declaration File - *.d.ts

Generally, TypeScript will parse all _.ts files in the project, including files ending with .d.ts. So when we place type.d.ts in the project, all other _.ts files can access the type definitions globally.

Create src/types.d.ts and write the defined interfaces for global use.

//@file: src/types.d.ts
 
// Define the Todo interface, which will have text and complete properties
interface Todo {
    text: string;
    complete: boolean;
}
 
// Define IAddTodo, which returns a parameter text of type string and has no return value (void)
type AddTodo = (text: string) => void;
 
// Define ToggleTodo, which returns a parameter index of type number and has no return value (void) (used to change the complete status when clicking todo)
type ToggleTodo = (index: number) => void;
 
// Define DeleteTodo, which returns a parameter index of type number and has no return value (void) (used to delete todo)
type DeleteTodo = (index: number) => void;

Of course, the definitions above can be written as needed, and you can also use interface to define them. Note that the syntax for defining functions differs between interface and type:

//interface
interface IAddTodo {
    (text: string): void;
}
 
//type
type IAddTodo = (index: number) => void;

I encountered some issues:

During the process, I hesitated whether to use interface or type. I asked several companies, and some used interface while others used type. It seems that using type is more common, likely due to company practices.

I initially wanted to use type because I felt it could describe primitive types, tuples, union types, etc. (see previous article). Since interface cannot do this, it is more convenient for future maintenance and expansion.

However, in the todo app reference article, interface was used to define objects, while type was used to define functions. I also read this article:

• Interfaces are better when you need to define a new object or method of an object.
• Types are better when you need to create functions.

I ended up using both.

I initially referred to this article, which teaches step by step and is quite friendly for beginners. I hope it helps those in need. Later, I made some modifications and adjustments. My notes here are the completed version and the issues encountered during the implementation. I sincerely admire those who teach step by step.

Tomorrow, we will continue with part 2!

References

https://create-react-app.dev/docs/adding-typescript/ https://typeofnan.dev/your-first-react-typescript-project-todo-app/ https://willh.gitbook.io/typescript-tutorial/basics/declaration-files