Vite+React+TypeScript手撸TodoList

布局与样式

一个TodoList长什么样子相信无需多言：

上样式：
src/TodoList.css

.td-wrapper {
   
   
    width: 700px;
    margin: 0 auto;
}

.dp-wrapper {
   
   
    width: 100%;
    height: 40px;
    display: flex;
    margin-top: 10px;
}

.dp-wrapper input {
   
   
    flex: 4;
    height: 36px;
    line-height: 36px;
    text-indent: 10px;
    font-size: 1rem;
}

.dp-wrapper button {
   
   
    flex: 1;
    height: 100%;
    margin-left: 2px;
    font-size: 1rem;
}

.dl-wrapper {
   
   
    border: 1px solid gray;
    margin-top: 5px;
}

.dl-wrapper li {
   
   
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid gray;
}

.dl-wrapper li.done {
   
   
    text-decoration: line-through;
}

.dl-wrapper li:last-child {
   
   
    border-bottom: none;
}

创建工程

npm init vite@latest

后续选择：react + ts
添加必要文件，工程结构如下：

定义全局数据类型

src/vite-env.d.ts

/// <reference types="vite/client" />

/* 代办事项数据结构 */
interface TodoItem {
   
   
    name: string,
    done: boolean
}