TypeScript【1】实战项目：任务管理系统【2】的开发
随着互联网技术的飞速发展，任务管理系统已经成为许多企业和团队提高工作效率的重要工具。TypeScript作为一种JavaScript的超集，提供了类型系统、接口、模块等特性，使得代码更加健壮和易于维护。本文将围绕TypeScript语言，实战开发一个简单的任务管理系统。
项目背景
任务管理系统的主要功能包括：
1. 任务创建：用户可以创建新的任务，并设置任务的标题、描述、优先级等属性。
2. 任务列表：展示所有任务的列表，包括任务的基本信息。
3. 任务编辑：用户可以编辑已创建的任务，修改任务的属性。
4. 任务删除：用户可以删除不再需要的任务。
5. 任务筛选：根据任务的状态、优先级等条件筛选任务。
技术选型
为了实现上述功能，我们选择以下技术栈：
1. TypeScript：用于编写类型安全的JavaScript代码。
2. React【3】：用于构建用户界面。
3. Redux【4】：用于管理应用状态。
4. Ant Design【5】：用于快速搭建UI组件【6】。
项目结构【7】
以下是项目的基本目录结构：
src/
|-- components/
| |-- TaskList.tsx
| |-- TaskItem.tsx
| |-- TaskForm.tsx
|-- actions/
| |-- taskActions.ts
|-- reducers/
| |-- taskReducer.ts
|-- store/
| |-- index.ts
|-- App.tsx
|-- index.tsx
实战开发
1. 创建项目【8】
使用`create-react-app`创建一个新的React项目，并安装【9】TypeScript支持：
bash
npx create-react-app task-manager --template typescript
cd task-manager
npm install antd
2. 安装Redux和React-Redux
安装Redux和React-Redux库，用于管理应用状态：
bash
npm install redux react-redux
3. 创建任务模型【10】
在`src/models`目录下创建`Task.ts`文件，定义任务模型：
typescript
// src/models/Task.ts
export interface Task {
id: number;
title: string;
description: string;
priority: 'low' | 'medium' | 'high';
status: 'todo' | 'in-progress' | 'done';
}
4. 创建任务列表组件
在`src/components/TaskList.tsx`文件中，创建任务列表组件：
typescript
// src/components/TaskList.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Task } from '../models/Task';
import TaskItem from './TaskItem';
const TaskList: React.FC = () => {
const tasks: Task[] = useSelector((state: any) => state.tasks);
const dispatch = useDispatch();
return (
{tasks.map((task: Task) => (
))}
);
};
export default TaskList;
5. 创建任务项组件
在`src/components/TaskItem.tsx`文件中，创建任务项组件：
typescript
// src/components/TaskItem.tsx
import React from 'react';
import { Task } from '../../models/Task';
const TaskItem: React.FC = ({ task }) => {
return (
{task.title}
{task.description}
Priority: {task.priority}
Status: {task.status}
);
};
export default TaskItem;
6. 创建任务表单组件
在`src/components/TaskForm.tsx`文件中，创建任务表单组件：
typescript
// src/components/TaskForm.tsx
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { Task } from '../../models/Task';
import { addTask } from '../../actions/taskActions';
const TaskForm: React.FC = () => {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [priority, setPriority] = useState('low');
const [status, setStatus] = useState('todo');
const dispatch = useDispatch();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const newTask: Task = {
id: Date.now(),
title,
description,
priority,
status,
};
dispatch(addTask(newTask));
setTitle('');
setDescription('');
setPriority('low');
setStatus('todo');
};
return (
setTitle(e.target.value)}
placeholder="Title"
/>
setDescription(e.target.value)}
placeholder="Description"
/>
setPriority(e.target.value as Task['priority'])}
>
Low
Medium
High
setStatus(e.target.value as Task['status'])}
>
Todo
In Progress
Done
Add Task
);
};
export default TaskForm;
7. 创建任务动作【11】
在`src/actions/taskActions.ts`文件中，创建任务动作：
typescript
// src/actions/taskActions.ts
import { Task } from '../../models/Task';
export const addTask = (task: Task) => ({
type: 'ADD_TASK',
payload: task,
});
8. 创建任务还原器【12】
在`src/reducers/taskReducer.ts`文件中，创建任务还原器：
typescript
// src/reducers/taskReducer.ts
import { Task } from '../../models/Task';
import { ADD_TASK } from '../actions/taskActions';
const initialState: Task[] = [];
const taskReducer = (state = initialState, action: any) => {
switch (action.type) {
case ADD_TASK:
return [...state, action.payload];
default:
return state;
}
};
export default taskReducer;
9. 创建Redux存储
在`src/store/index.ts`文件中，创建Redux存储：
typescript
// src/store/index.ts
import { createStore } from 'redux';
import { taskReducer } from '../reducers/taskReducer';
const store = createStore(taskReducer);
export default store;
10. 创建应用组件
在`src/App.tsx`文件中，创建应用组件：
typescript
// src/App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
const App: React.FC = () => {
return (
Task Manager
Comments NOTHING