1
// JS 写法：无类型约束，变量可随意改类型
2
let name = "张三";
3
name = 123; // 不报错，但逻辑上不合理
4

5
// TS 写法：加类型注解，约束类型
6
let name: string = "张三";
7
name = 123; // 编译报错：Type 'number' is not assignable to type 'string'
8

9
// 函数参数/返回值注解
10
function add(a: number, b: number): number {
11
  return a + b; // 强制返回数字，返回字符串会报错
12
}

1
interface Todo {
2
  id: number | string; // 联合类型：id 可以是数字或字符串
3
  content: string; // 必选属性
4
  completed: boolean; // 必选属性
5
  createTime?: string; // 可选属性（加 ?）
6
  readonly author: string; // 只读属性（不可修改）
7
}
8

9
// 符合接口的对象
10
const todo: Todo = {
11
  id: 1,
12
  content: "学习接口",
13
  completed: false,
14
  author: "前端开发者",
15
};
16

17
todo.author = "新手"; // 编译报错：只读属性不能修改

1
// 定义联合类型别名
2
type ID = number | string;
3
// 定义对象类型别名
4
type User = {
5
  name: string;
6
  age: number;
7
};
8
// 交叉类型：合并多个类型
9
type AdminUser = User & { role: string };

1
class TodoManager {
2
  public version: string = "1.0"; // 公有的（默认），外部可访问
3
  private todos: Todo[] = []; // 私有的，仅类内部可访问
4
  protected nextId: number = 1; // 受保护的，类内部和子类可访问
5

6
  // 获取待办列表（通过方法暴露私有属性，避免直接修改）
7
  getTodos(): Todo[] {
8
    return [...this.todos]; // 返回副本，而非原数组
9
  }
10
}
11

12
const manager = new TodoManager();
13
console.log(manager.version); // 正常访问
14
console.log(manager.todos); // 编译报错：private 属性外部不可访问

1
// 泛型函数：T 是类型参数，调用时指定具体类型
2
function wrapValue<T>(value: T): T[] {
3
  return [value];
4
}
5

6
// 调用时指定类型：T = string
7
const strArr = wrapValue<string>("学习泛型");
8
// 自动推导类型：T = number
9
const numArr = wrapValue(123);

1
function handleId(id: number | string) {
2
  if (typeof id === "string") {
3
    console.log(id.length); // TS 知道这里 id 是 string
4
  } else {
5
    console.log(id.toFixed(2)); // TS 知道这里 id 是 number
6
  }
7
}

1
//定义接口
2
interface Todo {
3
  id: number | string;
4
  content: string;
5
  completed: boolean;
6
}
7

8
//定义代办器类型接口
9
interface ITodoManager {
10
  addTodo: (content: string) => void;
11
  createTodoItem: (todo: Todo) => void;
12
  deleteTodoItem: (id: number | string) => void;
13
}

1
class TodoList implements ITodoManager {
2
  //Array 是 TS 泛型 必须明确数组里面存什么类型
3
  //private todos: Array = []; 写法错误
4
  //private todos: Todo[] = [];
5
  private todos: Array<Todo> = [];
6
  private nextId: number = 1;
7
  //todo-list容器
8
  private element: HTMLElement;
9
  //代办列表
10
  private ul: HTMLElement;
11
  //点击添加按钮
12
  private button: HTMLElement;
13
  //输入框
14
  private input: HTMLInputElement;
15

16
  constructor() {
17
    const container = document.querySelector(".todo-container");
18
    if (!container) throw new Error("未找到 .todo-container 容器");
19
    this.element = container as HTMLElement;
20

21
    //获取 ul
22
    const todoListUl = this.element.querySelector(".todo-list") as HTMLElement;
23
    if (!todoListUl || todoListUl.tagName !== "UL") {
24
      throw new Error("未找到 .todo-list 列表");
25
    }
26
    this.ul = todoListUl;
27

28
    //获取按钮
29
    const addBtn = this.element.querySelector(".add-btn");
30
    if (!addBtn) throw new Error("未找到 .add-btn 按钮");
31
    this.button = addBtn as HTMLElement;
32

33
    //获取输入框
34
    const todoInput = this.element.querySelector(".todo-input");
35
    if (!todoInput) throw new Error("未找到 .todo-input 输入框");
36
    this.input = todoInput as HTMLInputElement;
37

38
    // 初始化事件绑定
39
    this.init();
40
  }
41

42
  init() {
43
    this.button.addEventListener("click", () => {
44
      // 从输入框获取内容，调用 addTodo
45
      this.addTodo(this.input.value);
46
    });
47

48
    // 输入框回车事件（触发添加）
49
    this.input.addEventListener("keydown", (e) => {
50
      if (e.key === "Enter") {
51
        this.addTodo(this.input.value);
52
      }
53
    });
54
  }
55

56
  addTodo(content: string): void {
57
    if (!content.trim()) {
58
      alert("请输入代办项");
59
      return;
60
    }
61
    const newTodo: Todo = {
62
      id: this.nextId++,
63
      content: content.trim(),
64
      completed: false,
65
    };
66
    this.todos.push(newTodo);
67
    this.createTodoItem(newTodo);
68
    this.input.value = "";
69
  }
70

71
  createTodoItem(todo: Todo): void {
72
    const li = document.createElement("li");
73
    li.className = "todo-item";
74
    li.dataset.id = todo.id.toString();
75
    if (todo.completed) {
76
      li.classList.add("todo-item-completed");
77
    }
78
    li.innerHTML = `
79
    <!-- 可选：完成状态复选框 -->
80
    <input type="checkbox" class="toggle-btn" ${todo.completed ? "checked" : ""}>
81
    <!-- 待办内容 -->
82
    <span class="todo-content">${todo.content}</span>
83
    <!-- 删除按钮 -->
84
    <button class="todo-delete-btn">
85
      <i class="delete-btn"></i> 删除
86
    </button>
87
  `;
88

89
    const deleteBtn = li.querySelector(".todo-delete-btn") as HTMLElement;
90
    deleteBtn.addEventListener("click", () => {
91
      this.deleteTodoItem(todo.id);
92
      li.remove();
93
    });
94

95
    const checkbox = li.querySelector(".toggle-btn") as HTMLInputElement;
96
    checkbox.addEventListener("change", () => {
97
      this.finishTodoItem(todo.id, checkbox.checked);
98
    });
99

100
    this.ul.appendChild(li);
101
  }
102

103
  deleteTodoItem(id: number | string): void {
104
    this.todos = this.todos.filter((item) => item.id !== id);
105
  }
106

107
  finishTodoItem(id: number | string, isChecked: boolean): void {
108
    const targetTodo = this.todos.find((item) => item.id === id);
109
    console.log(targetTodo);
110

111
    if (targetTodo) {
112
      targetTodo.completed = isChecked;
113
    }
114
    const li = this.ul.querySelector(`[data-id="${id}"]`) as HTMLElement;
115
    console.log(li);
116

117
    if (li) {
118
      const todoContent = document.querySelector(
119
        ".todo-content",
120
      ) as HTMLElement;
121
      todoContent.classList.toggle("todo-item-completed", isChecked);
122
    }
123
  }
124
}

1
import TodoList from "./modules/script.js";
2

3
window.addEventListener("DOMContentLoaded", () => {
4
  new TodoList(); // 此时 HTML 所有元素都已解析，能找到 .add-btn/.todo-input
5
});