{"id":38112,"date":"2023-11-25T22:21:16","date_gmt":"2023-05-14T17:13:20","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/react-typescript-%e4%bb%a5%e5%bf%ab%e7%85%a7%e7%9a%84%e5%bd%a2%e5%bc%8f%e5%91%88%e7%8e%b0%e7%8a%b6%e6%80%81\/"},"modified":"2024-05-04T10:47:01","modified_gmt":"2024-05-04T02:47:01","slug":"react-typescript-%e4%bb%a5%e5%bf%ab%e7%85%a7%e7%9a%84%e5%bd%a2%e5%bc%8f%e5%91%88%e7%8e%b0%e7%8a%b6%e6%80%81","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/react-typescript-%e4%bb%a5%e5%bf%ab%e7%85%a7%e7%9a%84%e5%bd%a2%e5%bc%8f%e5%91%88%e7%8e%b0%e7%8a%b6%e6%80%81\/","title":{"rendered":"React + TypeScript: \u4ee5\u5feb\u7167\u7684\u5f62\u5f0f\u5448\u73b0\u72b6\u6001"},"content":{"rendered":"

React\u5b98\u65b9\u7f51\u7ad9\u7684\u6587\u6863\u5df2\u4e8e2023\u5e743\u670816\u65e5\u8fdb\u884c\u4e86\u4fee\u8ba2\uff08\u8bf7\u53c2\u9605\u201cIntroducing react.dev\u201d\uff09\u3002\u672c\u6587\u6458\u8981\u6574\u7406\u4e86\u57fa\u672c\u89e3\u91ca\u4e2d\u7684\u201cState as a Snapshot\u201d\u5e76\u6dfb\u52a0\u4e86TypeScript\u4ee3\u7801\u3002\u4f46\u662f\uff0c\u6211\u4eec\u7701\u7565\u4e86\u9488\u5bf9\u521d\u5b66\u8005\u7684JavaScript\u57fa\u7840\u8bf4\u660e\u3002<\/p>\n

\u6b64\u5916\uff0c\u5173\u4e8e\u672c\u7cfb\u5217\u89e3\u8bf4\u7684\u5176\u4ed6\u6587\u7ae0\uff0c\u8bf7\u53c2\u8003\u300cReact + TypeScript\uff1a\u5b66\u4e60React\u5b98\u65b9\u6587\u6863\u57fa\u7840\u89e3\u8bf4\u300eLearn React\u300f\u300d\u3002<\/p>\n

\u72b6\u6001\u53d8\u91cf\u53ef\u80fd\u4f1a\u8ba9\u4eba\u4ee5\u4e3a\u5b83\u4eec\u50cf\u6807\u51c6JavaScript\u53d8\u91cf\u4e00\u6837\u53ef\u4ee5\u8bfb\u5199\u503c\u3002\u7136\u800c\uff0c\u72b6\u6001\u7684\u884c\u4e3a\u66f4\u63a5\u8fd1\u4e8e\u201c\u5feb\u7167\u201d\uff08\u4f5c\u8005\u6ce8\uff1a\u8bb0\u5f55\u5f53\u524d\u4fe1\u606f\u7684\u5feb\u7167\uff09\u3002\u72b6\u6001\u7684\u8bbe\u7f6e\u5e76\u4e0d\u662f\u5bf9\u9884\u5148\u786e\u5b9a\u7684\u503c\u8fdb\u884c\u66f4\u6539\uff0c\u800c\u662f\u91cd\u65b0\u89e6\u53d1\u518d\u6e32\u67d3\u3002<\/p>\n

\u6839\u636e\u72b6\u6001\u8bbe\u5b9a\u542f\u52a8\u6e32\u67d3<\/h1>\n

\u5728React\u4e2d\uff0c\u7528\u6237\u754c\u9762\u4e0d\u4f1a\u76f4\u63a5\u6839\u636e\u4ea4\u4e92\u4e8b\u4ef6\u7b49\u8fdb\u884c\u66f4\u65b0\u3002\u5f53\u72b6\u6001\u53d1\u751f\u6539\u53d8\u65f6\uff0cReact\u4f1a\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6\u3002\u76f8\u53cd\uff0c\u8981\u663e\u793a\u4e0e\u4e8b\u4ef6\u76f8\u5e94\u7684\u754c\u9762\uff0c\u9700\u8981\u66f4\u65b0\u72b6\u6001\u3002<\/p>\n

\u4f8b\u5982\uff0c\u5728\u4ee5\u4e0b\u7684\u4ee3\u7801\u793a\u4f8b\u4e2d\uff0c\u5f53\u70b9\u51fb\u8868\u5355(Form)\u7684[\u53d1\u9001]\u6309\u94ae\u65f6\uff0c\u72b6\u6001\u53d8\u91cf(isSent)\u4f1a\u88ab\u66f4\u65b0\uff0cReact\u4f1a\u91cd\u65b0\u6e32\u67d3UI\uff08\u793a\u4f8b001\uff09\u3002<\/p>\n

import<\/span> {<\/span> ChangeEventHandler<\/span>,<\/span> FormEventHandler<\/span>,<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Form<\/span> }<\/span> from<\/span> '<\/span>.\/Form<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> SendMessage<\/span> }<\/span> from<\/span> '<\/span>.\/SendMessage<\/span>'<\/span>;<\/span>\r\n\r\nconst<\/span> sendMessage<\/span> =<\/span> (<\/span>message<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n\t\/\/ ...<\/span>\r\n};<\/span>\r\nexport<\/span> default<\/span> function<\/span> App<\/span>()<\/span> {<\/span>\r\n\tconst<\/span> [<\/span>isSent<\/span>,<\/span> setIsSent<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>);<\/span>\r\n\tconst<\/span> [<\/span>message<\/span>,<\/span> setMessage<\/span>]<\/span> =<\/span> useState<\/span><<\/span>any<\/span>><\/span>(<\/span>'<\/span>Hi!<\/span>'<\/span>);<\/span>\r\n\tconst<\/span> handleChange<\/span>:<\/span> ChangeEventHandler<\/span><<\/span>HTMLTextAreaElement<\/span>><\/span> =<\/span> ({<\/span>\r\n\t\ttarget<\/span>:<\/span> {<\/span> value<\/span> }<\/span>\r\n\t})<\/span> =><\/span> {<\/span>\r\n\t\tsetMessage<\/span>(<\/span>value<\/span>);<\/span>\r\n\t};<\/span>\r\n\tconst<\/span> handleSubmit<\/span>:<\/span> FormEventHandler<\/span><<\/span>HTMLFormElement<\/span>><\/span> =<\/span> (<\/span>event<\/span>)<\/span> =><\/span> {<\/span>\r\n\t\tevent<\/span>.<\/span>preventDefault<\/span>();<\/span>\r\n\t\tsetIsSent<\/span>(<\/span>true<\/span>);<\/span>\r\n\t\tsendMessage<\/span>(<\/span>message<\/span>);<\/span>\r\n\t};<\/span>\r\n\treturn<\/span> isSent<\/span> ?<\/span> (<\/span>\r\n\t\t<<\/span>SendMessage<\/span> \/><\/span>\r\n\t)<\/span> :<\/span> (<\/span>\r\n\t\t<<\/span>Form<\/span>\r\n\t\t\thandleChange<\/span>=<\/span>{<\/span>handleChange<\/span>}<\/span>\r\n\t\t\thandleSubmit<\/span>=<\/span>{<\/span>handleSubmit<\/span>}<\/span>\r\n\t\t\tmessage<\/span>=<\/span>{<\/span>message<\/span>}<\/span>\r\n\t\t\/><\/span>\r\n\t);<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
import<\/span> {<\/span> ChangeEventHandler<\/span>,<\/span> FC<\/span>,<\/span> FormEventHandler<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\ntype<\/span> Props<\/span> =<\/span> {<\/span>\r\n\thandleChange<\/span>:<\/span> ChangeEventHandler<\/span><<\/span>HTMLTextAreaElement<\/span>><\/span>;<\/span>\r\n\thandleSubmit<\/span>:<\/span> FormEventHandler<\/span><<\/span>HTMLFormElement<\/span>><\/span>;<\/span>\r\n\tmessage<\/span>:<\/span> string<\/span>;<\/span>\r\n};<\/span>\r\nexport<\/span> const<\/span> Form<\/span>:<\/span> FC<\/span><<\/span>Props<\/span>><\/span> =<\/span> ({<\/span> handleChange<\/span>,<\/span> handleSubmit<\/span>,<\/span> message<\/span> })<\/span> =><\/span> {<\/span>\r\n\treturn <\/span>(<\/span>\r\n\t\t<<\/span>form<\/span> onSubmit<\/span>=<\/span>{<\/span>handleSubmit<\/span>}<\/span>><\/span>\r\n\t\t\t<<\/span>textarea<\/span> placeholder<\/span>=<\/span>\"Message\"<\/span> value<\/span>=<\/span>{<\/span>message<\/span>}<\/span> onChange<\/span>=<\/span>{<\/span>handleChange<\/span>}<\/span> \/><\/span>\r\n\t\t\t<<\/span>button<\/span> type<\/span>=<\/span>\"submit\"<\/span>><\/span>Send<\/<\/span>button<\/span>><\/span>\r\n\t\t<\/<\/span>form<\/span>><\/span>\r\n\t);<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
React + TypeScript: \u4ee5\u5feb\u7167\u5f62\u5f0f\u7ba1\u7406\u72b6\u6001\u7684\u793a\u4f8b001<\/h4>\n
 <\/p>\n
\u8ba9\u6211\u4eec\u6309\u987a\u5e8f\u9010\u6b65\u786e\u8ba4\u70b9\u51fb\u6309\u94ae\u540e\u53d1\u751f\u4e86\u4ec0\u4e48\u3002<\/p>\n
    \n
  1. \n
      \u9996\u5148\u4f1a\u8c03\u7528onSubmit\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u3002<\/ol>\n<\/li>\n<\/ol>\n
       <\/p>\n
        \n
      1. \n
          \u5728\u90a3\u91cc\u6267\u884c\u7684\u662f\u72b6\u6001\u53d8\u91cf\u8bbe\u7f6e\u51fd\u6570setIsSent\u3002\u65b0\u7684\u503c\uff08true\uff09\u5c06\u88ab\u52a0\u5165\u5230\u6e32\u67d3\u961f\u5217\u4e2d\u3002<\/ol>\n<\/li>\n<\/ol>\n
           <\/p>\n
            \u7136\u540eReact\u4f1a\u6839\u636e\u5df2\u66f4\u65b0\u7684\u72b6\u6001\u53d8\u91cf\u503c\uff08isSent\uff09\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6\u3002<\/ol>\n
            \u6e32\u67d3\u662f\u5728\u90a3\u4e2a\u65f6\u523b\u62cd\u6444\u7684\u5feb\u7167\u3002<\/h1>\n
            \u300c\u6e32\u67d3\u300d\u662f\u6307React\u8c03\u7528\u51fd\u6570\u7ec4\u4ef6\u3002\u8be5\u51fd\u6570\u8fd4\u56de\u7684JSX\u53ef\u4ee5\u8bf4\u662f\u5f53\u524dUI\u7684\u5feb\u7167\u3002\u5c5e\u6027\u3001\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u548c\u5c40\u90e8\u53d8\u91cf\u90fd\u6839\u636e\u6e32\u67d3\u65f6\u7684\u72b6\u6001\u8fdb\u884c\u8ba1\u7b97\u3002<\/p>\n
            \u8fd4\u56de\u7684UI\u5feb\u7167\u662f\u4ea4\u4e92\u5f0f\u7684\u3002\u56e0\u6b64\uff0c\u5b83\u5305\u542b\u4e86\u6839\u636e\u8f93\u5165\u51b3\u5b9a\u89e6\u53d1\u4ec0\u4e48\u7684\u4e8b\u4ef6\u5904\u7406\u7b49\u903b\u8f91\u3002\u56e0\u6b64\uff0cReact\u4f1a\u6839\u636e\u8fd9\u4e2a\u5feb\u7167\u66f4\u65b0\u5c4f\u5e55\uff0c\u5e76\u5c06\u5176\u8fde\u63a5\u5230\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4e0a\u3002\u7ed3\u679c\u662f\uff0c\u4f8b\u5982\uff0c\u5f53\u6309\u4e0b\u6309\u94ae\u65f6\uff0cJSX\u7684\u70b9\u51fb\u5904\u7406\u7a0b\u5e8f\u4f1a\u88ab\u8c03\u7528\u3002<\/p>\n
            \u4ee5\u4e0b\u662f\u4f7f\u7528React\u8fdb\u884c\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\u7684\u6b65\u9aa4\uff1a<\/p>\n
              \n
            1. \n
                \u51fd\u6570\u6267\u884c\uff1aReact\u518d\u6b21\u8c03\u7528\u51fd\u6570\u3002<\/ol>\n<\/li>\n<\/ol>\n
                \u8ba1\u7b97\u5feb\u7167\uff1a\u51fd\u6570\u8fd4\u56de\u7684\u662f\u65b0\u7684JSX\u5feb\u7167\u3002<\/p>\n
                \u66f4\u65b0DOM\u6811\uff1aReact\u6839\u636e\u8fd4\u56de\u503c\u7684\u5feb\u7167\u6765\u66f4\u65b0\u754c\u9762\u3002<\/p>\n
                \u5bf9\u4e8e\u7ec4\u4ef6\u6765\u8bf4\uff0c\u4e0e\u901a\u5e38\u7684\u53d8\u91cf\u4e0d\u540c\uff0c\u4f5c\u4e3a\u7ec4\u4ef6\u7684\u8bb0\u5fc6\u89d2\u8272\u7684\u72b6\u6001\u4e0d\u4f1a\u5728\u51fd\u6570\u5904\u7406\u5b8c\u540e\u6d88\u5931\u3002\u5b9e\u9645\u4e0a\uff0c\u8fd9\u4e9b\u72b6\u6001\u662f\u7531React\u672c\u8eab\u6301\u6709\u5728\u51fd\u6570\u5916\u90e8\u3002\u5f53React\u8c03\u7528\u7ec4\u4ef6\u65f6\uff0c\u83b7\u53d6\u5230\u7684\u662f\u5e94\u8be5\u7528\u4e8e\u6e32\u67d3\u7684\u72b6\u6001\u5feb\u7167\u3002\u800c\u7ec4\u4ef6\u8fd4\u56de\u7684UI\u5feb\u7167\u5305\u542b\u4e86\u6700\u65b0\u7684\u5c5e\u6027\u548c\u4e8b\u4ef6\u5904\u7406\u5668\uff0c\u5b83\u4eec\u90fd\u5305\u542b\u5728JSX\u4e2d\u3002\u6240\u6709\u8fd9\u4e9b\u90fd\u662f\u57fa\u4e8e\u8be5\u6e32\u67d3\u7684\u72b6\u6001\u503c\u8fdb\u884c\u8ba1\u7b97\u7684\u3002<\/p>\n
                \u4e3a\u4e86\u7406\u89e3\u72b6\u6001\u5feb\u7167\uff0c\u8ba9\u6211\u4eec\u8003\u8651\u4e0b\u9762\u4ee3\u7801\u7684\u7ed3\u679c\u3002\u5728\u6309\u94ae(