项目中使用TypeScript的TodoList实例详解

目录
  • 为什么用todolist
  • todolist的ts化
  • 数据到视图
  • 实现handleTodoItem
  • readonly
  • 分类
  • 交叉类型
  • 新增功能
  • 联合类型
  • 可选属性
  • 数据转视图
  • 总结

为什么用todolist

现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定、遍历、条件判断等各种逻辑,而能完成这一系列内容的,todolist就是个很好的实现,比如react的教程、solijs教程都是以todolist为例

当然,你如果想看各种框架实现todolist的话,你可以访问TodoMVC 这里面展示了各种框…

todolist的ts化

但是对于ts教程来说,只有官方的一些实例,并没有一个很好的项目上的教程,也就是有关实战的部分,很多同学在学习了ts之后,只会一些基础的js类型的设置,放在项目中就不清楚了,所以我们就出了这个教程

当然在开始之前,我们要了解这个教程不依赖任何的前端库,比如react,vue等,同时也为了节省时间,我们仅仅是放出一些关键的ts代码,不需要将整个应用都展示出来,同样能够让你知道ts的使用

数据到视图

一个tudolist对应的数据是怎么样的?就拿刚才的视图来看的话,它应该是一个对象数组,数据应该是这样的

[
  {
    id: 1,
    text: '待办事项1',
    done: false
  },
  {
    id: 2,
    text: '待办事项2',
    done: false
  },
  {
    id: 3,
    text: '待办事项3',
    done: false
  }
]

其中id是每一个代办事项的唯一标识,text是事项名称,done表示是否完成

当我们点击完成的时候,实际上就是每一项的done发生了变化,数据发生变化之后驱动我们的视图做出对应的改变

实现handleTodoItem

对应的上述的点击事件,我们实现一下它的伪代码,当其点击的时候,需要处理对应的数据,先使用js实现

function handleTodoItem(todo){
  // 点击的时候todo中的done的布尔值取反
  return {
    ...todo,
    done: !todo.done
  }
}

然后我们使用ts进行优化

type Todo = {
  id: number;
  text: string;
  done: boolean;
}
// 如果某个变量是todo类型,可以这样
const todoItem: Todo = {
  id: 1,
  text: '待办事项1',
  done: false
}

这样ts类型就是正常的,如果相应的todoItem不匹配,则编译就会发生错误,可以让错误提前感知,并且如果项目中有配置的ts相关,vscode中就会给出对应的错误信息

对应到handleTodoItem这个方法中,应该怎么写呢?

function handleTodoItem(todo: Todo): Todo {
  // 逻辑实现
}

readonly

对于handleTodoItem这个函数来说,函数应该是无副作用的,所以传进去的todo对象,不应该发生变化,而是返回一个新的对象

比如这种方法,虽然能够实现同样的内容,但是它是有副作用的,改变了传入的参数,是不可取的

function handleTodoItem(todo: Todo):Todo {
  // 点击的时候todo中的done的布尔值取反
  todo.done = !todo.done
  return todo
}

但是这种的ts并不会报错,怎么办?那就需要借助我们的ts进行类型校验,你可以这样

type Todo = {
  readonly id: number;
  readonly text: string;
  readonly done: boolean;
}

当你尝试修改修改的话,就会发生ts错误,不允许修改,因为Todo类型是只读的,当然你也可以这样设置对象中所有的属性为只读

type Todo = Readonly<{
  id: number;
  text: string;
  done: boolean;
}>

在ts中,这种Readonly的关键词还有很多,比如Required,Partial等,如有需要,大家可自行搜索

分类

对于已经完成的list,我们需要将其进行分类筛选,比如我们要筛选出所有已经完成的项目,那么表现就是一个数组,并且done为true

[
  {
    id: 1,
    text: '待办事项1',
    done: true
  },
  {
    id: 2,
    text: '待办事项2',
    done: true
  }
]

如何表示一个数组类内容呢?Todo[]这种方式就能表示上述数据,同样的,函数的参数是不允许修改的,避免副作用,所以可以这样

function completeTodoList(
  todos: readonly Todo[]
): Todo[] {
  // ...
}

当然,由于Todo的type中的done为boolean,但是在completeTodoList中done的值为true,所以我们需要重新定义一个类型

type CompletedTodo = Readonly<{
  id: number;
  text: string;
  done: true;
}>

所以上述的方法就会变成

function completeTodoList(
  todos: readonly Todo[]
): CompletedTodo[] {
  // ...
}

交叉类型

对于上面的Todo和CompletedTodo类型,其中这两个类型的id和text都是重复的,我们可以删除重复的逻辑,使用交叉类型

举个例子

type A = {a: number}
type B = {b: string}
type AandB = A & B
// 结果为
// {
//   a: number
//   b: string
// }

当两个类型key相同时,第二个key会覆盖掉第一个的内容

type A = {key: number}
type B = {key: string}
type AandB = A & B
// 结果为
// {
//   key: string
// }

那针对Todo和CompletedTodo类型,我们想从Todo通过交叉类型得到CompletedTodo,该怎么做呢?

type CompletedTodo = Todo & {
  readonly done: true
}

是不是很简洁,并且去除了一些重复代码

新增功能

如果在Todo的基础上,我们新增了一个功能,对应的todo的优先级,使用priority这个字段表示

并且一共有三种优先级

!!!

!!

你可以priority: 2这样设置,展示为【!!】当然你也可以自定义,比如

{
  priority: {
    custom: '紧急'
  }
}

则展示为【紧急】,所以这时候数据变成了

[
  {
    id: 1,
    text: '待办事项1',
    done: false,
    priority: 1
  },
  {
    id: 2,
    text: '待办事项2',
    done: false,
    priority: 2
  },
  {
    id: 3,
    text: '待办事项3',
    done: false,
    priority: {
      custom: '紧急'
    }
  },
  {
    id: 4,
    text: '待办事项4',
    done: false
  },
]

我们已经有了Todo类型,如何新增一个key呢?

联合类型

上面我们之后交叉类型通过 & 连接,那联合类型则是通过 | 连接,同样的举个例子

type Foo = number | string;

这表示Foo类型可以是一个数字,也可以是一个string类型,所以我们的priority类型可以这样设置

type Priority = 1 | 2 | 3 | { custom: string };

这个时候priority就是我们想要的内容了,所以todo的类型可以变一下

type Todo = Readonly<{
  id: number;
  text: string;
  done: boolean;
  priority: Priority;
}>

可选属性

上面的priority这个属性目前是必填的,但是这个属性我们可以不写,也就是todo可以没有优先级,针对这种情况,我们可以使用可选属性

type Todo = Readonly<{
  id: number;
  text: string;
  done: boolean;
  priority?: Priority;
}>

在对应的地方添加一个?即可

数据转视图

那对应的priority的数据有了,如何把1,2,3这种的转成!!!的形式呢?

可以自定义一个函数,也就是priorityToString

priorityToString(1)
// !
priorityToString(2)
// !!
priorityToString(3)
// !!!
priorityToString({ custom: '紧急' })
// 紧急

情况比较少,可能你会这样写

function priorityToString(priority: Priority): string {
  if(priority === 1){
    return '!'
  }else if(priority === 2){
    return '!!'
  }else if(priority === 3){
    return '!!!'
  }else{
    return priority.custom
  }
}

联合类型我们通过if条件进行判断的时候,它会自动确认每个if条件下的参数类型,这也是联合类型的强大之处

总结

基本上我们项目中用到的一些知识点这里都概括了,通过一个简单的项目,将ts的一些基本类型给大家做了一个简要的说明

参考:ts.chibicode.com/todo/

以上就是项目中使用TypeScript的TodoList实例详解的详细内容,更多关于TypeScript TodoList使用的资料请关注我们其它相关文章!

(0)

相关推荐

  • 数据结构TypeScript之链表实现详解

    目录 链表结构特点 面向对象方法封装链表 构造函数 基本单元:链表节点 主体:链表 查找节点 增加节点 删除节点 链表结构特点 链表是线性表的其中一种,用于存储有固定顺序的元素.而元素之间会通过”链“连接在一起. 链表存储的元素称为节点.每个节点内部存在两个值.如下: this.element:链表需要存储的单个元素 this.next:指向下一个节点,也就是链表中的”链“,将节点连接在一起. 尝试手动构建链表结构.过程如下: class LinkedListNode { constructor

  • TypeScript中的交叉类型和联合类型示例讲解

    目录 交叉类型(Intersection types) 要点 联合类型(Union types) 类型缩减 交叉类型(Intersection types) 什么事交叉类型呢?简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型.这里我举个例子,具体如下: interface ClassA{ name:string; age:number } interface ClassB{ name:string; phone:number; } 将接口ClassA和接口Cl

  • 数据结构TypeScript之二叉查找树实现详解

    目录 树的结构特点 面向对象方法封装二叉查找树(迭代版) 二叉查找树的定义 构造函数 基本单元:二叉查找树节点 主体:二叉查找树 增加节点 查找节点 删除节点 二叉树的遍历 树的结构特点 树是一种有层次的数据结构,通常用于存储具有层次性的数据.比如上下级的关系图,动物的分类图等.树的类型分好几种,无序树.有序树和二叉树等等.但最常应用的还是二叉树,其特点为每个节点最多含有两个子树. 尝试手动构建一颗二叉树. 过程如下: class BinaryTreeNode { constructor(ele

  • 详解Typescript 严格模式有多严格

    目录 正文 noImplicitAny noImplicitThis alwaysStrict strictBindCallApply strictNullChecks strictPropertyInitialization strictFunctionTypes 正文 TypeScript 是微软于 2012 年推出的一门语言,它是 JavaScript 的超集,具有更强的可选类型系统.TypeScript 和 JavaScript 一样是有严格模式的,今天就来看看 TypeScript 中

  • 简单三行代码函数实现几十行Typescript类型推导

    目录 场景 摸鱼吃瓜式排查 元组大法 感叹 场景 最近在设计一些基础的项目框架设计上的 sdk api,比如埋点系统.权限系统之类的,要提供一些便捷的封装方法给上层使用.于是遇到了这么个场景. 有一个对象常量里,存了一些方法,例如: const METHODS = { a: () => "a" as const, b: () => "b" as const, c: () => "c" as const } 然后想要封装这样一个

  • 数据结构TypeScript之邻接表实现示例详解

    目录 图的结构特点 图的分类 图的表示 面向对象方法封装邻接表 构造函数 增加顶点和边 删除顶点和边 图的遍历 颜色标记 广度优先搜索(队列) 深度优先搜索(栈) 图的结构特点 图由顶点和顶点之间的边构成,记为G(V, E).其中V是顶点集合,E是边集合.作为一种非线性的数据结构,顶点之间存在多对多关系. 图的分类 无向图:两个顶点之间有两条互相关联的边.A和B之间为双向互通. 有向图:两个顶点之间有一条或两条关联的边.从A到B或者从B到A,只能单向通过. 带权无向图:在无向图的基础上增加一个权

  • vue-cli中的babel配置文件.babelrc实例详解

    本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解 vue-cli脚手架的.babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd

  • TypeScript 基本数据类型实例详解

    目录 TypeScript 介绍 类型分配 类型推导 数组 元组 object null 和 undefined 特殊类型 any unknown never void TypeScript 介绍 TypeScript 是 JavaScript 的超集,提供了 JavaScript 的所有功能,并提供了可选的静态类型.Mixin.类.接口和泛型等特性. TypeScript 的目标是通过其类型系统帮助及早发现错误并提高 JavaScript 开发效率. 通过 TypeScript 编译器或 Ba

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • C程序中唯一序列号的生成实例详解

    C程序中唯一序列号的生成实例详解 在实际的软件开发项目中,经常会涉及唯一序列号的生成.本文以一个实际的程序为例,介绍了唯一序列号的生成过程. 本文生成的序列号的样式为:MMDDHHMINSS_XXXXXX. 程序如下: * 修改记录1:// 修改历史记录, 包括修改日期.版本号.修改人及修改内容 * 修改日期: 20140603 * 版 本 号: V1.0 * 修 改 人: Zhou Zhaoxiong * 修改内容: 创建 ***********************************

  • Android 中Lambda表达式的使用实例详解

     Android 中Lambda表达式的使用实例详解 Java8 中着实引入了一些非常有特色的功能,如Lambda表达式.streamAPI.接口默认实现等等.Lambda表达式在 Android 中最低兼容到 Android2.3 系统,兼容性还是不错的,Lambda表达式本质上是一种匿名方法,它既没有方法名,也没有访问修饰符和返回值类型,使用它编写的代码将更加简洁易读. 1.Lambda表达式的基本写法 如果想要在 Android 项目中使用 Lambda表达式 或者 Java8 的其他新特

  • Spring Boot项目中定制拦截器的方法详解

    这篇文章主要介绍了Spring Boot项目中定制拦截器的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Servlet 过滤器属于Servlet API,和Spring关系不大.除了使用过滤器包装web请求,Spring MVC还提供HandlerInterceptor(拦截器)工具.根据文档,HandlerInterceptor的功能跟过滤器类似,但拦截器提供更精细的控制能力:在request被响应之前.request被响应之后.视

  • Android项目中实体类entity的作用详解

    估计很多入门安卓的朋友对entity很困惑,为什么要写实体类?有什么用?写来干什么? 对于实体类的理解我入门的时候也是困惑了好久,后面用多了才慢慢理解,这篇博客就当复习和笔记. Java中entity(实体类)的写法规范 在日常的Java项目开发中,entity(实体类)是必不可少的,它们一般都有很多的属性,并有相应的setter和getter方法.entity(实体类)的作用一般是和数据表做映射.所以快速写出规范的entity(实体类)是java开发中一项必不可少的技能. 在项目中写实体类一般

  • java中构造器内部调用构造器实例详解

    可能为一个类写了多个构造器,有时可能想在一个构造器里面调用另外一个构造器,为了减少代码的重复,可用this关键字做到这一点. public class Flower { private String string; private int age; public Flower() { // 先调用public Flower(String string, int age) this("leon", 120); // 先调用public Flower(String string, int

  • React18 中的 Suspense API使用实例详解

    目录 什么是新的 ReactJS Suspense API,什么时候应该使用它? 什么是Suspense API? 什么是 transition API? 最后 什么是新的 ReactJS Suspense API,什么时候应该使用它? 何时使用:当组件开始变大并且您在同一页面上有许多组件时,您可能希望开始优化下载到客户端浏览器的方式和时间. 为此,React 为您提供了lazyAPI,它允许您将组件标记为lazy,这意味着被lazy包裹的组件,将会在第一次真正使用时被加载,而不是页面初始化的时

  • jscpd统计项目中的代码重复度使用详解

    目录 前言 jscpd是什么 如何使用它 安装 示例 配置选项 输出报告 多个项目 规避代码检测 总结 前言 当一个项目开发时间较长以后,总会存在一些重复的代码,这就给维护和扩展带来障碍. 特别是我们的前端项目,多个项目中都存在一些较相似的功能,这部分之前不少采用复制粘贴的方式处理.于是为了优化前端项目的代码,最近我们考虑使用代码重复度来作为衡量指标,对单个或多个项目进行重复代码的统计,并着手重构可优化的重复代码. 而为了统计项目中是否有代码重复,我们使用了 jscpd 工具库,本文将详细介绍该

随机推荐