安装Typescript并使用Typescript写一个简单的todoList应用

最近在学习Typescript，Javascript的一个超集。今天做了一个todoList的小demo，分享一下。
首先安装typescript，需要node环境，去node官网下载安装一下node，安装好后查看一下node和npm的版本，确定环境安装OK。
在这里插入图片描述
使用npm安装typescript，在命令提示符界面输入命令npm install -g typescript安装typescript，
安装完成后使用命令tsc -v查看其版本号，

步入正题：todoList应用
1、画面截图：

2、文件目录截图：

3、todo.html文件代码：

<!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>todoList</title>
  <style>
    .item-ok {
      text-decoration-line: line-through;
      color: brown;
    }
  </style>
</head>

<body>
  <input type="text" id="txtContent" placeholder="请输入待办事项" maxlength="50">
  <button id="btnAdd">添加待办事项</button>

  <ul id="todoList"></ul>
  <script src="./todo.js"></script>
</body>

</html>

4、todo.ts文件代码：

// 1.定义待办类
class Todo {
  public content: string;
  public status: boolean;
  constructor(content: string, status: boolean) {
    this.content = content;
    this.status = status;
  }
}

// 2.初始化待办信息
let todoList: Todo[] = [
  new Todo("我是一条已办", true),  //true代表已办
  new Todo("真不巧我不是", false)  //false代表未办
]
console.log("todoList", todoList);

// 3.渲染待办列表
const ulDom = document.getElementById('todoList');
const txtContent: HTMLInputElement = document.querySelector("#txtContent");
const btnAdd = document.getElementById("btnAdd");
console.log("txtContent", txtContent)
function renderList() {
  let liDom = '';
  if (todoList.length > 0) {
    todoList.forEach((item, index) => {
      // ES6模板字符串拼接
      liDom += `<li class="${item.status === true ? 'item-ok' : ''}">${index + 1} - ${item.content}</li>`
    })
  } else {
    liDom += "<li>暂时还未添加待办事项</li>"
  }
  ulDom.innerHTML = liDom;
}

// 4.添加待办事项
function addTodo() {
  let content = txtContent.value.trim().toString();
  if (!content) {
    alert("请输入待办事项！");
    return false;
  }
  todoList.push(new Todo(content, false));
  txtContent.value = '';
  renderList();
}

// 5.绑定点击事件
btnAdd.addEventListener('click', () => {
  addTodo();
})

// 6.执行renderList，渲染页面
window.onload = function () {
  renderList()
}

以上两个文件写完之后需要在当前目录下打开命令提示符界面，执行命令tsc todo.ts将文件转换为todo.js来运行，
在这里插入图片描述
此时目录文档结构为：

生成的todo.js文件代码如下：

// 1.定义待办类
var Todo = /** @class */ (function () {
    function Todo(content, status) {
        this.content = content;
        this.status = status;
    }
    return Todo;
}());
// 2.初始化待办信息
var todoList = [
    new Todo("我是一条已办", true),
    new Todo("真不巧我不是", false) //false代表未办
];
console.log("todoList", todoList);
// 3.渲染待办列表
var ulDom = document.getElementById('todoList');
var txtContent = document.querySelector("#txtContent");
var btnAdd = document.getElementById("btnAdd");
console.log("txtContent", txtContent);
function renderList() {
    var liDom = '';
    if (todoList.length > 0) {
        todoList.forEach(function (item, index) {
            // ES6模板字符串拼接
            liDom += "<li class=\"" + (item.status === true ? 'item-ok' : '') + "\">" + (index + 1) + " - " + item.content + "</li>";
        });
    }
    else {
        liDom += "<li>暂时还未添加待办事项</li>";
    }
    ulDom.innerHTML = liDom;
}
// 4.添加待办事项
function addTodo() {
    var content = txtContent.value.trim().toString();
    if (!content) {
        alert("请输入待办事项！");
        return false;
    }
    todoList.push(new Todo(content, false));
    txtContent.value = '';
    renderList();
}
// 5.绑定点击事件
btnAdd.addEventListener('click', function () {
    addTodo();
});
// 6.执行renderList，渲染页面
window.onload = function () {
    renderList();
};

在todo.ts文件中，有两个console.log控制台打印如下：
在这里插入图片描述
至此，todoList应用就完成了，代码完全可复制粘贴使用。对于不会的东西，多看两遍总是要会的，多看两遍还不会，那就动手敲两遍代码吧，毕竟好记性不如烂笔头，动手的时候脑子才会跟着动起来。

Moai国王

发布了45 篇原创文章 · 获赞 7 · 访问量 1万+

私信关注

安装Typescript并使用Typescript写一个简单的todoList应用

猜你喜欢