{"id":131,"date":"2026-07-23T23:41:12","date_gmt":"2026-07-23T15:41:12","guid":{"rendered":"https:\/\/fsdata.site\/?p=131"},"modified":"2026-07-23T23:41:12","modified_gmt":"2026-07-23T15:41:12","slug":"typescript-advanced-types","status":"publish","type":"post","link":"https:\/\/fsdata.site\/?p=131","title":{"rendered":"TypeScript \u7c7b\u578b\u4f53\u64cd\uff1a\u4ece\u5165\u95e8\u5230\u5b9e\u7528\u6280\u5de7"},"content":{"rendered":"<h2>\u4e3a\u4ec0\u4e48\u8981\u5b66&#8221;\u7c7b\u578b\u4f53\u64cd&#8221;<\/h2>\n<p>TypeScript \u6700\u88ab\u4f4e\u4f30\u7684\u80fd\u529b\uff0c\u662f\u5b83\u80fd\u5728<strong>\u7f16\u8bd1\u671f<\/strong>\u628a\u5927\u91cf Bug \u6321\u5728\u8fd0\u884c\u524d\u3002\u5f88\u591a\u4eba\u53ea\u7528\u5230 <code>string<\/code>\/<code>number<\/code> \u8fd9\u79cd\u57fa\u7840\u7c7b\u578b\uff0c\u4f46\u771f\u6b63\u7701\u5fc3\u7684\u662f\u6cdb\u578b\u3001\u6761\u4ef6\u7c7b\u578b\u3001\u6620\u5c04\u7c7b\u578b\u8fd9\u4e9b&#8221;\u9ad8\u7ea7\u73a9\u6cd5&#8221;\u2014\u2014\u5b83\u4eec\u80fd\u8ba9\u4f60\u6539\u4e00\u4e2a\u63a5\u53e3\u5b57\u6bb5\uff0c\u6240\u6709\u8c03\u7528\u5904\u7acb\u523b\u62a5\u7ea2\uff0c\u800c\u4e0d\u662f\u534a\u591c\u6536\u5230\u7ebf\u4e0a\u62a5\u9519\u3002<\/p>\n<h2>\u4e00\u3001\u8054\u5408\u7c7b\u578b\u4e0e\u5b57\u9762\u91cf<\/h2>\n<pre><code>type Status = 'pending' | 'running' | 'done';\nfunction render(s: Status) { \/* ... *\/ }\nrender('done');     \/\/ OK\nrender('error');    \/\/ \u7f16\u8bd1\u62a5\u9519\uff1a\u4e0d\u5728\u8054\u5408\u5185\n<\/code><\/pre>\n<h2>\u4e8c\u3001\u6cdb\u578b\uff1a\u8ba9\u7c7b\u578b\u8ddf\u7740\u6570\u636e\u8d70<\/h2>\n<pre><code>function first&lt;T&gt;(arr: T[]): T | undefined {\n  return arr[0];\n}\nconst a = first([1, 2, 3]);     \/\/ a: number | undefined\nconst b = first(['x', 'y']);   \/\/ b: string | undefined\n<\/code><\/pre>\n<h2>\u4e09\u3001\u6761\u4ef6\u7c7b\u578b + infer<\/h2>\n<p>\u6761\u4ef6\u7c7b\u578b\u50cf\u4e09\u5143\u8868\u8fbe\u5f0f\uff0c<code>infer<\/code> \u80fd\u4ece\u5df2\u6709\u7c7b\u578b\u91cc&#8221;\u63d0\u53d6&#8221;\u7ed3\u6784\uff1a<\/p>\n<pre><code>type ElementType&lt;T&gt; = T extends (infer U)[] ? U : T;\ntype X = ElementType&lt;number[]&gt;;   \/\/ number\ntype Y = ElementType&lt;string&gt;;     \/\/ string\n<\/code><\/pre>\n<h2>\u56db\u3001\u6620\u5c04\u7c7b\u578b\uff1a\u6279\u91cf\u6539\u9020<\/h2>\n<p>\u628a\u5df2\u6709\u7c7b\u578b\u7684\u6bcf\u4e2a\u5c5e\u6027\u7edf\u4e00\u52a0 <code>readonly<\/code> \u6216\u6539\u53ef\u9009\uff1a<\/p>\n<pre><code>type ReadonlyUser = {\n  readonly [K in keyof User]: User[K];\n};\n<\/code><\/pre>\n<h2>\u4e94\u3001\u5185\u7f6e\u5de5\u5177\u7c7b\u578b\u591f\u7528\u5927\u534a<\/h2>\n<table border=\"1\" cellpadding=\"6\">\n<tr>\n<th>\u5de5\u5177\u7c7b\u578b<\/th>\n<th>\u4f5c\u7528<\/th>\n<\/tr>\n<tr>\n<td>Partial&lt;T&gt;<\/td>\n<td>\u6240\u6709\u5c5e\u6027\u53d8\u53ef\u9009<\/td>\n<\/tr>\n<tr>\n<td>Required&lt;T&gt;<\/td>\n<td>\u6240\u6709\u5c5e\u6027\u53d8\u5fc5\u586b<\/td>\n<\/tr>\n<tr>\n<td>Pick&lt;T, K&gt;<\/td>\n<td>\u53ea\u53d6\u90e8\u5206\u5c5e\u6027<\/td>\n<\/tr>\n<tr>\n<td>Record&lt;K, V&gt;<\/td>\n<td>\u6784\u9020\u952e\u503c\u6620\u5c04\u7c7b\u578b<\/td>\n<\/tr>\n<tr>\n<td>ReturnType&lt;F&gt;<\/td>\n<td>\u63d0\u53d6\u51fd\u6570\u8fd4\u56de\u503c\u7c7b\u578b<\/td>\n<\/tr>\n<\/table>\n<h2>\u516d\u3001\u5b9e\u6218\uff1a\u7ed9 API \u54cd\u5e94\u5efa\u7c7b\u578b<\/h2>\n<pre><code>interface ApiResp&lt;T&gt; {\n  code: number;\n  msg: string;\n  data: T;\n}\ntype UserResp = ApiResp&lt;{ id: number; name: string }&gt;;\n\nfunction getUser(): UserResp {\n  \/\/ \u8fd4\u56de\u7ed3\u6784\u4e0d\u5bf9\uff0c\u7f16\u8bd1\u671f\u76f4\u63a5\u62a5\u9519\n  return { code: 0, msg: 'ok', data: { id: 1, name: 'Agnes' } };\n}\n<\/code><\/pre>\n<h2>\u4e03\u3001\u5224\u522b\u8054\u5408\uff08Discriminated Union\uff09<\/h2>\n<p>\u7528\u540c\u4e00\u4e2a\u5b57\u6bb5\u533a\u5206\u4e0d\u540c\u7c7b\u578b\uff0c\u914d\u5408 <code>switch<\/code> \u8ba9 TS \u81ea\u52a8\u6536\u7a84\uff1a<\/p>\n<pre><code>type Shape =\n  | { kind: 'circle'; r: number }\n  | { kind: 'rect'; w: number; h: number };\n\nfunction area(s: Shape) {\n  if (s.kind === 'circle') return Math.PI * s.r ** 2;\n  return s.w * s.h;   \/\/ \u8fd9\u91cc TS \u5df2\u77e5\u9053\u662f rect\n}\n<\/code><\/pre>\n<h2>\u5c0f\u7ed3<\/h2>\n<p>\u7c7b\u578b\u4f53\u64cd\u4e0d\u662f\u70ab\u6280\uff0c\u800c\u662f\u628a&#8221;\u8fd0\u884c\u65f6\u624d\u53d1\u73b0\u7684\u9519&#8221;\u63d0\u524d\u5230&#8221;\u5199\u4ee3\u7801\u65f6\u5c31\u770b\u89c1&#8221;\u3002\u4ece\u8054\u5408\u7c7b\u578b\u3001\u6cdb\u578b\u5165\u624b\uff0c\u518d\u5b66\u6761\u4ef6\u7c7b\u578b\u548c\u6620\u5c04\u7c7b\u578b\uff0c\u4f60\u7684 TypeScript \u4f1a\u4ece&#8221;\u52a0\u4e86\u7c7b\u578b\u7684 JavaScript&#8221;\u8fdb\u5316\u6210\u771f\u6b63\u7684\u7c7b\u578b\u5b89\u5168\u62a4\u76fe\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4ece\u6761\u4ef6\u7c7b\u578b\u3001infer \u5230\u6620\u5c04\u7c7b\u578b\uff0c\u628a\u8fd0\u884c\u65f6\u62a5\u9519\u524d\u79fb\u5230\u7f16\u8bd1\u671f\uff0c\u63a5\u53e3\u6539\u5b57\u6bb5\u8c03\u7528\u5904\u7acb\u523b\u62a5\u7ea2\u3002<\/p>\n","protected":false},"author":2,"featured_media":122,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-dev"],"_links":{"self":[{"href":"https:\/\/fsdata.site\/index.php?rest_route=\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fsdata.site\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fsdata.site\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fsdata.site\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fsdata.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=131"}],"version-history":[{"count":0,"href":"https:\/\/fsdata.site\/index.php?rest_route=\/wp\/v2\/posts\/131\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fsdata.site\/index.php?rest_route=\/wp\/v2\/media\/122"}],"wp:attachment":[{"href":"https:\/\/fsdata.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fsdata.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fsdata.site\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}