从零起步，用TypeScript写一个Todo App：踩坑与收获分享

先说说为什么选Todo App练手

Todo App简单吧？加任务、切换状态、删掉它，还得持久化数据。但别小看它，里面藏着React Hooks、状态管理、类型约束的精髓。TS是JS的超级，把TS当JS来写，但加了强类型，就能杜绝大部分错误。比如JS里你加法函数add = a + b。传个字符串''进去，它默默拼接成''，运行时才炸锅。但TS呢，编译时就给你红线：类型“string”的参数不能赋给类型“number”的参数。爽不爽，

我一开始就试了这个。写个简单加法的观点是，

// 这是JS版。弱类型，容易出错
function add {
return a + b;// 二义性，可能是加法也可能是拼接
}
const result = add;console.log，// 输出'5',运行时没报错

说到换TS。

// 强类型可以杜绝90%的错误
function addTs: number {
// :类型约束
return a + b;}
const result2 = addTs;不过，const result3 = addTs;说起来，// 类型“string”的参数不能赋给类型“number”的参数。console.log，// 稳稳的15

看见没？如果不规范写，就会一片红线提示！TS在编辑器里就提醒你了。这不光省调试时间，还让代码更可靠。是团队协作，重构别人的代码时TS的类型提示像个贴心文档。

基础类型和枚举：TS的入门砖

"我只会var和let怎么用TypeScript啊？"

学TS先从基本数据结构开始！TypeScript保留了JavaScript所有原始值并增加静态语言特性：

• :typeName-变量声明强制指定变量属于哪种数据结构；缺省则自动推导.
• 结构
• =new MyClass implements IInterfaceName-创建对象必须满足指定接口要求.
• "为什么需要这些麻烦?"因为前端常见bug多源于未检查值格式如:"user.name.length",当name=

  最常见痛点:

  Error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  The left side of '||' expression may be null or undefined.
  if { // ❌ 不安全!}

  上面这种情况直接使用非空断言: { ... }

  枚举enum优势:

  • 强制取值范围:    "status只能是Pending/Success/Fail三种之一!" - 没有魔术字符串，
  • 提高可读性:   'Status.Success'比statusCode==1好理解多了!
  • 自动命名空间:   'Status.Pending'无需前缀防止命名冲突.
  • AOT转换为纯JS:   '{PENDING:0,SUCCESS:1}'实际代码无额外开销.
  • 谨慎使用!，!，!，!，!: 枚举会污染全局作用域.建议放单独文件export导出.后期维护中若新增项会影响所有引用处!
  .
  Status枚举声明和使用示意图]
  .
  .
  .
  . . .

  any vs unknown vs never三剑客谁最牛?

  . . . . . . . .
  interface vs type到底选谁?. 泛型这方面，让复杂逻辑也能有严格检查！不过，.

  React+TS常用方法模板 - 拆解主要组件交互流程
  tsx
  /* React+TypeScript典范架构 */
  ├── types/
  │ ├── todo.d.ts # 全局通用接口和枚举定义区域
  ├── components/
  │ ├── TodoItem.tsx # 展示组件单元渲染模板
  │ └── TodoList.tsx # 数据集合映射展示容器组件
  ├── hooks/
  │ └── useTodos.ts # 自定义状态管理Hook抽象层封装业务逻辑
  ├── utils/
  │ └── storage.ts # 基础工具函数通用化处理方案提供商
  └── App.tsx # 应用入口组合视图层主控节点
  tsx|src/components/TodoList.tsx|line-numbers|show-line-numbers=true
  import { FC } from "react";import TodoItem from "./TodoItem";老实说，interface Props {
  todos的观点是。ReadonlyArray;onToggle:void;}
  export default function TodoList{
  return (
  
  {todos.map(todo=>
  
  )}
  
  );
  
  }
  
  
  tsx|src/utils/storage.ts|line-numbers
  
  /**
  * 泛化存储工具箱 - 支持所有JSON可序列化数据结构存取操作封装模式设计思路：
  * @template T - 被存储内容具体形状描述符号标识位占位符语法表示方法；* @returns 泛化返回值承诺其完全等同于输入T本身属性集合保持恒等关系。*/
  export function setStorage(
  key这方面。string,data，:T|null,options?:StorageOptions):
  Promise{...}
  
  /**
  * 获取本地缓存泛化包装器函数：
  * @param key 唯一标识字段名称字符串形式表示方式；* @param defaultValue 默认返回值回退备选方案。*/
  export async function getStorage(
  key的观点是。string,defaultValue?:T)
  {
  ...
  }
  
  
  tsx|src/hooks/useTodos.ts|line-numbers
  
  /**
  * 自定义钩子使用场景：
  * · 数据流管道封装隔离；* · 外部依赖抽象层统一；* · 模块边界清晰划分。*/
  export function useTodos:{
  todos这方面，GetterSetterArray,actions:{
  再看toggle，=>void,remove:=>void。edit:=>Promise,...
  }
  }{...}
  
  
  declare module "*.css" {
  const content:string;export default content;}
  
  declare namespace GlobalConstants {
  const STORAGEKEYTODO:'@todo-app/v';其实，}
  
  interface TodoBase{
  从id来看。number，怎么说呢，
   title:string;completed，其实，:boolean;:any，
  
  }
  
  /**
  * @typedef {Object} StorageOptions - 本地存储配置项集合描述信息说明文档注释注解。按理说，*
  * @property {number} 数据版本号控制机制标记位置指针信息记录记录日志程序功能模块服务支持功能特性
  能力扩充套餐套餐选择价格套餐套餐服务支持功能特性
  能力扩充。其实，*/
  type StorageOptions={
  version?:number,timeout?:number,maxAge?:DateTimeStringFormat,...
  };
  
  
  html
  

  特殊底层原语对比表:
  TypeName..	.

  ---