typescript todoList例子

最新推荐文章于 2024-09-21 10:23:43 发布

原创最新推荐文章于 2024-09-21 10:23:43 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

typescript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用HTML和TypeScript创建一个简单的TODO应用，包括待办事项的添加、状态管理和列表渲染。通过实际代码示例，展示了从类定义到DOM操作的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html文件引入的是 todo.js (ts转后的js)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>todo</title>
  <style>
    .item-ok {
      text-decoration: line-through;
      color: grey;
    }
  </style>
</head>
<body>
  <input id='inputText' placeholder="请输入代办"/>
  <button id='btn'>添加</button>
  <ul id='todoList'></ul>
  <script src='./Hello.js'></script>
</body>
</html>

todo.ts

class Todo {
  content: string; // 待办内容
  state: Boolean; // 待办状态
  constructor(content: string, state: Boolean) {
    this.content = content;
    this.state = state
  }
}

// 初始化待办信息
let todoList:Todo[] = [
  new Todo('one', true),
  new Todo('two', false)
]

const todoUlList = document.getElementById('todoList')
var textContent:HTMLInputElement = document.querySelector('#inputText')
var btn = document.getElementById('btn')

// 渲染待办列表
function renderList () {
  let list = ''
  if (todoList.length > 0) {
    todoList.forEach((item, index) => {
      list += `<li class="${item.state ? 'item-ok': ''}">${item.content}</li>`
    })
  } else {
    list = '<li>暂无待办</li>'
  }
  todoUlList.innerHTML = list
}

// 添加代办
function addTodo() {
  var text = textContent.value;
  if (text === '') {
    return 
  }
  todoList.push( new Todo(text, false))
  textContent.value = '' // 把input框清空
  renderList() // push之后重新渲染一下
}

btn.onclick = function () {
  addTodo()
}

window.onload = function() {
  renderList()
}

然后 tsc todo.ts, 转成js即可使用～