{"id":10006795,"date":"2022-11-03T21:50:12","date_gmt":"2022-11-03T13:50:12","guid":{"rendered":"https:\/\/ityet.com\/?p=10006795"},"modified":"2022-11-03T21:50:12","modified_gmt":"2022-11-03T13:50:12","slug":"%e7%9c%9f%e6%ad%a3%e7%b1%bb%e5%9e%8b%e5%ae%89%e5%85%a8%e7%9a%84-web-apps","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10006795","title":{"rendered":"\u771f\u6b63\u7c7b\u578b\u5b89\u5168\u7684 Web Apps"},"content":{"rendered":"

TypeScript \u662f Web \u884c\u4e1a\u4e00\u4e2a\u91cd\u8981\u7684\u7ec4\u6210\u90e8\u5206\u3002\u8fd9\u662f\u6709\u5145\u5206\u7406\u7531\u8bc1\u660e\u7684\uff0c\u5b83\u975e\u5e38\u7684\u68d2\u3002\u5f53\u7136\u4e86\uff0c\u6211\u8bf4\u7684\u4e0d\u4ec5\u4ec5\u662f\u4e0b\u9762\u8fd9\u6837<\/p>\n

function add(a: number, b: number) {\n  return a + b\n}\nadd(1, 2) \/\/ \u7c7b\u578b\u68c0\u67e5\u901a\u8fc7\u4e86\nadd('one', 3) \/\/ \u7c7b\u578b\u68c0\u67e5\u6ca1\u901a\u8fc7<\/code><\/pre>\n
\u8fd9\u975e\u5e38\u7684\u9177\uff5e\u4f46\u6211\u60f3\u8bf4\u7684\u662f\u7c7b\u4f3c\u4e0b\u9762\u8fd9\u6837\u7684\uff1a<\/p>\n
\"workshop-type-diagram.jpg\"<\/p>\n
\u8d2f\u7a7f\u6574\u4e2a\u7a0b\u5e8f\u7684\u300c\u7c7b\u578b\u300d\uff08\u5305\u62ec\u4e86\u524d\u7aef\u4e0e\u540e\u7aef\uff09\u3002\u5728\u73b0\u5b9e\u4e2d\u5b83\u53ef\u80fd\u5c31\u662f\u8fd9\u6837\u7684\uff0c\u800c\u4e14\u53ef\u80fd\u5728\u672a\u6765\u7684\u67d0\u4e00\u5929\u4f60\u9700\u8981\u505a\u51fa\u4e00\u4e2a\u975e\u5e38\u8270\u96be\u7684\u51b3\u5b9a\uff1a\u5c06 \u5269\u4f59\u5ea7\u4f4d<\/code> \u8fd9\u4e2a\u5b57\u6bb5\u62c6\u5206\u6210 \u603b\u5ea7\u4f4d<\/code> \u548c \u5df2\u5750\u5ea7\u4f4d<\/code> \u4e24\u4e2a\u5b57\u6bb5\u3002\u5982\u679c\u6ca1\u6709\u300c\u7c7b\u578b\u300d\u6765\u6307\u5bfc\u91cd\u6784\uff0c\u90a3\u4e48\u4f60\u5c06\u4f1a\u975e\u5e38\u56f0\u96be\u3002\u5f53\u7136\u4e86\uff0c\u6211\u4e5f\u975e\u5e38\u5e0c\u671b\u4f60\u6709\u4e00\u4e9b\u5f88\u53ef\u9760\u7684\u5355\u5143\u6d4b\u8bd5\u3002<\/p>\n
\u8fd9\u7bc7\u6587\u7ae0\u6211\u5e76\u4e0d\u662f\u60f3\u8bf4\u670d\u4f60 JavaScript \u4e2d\u7684\u300c\u7c7b\u578b\u300d\u662f\u591a\u4e48\u597d\u3002\u800c\u662f\u60f3\u8ddf\u4f60\u804a\u804a\u300c\u7aef\u5230\u7aef\u7c7b\u578b\u5b89\u5168\u300d\u6709\u591a\u4e48\u7684\u68d2\uff0c\u5e76\u4e14\u8ddf\u4f60\u4ecb\u7ecd\u5982\u4f55\u5c06\u5b83\u5e94\u7528\u5230\u4f60\u7684\u9879\u76ee\u4e2d\u53bb\u3002<\/p>\n
\u9996\u5148\uff0c\u6211\u8fd9\u91cc\u8bf4\u7684\u300c\u7aef\u5230\u7aef\u7c7b\u578b\u5b89\u5168\u300d\u6307\u7684\u662f\uff0c\u4ece\u6570\u636e\u5e93\u5c42\u5230\u540e\u7aef\u4ee3\u7801\u5c42\u518d\u5230\u524d\u7aef UI \u5c42\u7684\u5168\u94fe\u8def\u7c7b\u578b\u5b89\u5168\u3002\u7136\u800c\u6211\u610f\u8bc6\u5230\uff0c\u6bcf\u4e2a\u4eba\u7684\u73af\u5883\u60c5\u51b5\u90fd\u662f\u4e0d\u540c\u7684\u3002\u4f60\u53ef\u80fd\u6ca1\u6709\u64cd\u4f5c\u6570\u636e\u5e93\u7684\u6743\u9650\u3002\u5f53\u5e74\u6211\u5728\u67d0\u4e92\u8054\u7f51\u5927\u5382\u5de5\u4f5c\uff0c\u6211\u7ecf\u5e38\u6d88\u8d39\u8bb8\u591a\u6765\u81ea\u4e0d\u540c\u540e\u7aef\u56e2\u961f\u7684\u670d\u52a1\u3002\u6211\u4ece\u672a\u76f4\u63a5\u64cd\u4f5c\u8fc7\u6570\u636e\u5e93\u3002\u6240\u4ee5\u5982\u679c\u8981\u5b9e\u73b0\u771f\u6b63\u7684\u300c\u7aef\u5230\u7aef\u7c7b\u578b\u5b89\u5168\u300d\uff0c\u53ef\u80fd\u662f\u9700\u8981\u591a\u4e2a\u56e2\u961f\u914d\u5408\u7684\u3002\u4f46\u5e0c\u671b\u6211\u80fd\u5e2e\u52a9\u4f60\u8d70\u4e0a\u6b63\u786e\u7684\u8f68\u9053\uff0c\u5c3d\u53ef\u80fd\u5730\u9002\u5e94\u4f60\u81ea\u5df1\u7684\u60c5\u51b5\u3002<\/p>\n
\u8ba9\u6211\u4eec\u9879\u76ee\u7684\u300c\u7aef\u5230\u7aef\u7c7b\u578b\u5b89\u5168\u300d\u53d8\u5f97\u56f0\u96be\u7684\u6700\u91cd\u8981\u56e0\u7d20\u662f\uff1a\u8fb9\u754c<\/strong><\/p>\n
\u8981\u5b9e\u73b0\u7c7b\u578b\u5b89\u5168\u7684 Web Apps \u5c31\u662f\u8981\u8986\u76d6\u8fb9\u754c\u7684\u7c7b\u578b<\/strong><\/p>\n
\u5728 Web \u73af\u5883\u4e2d\uff0c\u6211\u4eec\u6709\u5f88\u591a\u7684\u8fb9\u754c\u3002\u6709\u4e00\u4e9b\u4f60\u53ef\u80fd\u6bd4\u8f83\u6e05\u695a\uff0c\u6709\u4e00\u4e9b\u4f60\u53ef\u80fd\u6ca1\u6709\u610f\u8bc6\u5230\u3002\u8fd9\u91cc\u6709\u4e00\u4e9b\u4f60\u53ef\u80fd\u4f1a\u5728 Web \u73af\u5883\u4e2d\u9047\u5230\u7684\u8fb9\u754c\u7684\u4f8b\u5b50\uff1a<\/p>\n
\/\/ \u83b7\u53d6 localStorge \u4e2d ticket \u7684\u503c\nconst ticketData = JSON.parse(localStorage.get('ticket'))\n\/\/ \u5b83\u662f any \u7c7b\u578b\u5417 \ud83d\ude31\n\n\/\/ \u4ece form \u8868\u5355\u4e2d\u83b7\u53d6\u503c\n\/\/ <form>\n\/\/   ...\n\/\/   <input type="date" name="workshop-date" \/>\n\/\/   ...\n\/\/ <\/form>\nconst workshopDate = form.elements.namedItem('workshop-date')\n\/\/ \u5b83\u662f Element | RadioNodeList | null \ud83d\ude35 \u8fd9\u6837\u7684\u7c7b\u578b\u5417\n\n\/\/ \u4ece API \u4e2d\u83b7\u53d6\u6570\u636e\nconst data = await fetch('\/api\/workshops').then(r => r.json())\n\/\/ \u5b83\u662f any \u7c7b\u578b\u5417 \ud83d\ude2d\n\n\/\/ \u83b7\u53d6\u914d\u7f6e\u4fe1\u606f\u6216\u8005\u8def\u7531\u4e0a\u7684\u53c2\u6570\uff08\u6bd4\u5982 Remix \u6216\u8005 React Router\uff09\nconst { workshopId } = useParams()\n\/\/ string | undefined \ud83e\udd74\n\n\/\/ \u901a\u8fc7 node.js \u7684 fs \u6a21\u5757\uff0c\u8bfb\u53d6\u6216\u8005\u89e3\u6790\u5b57\u7b26\u4e32\nconst workshops = YAML.parse(await fs.readFile('.\/workshops.yml'))\n\/\/ \u5b83\u662f any \u7c7b\u578b\u5417 \ud83e\udd14\n\n\/\/ \u4ece\u6570\u636e\u5e93\u4e2d\u8bfb\u53d6\u6570\u636e\nconst data = await SQL`select * from workshops`\n\/\/ \u5b83\u662f any \u7c7b\u578b\u5417 \ud83d\ude2c\n\n\/\/ \u4ece\u8bf7\u6c42\u4e2d\u8bfb\u53d6\u6570\u636e\nconst description = formData.get('description')\n\/\/ FormDataEntryValue | null \ud83e\uddd0<\/code><\/pre>\n
\u8fd8\u6709\u66f4\u591a\u793a\u4f8b\uff0c\u4f46\u8fd9\u4e9b\u662f\u4f60\u4f1a\u9047\u5230\u7684\u4e00\u4e9b\u5e38\u89c1\u7684\u8fb9\u754c\uff1a<\/p>\n
    \n
  1. \u672c\u5730\u5b58\u50a8<\/li>\n
  2. \u7528\u6237\u8f93\u5165<\/li>\n
  3. \u7f51\u7edc<\/li>\n
  4. \u57fa\u7840\u914d\u7f6e\u6216\u7ea6\u5b9a<\/li>\n
  5. \u6587\u4ef6\u7cfb\u7edf<\/li>\n
  6. \u6570\u636e\u5e93\u8bf7\u6c42<\/li>\n<\/ol>\n
    \u4e8b\u5b9e\u4e0a\uff0c \u4e0d\u80fd<\/em><\/strong> 100% \u786e\u5b9a\u6211\u4eec\u4ece\u8fb9\u754c\u83b7\u53d6\u5230\u7684\u5185\u5bb9\u5c31\u662f\u6211\u4eec\u9884\u671f\u7684\u5185\u5bb9\u3002\u91cd\u8981\u7684\u4e8b\u60c5\u8bf4\u4e09\u904d\uff1a\u4e0d\u80fd\uff0c\u4e0d\u80fd\uff0c\u4e0d\u80fd\u3002<\/em><\/strong>\u5f53\u7136\u4e86\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 as Workshop<\/code> \u8fd9\u6837\u7684\u663e\u793a\u7c7b\u578b\u58f0\u660e\u6765\u8ba9 TypeScript \u7f16\u8bd1\u901a\u8fc7\u5e76\u6b63\u5e38\u8fd0\u884c\uff0c\u4f46\u8fd9\u53ea\u662f\u628a\u95ee\u9898\u7ed9\u9690\u85cf\u8d77\u6765\u3002\u6587\u4ef6\u53ef\u80fd\u88ab\u5176\u4ed6\u7684\u8fdb\u7a0b\u4fee\u6539\uff0cAPI \u53ef\u80fd\u88ab\u4fee\u6539\uff0c\u7528\u6237\u53ef\u80fd\u624b\u52a8\u4fee\u6539 DOM\u3002\u6240\u4ee5\u6211\u4eec\u65e0\u6cd5\u660e\u786e\u7684\u77e5\u9053\u8fb9\u754c\u7684\u4fee\u6539\u7ed3\u679c\u662f\u5426\u8ddf\u4f60\u9884\u671f\u7684\u4e00\u6837\u7684\u3002<\/p>\n
    \u7136\u800c\uff0c\u4f60\u662f\u80fd\u591f<\/strong>\u505a\u4e00\u4e9b\u4e8b\u60c5\u6765\u89c4\u907f\u4e00\u4e9b\u98ce\u9669\u7684\u3002\u6bd4\u5982\u8bf4\uff1a<\/p>\n
      \n
    1. \u7f16\u5199\u300c\u7c7b\u578b\u5b88\u536b\u51fd\u6570\u300d\u6216\u8005\u300c\u7c7b\u578b\u65ad\u8a00\u51fd\u6570\u300d<\/li>\n
    2. \u4f7f\u7528\u53ef\u4ee5\u7c7b\u578b\u751f\u6210\u7684\u5de5\u5177\uff08\u80fd\u7ed9\u4f60 90% \u7684\u4fe1\u5fc3\uff09<\/li>\n
    3. \u901a\u77e5 TypeScript \u4f60\u7684\u7ea6\u5b9a \/ \u914d\u7f6e<\/li>\n<\/ol>\n
      \u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u770b\u770b\u4f7f\u7528\u8fd9\u4e9b\u7b56\u7565\u901a\u8fc7 Web \u5e94\u7528\u7684\u8fb9\u754c\u6765\u5b9e\u73b0\u7aef\u5bf9\u7aef\u7c7b\u578b\u5b89\u5168<\/p>\n
      \u7c7b\u578b\u5b88\u536b \/ \u65ad\u8a00\u51fd\u6570<\/h2>\n
      \u8fd9\u786e\u5b9e\u662f\u6700\u6709\u6548\u7684\u65b9\u6cd5\u6765\u6309\u7167\u4f60\u7684\u9884\u671f\u5904\u7406\u8fb9\u754c\u7c7b\u578b\u95ee\u9898\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u5199\u4ee3\u7801\u9010\u4e2a\u5b57\u6bb5\u53bb\u68c0\u67e5\u5b83\uff01\u8fd9\u91cc\u6709\u4e00\u4e2a\u7b80\u5355\u7684\u7c7b\u578b\u5b88\u536b\u4f8b\u5b50\uff1a<\/p>\n
      const { workshopId } = useParams()\nif (workshopId) {\n  \/\/ \u4f60\u5df2\u7ecf\u83b7\u53d6\u4e86 workshopId \u5e76\u4e14 TypeScript \u4e5f\u77e5\u9053\u4e86 \n} else {\n  \/\/ \u5904\u7406\u4f60\u83b7\u53d6\u4e0d\u5230 workshopId \u7684\u60c5\u51b5\n}<\/code><\/pre>\n
      \u5728\u8fd9\u4e2a\u65f6\u5019\uff0c\u6709\u4e9b\u4eba\u53ef\u80fd\u4f1a\u56e0\u4e3a\u8981\u8fc1\u5c31 TypeScript \u7f16\u8bd1\u5668\u800c\u611f\u5230\u607c\u706b\u3002\u5982\u679c\u4f60\u5341\u5206\u80af\u5b9a workshopId<\/code> \u662f\u4f60\u5fc5\u987b\u8981\u83b7\u53d6\u7684\u5b57\u6bb5\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5728\u83b7\u53d6\u4e0d\u5230\u7684\u65f6\u5019\u76f4\u63a5\u629b\u51fa\u9519\u8bef\uff08\u8fd9\u6837\u5c06\u5bf9\u4f60\u7684\u7a0b\u5e8f\u6709\u975e\u5e38\u5927\u7684\u5e2e\u52a9\u800c\u4e0d\u662f\u5ffd\u7565\u8fd9\u4e9b\u6f5c\u5728\u7684\u95ee\u9898\uff09<\/p>\n
      const { workshopId } = useParams()\n\nif (!workshipId) {\n    throw new Error('workshopId \u4e0d\u5408\u6cd5')\n}<\/code><\/pre>\n
      \u4e0b\u9762\u8fd9\u4e2a\u5de5\u5177\uff0c\u6211\u5728\u9879\u76ee\u4e2d\u7528\u7684\u6700\u591a\uff0c\u56e0\u4e3a\u5b83\u5341\u5206\u7684\u4fbf\u5229\uff0c\u4e5f\u8ba9\u4ee3\u7801\u53ef\u8bfb\u6027\u66f4\u5f3a<\/p>\n
      import invariant from 'tiny-invariant'\n\nconst { workshopId } = useParams()\ninvariant(workshopId, 'workshopId \u4e0d\u5408\u6cd5')<\/code><\/pre>\n
      tiny-invariant<\/a><\/strong> \u7684 README \u4e2d\u63d0\u5230<\/p>\n
      invariant<\/code><\/em><\/strong> \u8fd9\u4e2a\u51fd\u6570\u6821\u9a8c\u5165\u53c2\uff0c\u5982\u679c\u5165\u53c2\u4e3a false \u5219\u8be5\u51fd\u6570\u4f1a\u629b\u51fa\u9519\u8bef\uff1b\u4e3a true \u5219\u4e0d\u4f1a\u629b\u51fa<\/p><\/blockquote>\n
      \u9700\u8981\u6dfb\u52a0\u989d\u5916\u4ee3\u7801\u6765\u8fdb\u884c\u6821\u9a8c\u603b\u662f\u6bd4\u8f83\u96be\u53d7\u7684\u3002\u8fd9\u662f\u4e00\u4e2a\u68d8\u624b\u7684\u95ee\u9898\u56e0\u4e3a TypeScript \u4e0d\u77e5\u9053\u4f60\u7684\u7ea6\u5b9a\u548c\u914d\u7f6e\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5982\u679c\u80fd\u8ba9 TypeScript \u77e5\u9053\u6211\u4eec\u9879\u76ee\u4e2d\u7684\u7ea6\u5b9a\u548c\u914d\u7f6e\uff0c\u90a3\u4e48\u5c06\u80fd\u591f\u8d77\u5230\u4e00\u5b9a\u7684\u4f5c\u7528\u3002\u8fd9\u91cc\u6709\u4e00\u4e9b\u9879\u76ee\u6b63\u5728\u5904\u7406\u8fd9\u6837\u7684\u95ee\u9898\uff1a<\/p>\n