{"id":2003,"date":"2025-03-22T17:58:55","date_gmt":"2025-03-22T09:58:55","guid":{"rendered":"https:\/\/www.fanyamin.com\/wordpress\/?p=2003"},"modified":"2025-03-22T17:58:55","modified_gmt":"2025-03-22T09:58:55","slug":"%e5%85%a8%e6%a0%88%e7%ac%94%e8%ae%b0%e4%b9%8b-todomvc-by-react-and-typescript","status":"publish","type":"post","link":"https:\/\/www.fanyamin.com\/wordpress\/?p=2003","title":{"rendered":"\u5168\u6808\u7b14\u8bb0\u4e4b TodoMVC by React and TypeScript"},"content":{"rendered":"

\u8fd9\u4e2a TypeScript + React \u7684 TodoMVC \u9879\u76ee\u662f\u4e00\u4e2a\u7ecf\u5178\u7684\u524d\u7aef\u793a\u4f8b\u5e94\u7528\uff0c\u9002\u5408\u5b66\u4e60\u5982\u4f55\u7528 React \u548c TypeScript \u6784\u5efa\u4e00\u4e2a\u5c0f\u578b\u7684\u529f\u80fd\u5b8c\u6574\u7684\u5e94\u7528\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u4f1a \u8be6\u7ec6\u62c6\u89e3\u4ee3\u7801\u7ed3\u6784\u548c\u6838\u5fc3\u903b\u8f91<\/strong>\uff0c\u8ba9\u4f60\u66f4\u5bb9\u6613\u7406\u89e3\u3002 <\/p>\n

\n

\u4e00\u3001\u9879\u76ee\u7ed3\u6784\u6982\u89c8<\/strong><\/h2>\n

\u9879\u76ee\u7684\u76ee\u5f55\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n

typescript-react\/\n\u2502\u2500\u2500 index.html\n\u2502\u2500\u2500 package.json\n\u2502\u2500\u2500 tsconfig.json\n\u2502\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 index.tsx\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u251c\u2500\u2500 App.tsx\n\u2502   \u2502   \u251c\u2500\u2500 TodoItem.tsx\n\u2502   \u2502   \u251c\u2500\u2500 TodoFooter.tsx\n\u2502   \u251c\u2500\u2500 models\/\n\u2502   \u2502   \u251c\u2500\u2500 Todo.ts<\/code><\/pre>\n
\u6bcf\u4e2a\u6587\u4ef6\u7684\u4f5c\u7528\u5982\u4e0b\uff1a<\/p>\n
    \n
  • index.html<\/code><\/strong>: HTML \u5165\u53e3\u6587\u4ef6\uff0c\u5305\u542b <div id="app"><\/div><\/code>\uff0cReact \u5e94\u7528\u4f1a\u6302\u8f7d\u5230\u8fd9\u91cc\u3002<\/li>\n
  • package.json<\/code><\/strong>: \u8bb0\u5f55\u4e86\u9879\u76ee\u4f9d\u8d56\uff08React\u3001TypeScript\u7b49\uff09\uff0c\u4ee5\u53ca\u8fd0\u884c\u548c\u6253\u5305\u7684\u811a\u672c\u3002<\/li>\n
  • tsconfig.json<\/code><\/strong>: TypeScript \u914d\u7f6e\u6587\u4ef6\uff0c\u5b9a\u4e49\u4e86\u4ee3\u7801\u7f16\u8bd1\u89c4\u5219\u3002<\/li>\n
  • src\/<\/code><\/strong>:\n
      \n
    • index.tsx<\/code><\/strong>: React \u5165\u53e3\u6587\u4ef6\uff0c\u628a App<\/code> \u7ec4\u4ef6\u6e32\u67d3\u5230 HTML \u4e2d\u3002<\/li>\n
    • components\/<\/code><\/strong>:<\/li>\n
    • App.tsx<\/code><\/strong>: \u5e94\u7528\u7684\u6838\u5fc3\u7ec4\u4ef6\uff0c\u8d1f\u8d23\u7ba1\u7406\u5f85\u529e\u4e8b\u9879\u7684\u72b6\u6001\uff08\u6dfb\u52a0\u3001\u5220\u9664\u3001\u4fee\u6539\uff09\u3002<\/li>\n
    • TodoItem.tsx<\/code><\/strong>: \u4ee3\u8868\u4e00\u4e2a\u5f85\u529e\u4e8b\u9879\u7684\u7ec4\u4ef6\uff0c\u6e32\u67d3\u5f85\u529e\u4e8b\u9879\uff0c\u5e76\u5904\u7406\u52fe\u9009\/\u5220\u9664\u7b49\u64cd\u4f5c\u3002<\/li>\n
    • TodoFooter.tsx<\/code><\/strong>: \u8d1f\u8d23\u5e95\u90e8\u7b5b\u9009\u3001\u7edf\u8ba1\u548c\u6e05\u9664\u5df2\u5b8c\u6210\u4efb\u52a1\u7684\u529f\u80fd\u3002<\/li>\n
    • models\/<\/code><\/strong>:<\/li>\n
    • Todo.ts<\/code><\/strong>: \u5b9a\u4e49 Todo<\/code> \u7c7b\u578b\u7ed3\u6784\uff0c\u65b9\u4fbf TypeScript \u8fdb\u884c\u7c7b\u578b\u68c0\u67e5\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
      \n
      \u4e8c\u3001\u4ee3\u7801\u8be6\u7ec6\u89e3\u6790<\/strong><\/h2>\n
      1. index.tsx<\/code> - \u5165\u53e3\u6587\u4ef6<\/strong><\/h3>\n
      import React from "react";\nimport { createRoot } from "react-dom\/client";\nimport { App } from ".\/components\/App";\n\nconst root = createRoot(document.getElementById("app")!);\nroot.render(<App \/>);<\/code><\/pre>\n
      \u89e3\u6790\uff1a<\/p>\n
        \n
      • \u5f15\u5165 React \u548c ReactDOM<\/strong>\uff0c\u7528\u4e8e\u6e32\u67d3 React \u7ec4\u4ef6\u3002<\/li>\n
      • createRoot(document.getElementById("app")!)<\/code><\/strong>: \u5728 index.html<\/code> \u91cc\u627e\u5230 <div id="app"><\/code> \u5e76\u6302\u8f7d React \u5e94\u7528\u3002<\/li>\n
      • root.render(<App \/>);<\/code><\/strong>: \u6e32\u67d3 App<\/code> \u7ec4\u4ef6\uff0c\u5b83\u662f\u5e94\u7528\u7684\u6839\u7ec4\u4ef6\u3002<\/li>\n<\/ul>\n
        \n
        2. models\/Todo.ts<\/code> - \u5b9a\u4e49 Todo \u7c7b\u578b<\/strong><\/h3>\n
        export interface Todo {\n  id: number;\n  text: string;\n  completed: boolean;\n}<\/code><\/pre>\n
        \u89e3\u6790\uff1a<\/p>\n