1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[2350],{9613:function(e,n,t){t.d(n,{Zo:function(){return s},kt:function(){return d}});var r=t(9496);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function m(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var p=r.createContext({}),o=function(e){var n=r.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=o(e.components);return r.createElement(p.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},c=r.forwardRef((function(e,n){var t=e.components,i=e.mdxType,a=e.originalType,p=e.parentName,s=m(e,["components","mdxType","originalType","parentName"]),c=o(t),d=i,b=c["".concat(p,".").concat(d)]||c[d]||u[d]||a;return t?r.createElement(b,l(l({ref:n},s),{},{components:t})):r.createElement(b,l({ref:n},s))}));function d(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var a=t.length,l=new Array(a);l[0]=c;var m={};for(var p in n)hasOwnProperty.call(n,p)&&(m[p]=n[p]);m.originalType=e,m.mdxType="string"==typeof e?e:i,l[1]=m;for(var o=2;o<a;o++)l[o]=t[o];return r.createElement.apply(null,l)}return r.createElement.apply(null,t)}c.displayName="MDXCreateElement"},751:function(e,n,t){t.r(n),t.d(n,{frontMatter:function(){return m},contentTitle:function(){return p},metadata:function(){return o},toc:function(){return s},default:function(){return c}});var r=t(5900),i=t(4750),a=(t(9496),t(9613)),l=["components"],m={sidebar_label:"\u57fa\u7840\uff1a\u4ec0\u4e48\u662f TypeScript \u6cdb\u578b",sidebar_position:6},p="\u4ec0\u4e48\u662f TypeScript \u6cdb\u578b",o={unversionedId:"book4/js-ts-generics",id:"book4/js-ts-generics",isDocsHomePage:!1,title:"\u4ec0\u4e48\u662f TypeScript \u6cdb\u578b",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book4/js-ts-generics.md",sourceDirName:"book4",slug:"/book4/js-ts-generics",permalink:"/awesome-interview/book4/js-ts-generics",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_label:"\u57fa\u7840\uff1a\u4ec0\u4e48\u662f TypeScript \u6cdb\u578b",sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"\u6846\u67b6\uff1a\u8c08\u8c08 React \u548c Vue \u7684\u533a\u522b",permalink:"/awesome-interview/book4/frame-react-vs-vue"},next:{title:"\u6837\u5f0f\uff1a\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u65b9\u6848",permalink:"/awesome-interview/book4/css-vertical-horizontal-center"}},s=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[],level:2},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[],level:2},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u6cdb\u578b\u7c7b",id:"1-\u6cdb\u578b\u7c7b",children:[],level:3},{value:"2. \u6cdb\u578b\u63a5\u53e3",id:"2-\u6cdb\u578b\u63a5\u53e3",children:[],level:3},{value:"3. \u6cdb\u578b\u7ea6\u675f",id:"3-\u6cdb\u578b\u7ea6\u675f",children:[],level:3},{value:"4. \u5185\u7f6e\u7684\u5de5\u5177\u7c7b\u578b",id:"4-\u5185\u7f6e\u7684\u5de5\u5177\u7c7b\u578b",children:[{value:"4.1 Partial<Type>",id:"41-partialtype",children:[],level:4},{value:"4.2 Required<Type>",id:"42-requiredtype",children:[],level:4},{value:"4.3 Exclude<UnionType, ExcludedMembers>",id:"43-excludeuniontype-excludedmembers",children:[],level:4},{value:"4.4 Pick<Type, Keys>",id:"44-picktype-keys",children:[],level:4},{value:"4.5 Omit<Type, Keys>",id:"45-omittype-keys",children:[],level:4},{value:"4.6 ReturnType<Type>",id:"46-returntypetype",children:[],level:4},{value:"4.7 infer",id:"47-infer",children:[],level:4}],level:3}],level:2},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[],level:2}],u={toc:s};function c(e){var n=e.components,t=(0,i.Z)(e,l);return(0,a.kt)("wrapper",(0,r.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"\u4ec0\u4e48\u662f-typescript-\u6cdb\u578b"},"\u4ec0\u4e48\u662f TypeScript \u6cdb\u578b"),(0,a.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"TypeScript \u6cdb\u578b\u7684\u4f5c\u7528\u662f\u4ec0\u4e48")),(0,a.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"\u5de5\u5177")," ",(0,a.kt)("inlineCode",{parentName:"p"},"\u4f7f\u7528\u65f6\u6307\u5b9a\u7c7b\u578b")),(0,a.kt)("p",null,"TypeScript \u6cdb\u578b\u662f\u4e00\u79cd\u5de5\u5177\u3002\u5b83\u80fd\u8ba9\u5f00\u53d1\u8005\u4e0d\u5728\u5b9a\u4e49\u65f6\u6307\u5b9a\u7c7b\u578b\uff0c\u800c\u5728\u4f7f\u7528\u65f6\u6307\u5b9a\u7c7b\u578b\u3002"),(0,a.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,a.kt)("h3",{id:"1-\u6cdb\u578b\u7c7b"},"1. \u6cdb\u578b\u7c7b"),(0,a.kt)("p",null,"\u7c7b\u578b\u53c2\u6570\u5728\u7c7b\u540d\u540e\u9762\u7684\u5c16\u62ec\u53f7\u4e2d\u6307\u5b9a\u3002\u6cdb\u578b\u7c7b\u53ef\u4ee5\u5177\u6709\u6cdb\u578b\u5b57\u6bb5\u6216\u65b9\u6cd5\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'class HZFEMember<T, U> {\n private id!: T;\n private name!: U;\n\n setMember(id: T, name: U): void {\n this.id = id;\n this.name = name;\n }\n\n show(): void {\n console.log(`ID: ${this.id}, Name: ${this.name}`);\n }\n}\n\nconst member1 = new HZFEMember<number, string>();\nmember1.setMember(1, "QingZhen");\nmember1.show(); // ID: 1, Name: QingZhen\n\nconst member2 = new HZFEMember<string, string>();\nmember2.setMember("02", "Aki");\nmember2.show(); // ID: 02, Name: Aki\n')),(0,a.kt)("h3",{id:"2-\u6cdb\u578b\u63a5\u53e3"},"2. \u6cdb\u578b\u63a5\u53e3"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'interface HZFEMember<T, U> {\n id: T;\n name: U;\n}\n\nconst member1: HZFEMember<number, string> = {\n id: 1,\n name: "QingZhen",\n};\nconsole.log(`ID: ${member1.id}, Name: ${member1.name}`); // ID: 1, Name: QingZhen\n\nconst member2: HZFEMember<string, string> = {\n id: "02",\n name: "Aki",\n};\nconsole.log(`ID: ${member2.id}, Name: ${member2.name}`); // ID: 02, Name: Aki\n')),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u51fd\u6570\u7c7b\u578b\u7684\u6cdb\u578b\u63a5\u53e3")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'interface ShowHZFEMember<T, U> {\n (id: T, name: U): void;\n}\n\nconst showHZFEMember: ShowHZFEMember<number, string> = function (id, name) {\n console.log(`ID: ${id}, Name: ${name}`);\n};\nshowHZFEMember(1, "QingZhen"); // ID: 1, Name: QingZhen\n\nconst showHZFEMember2: ShowHZFEMember<string, string> = function (id, name) {\n console.log(`ID: ${id}, Name: ${name}`);\n};\nshowHZFEMember2("02", "Aki"); // ID: 02, Name: Aki\n')),(0,a.kt)("h3",{id:"3-\u6cdb\u578b\u7ea6\u675f"},"3. \u6cdb\u578b\u7ea6\u675f"),(0,a.kt)("p",null,"\u5728\u4e0b\u9762\u7684\u4f8b\u5b50\u4e2d\u8bbf\u95ee member \u7684 id \u5c5e\u6027\u65f6\uff0c\u56e0\u4e3a\u7f16\u8bd1\u5668\u5e76\u4e0d\u80fd\u8bc1\u660e member \u4e2d\u6709 id \u5c5e\u6027\uff0c\u6240\u4ee5\u4f1a\u62a5\u9519\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"function getHZFEMember<T>(member: T): T {\n console.log(`ID: ${member.id}`); // Property 'id' does not exist on type 'T'.\n return member;\n}\n")),(0,a.kt)("p",null,"\u5982\u679c\u6211\u4eec\u60f3\u8981\u9650\u5236\u51fd\u6570\u53ea\u80fd\u5904\u7406\u5e26\u6709 id \u5c5e\u6027\u7684\u7c7b\u578b\uff0c\u5c31\u9700\u8981\u5217\u51fa\u5bf9\u4e8e T \u7684\u7ea6\u675f\u8981\u6c42\u3002\u6211\u4eec\u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u63a5\u53e3\u6765\u63cf\u8ff0\u7ea6\u675f\u6761\u4ef6\uff0c\u521b\u5efa\u4e00\u4e2a\u5305\u542b \xa0id \u5c5e\u6027\u7684\u63a5\u53e3\uff0c\u4f7f\u7528\u8fd9\u4e2a\u63a5\u53e3\u548c ",(0,a.kt)("inlineCode",{parentName:"p"},"extends")," \u5173\u952e\u5b57\u6765\u5b9e\u73b0\u7ea6\u675f\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"interface Member {\n id: number;\n}\n\nfunction getHZFEMember<T extends Member>(member: T): T {\n console.log(`ID: ${member.id}`);\n return member;\n}\n\ngetHZFEMember(\"QingZhen\"); // Argument of type 'string' is not assignable to parameter of type 'Member'.\ngetHZFEMember({ id: 1, name: \"QingZhen\" }); // ID: 1\n")),(0,a.kt)("h3",{id:"4-\u5185\u7f6e\u7684\u5de5\u5177\u7c7b\u578b"},"4. \u5185\u7f6e\u7684\u5de5\u5177\u7c7b\u578b"),(0,a.kt)("p",null,"TypeScript \u63d0\u4f9b\u4e86\u4e00\u4e9b\u5185\u7f6e\u7684\u5de5\u5177\u7c7b\u578b\uff0c\u672c\u8d28\u4e0a\u4e5f\u662f\u901a\u8fc7\u8303\u578b\u6765\u5b9e\u73b0\u7684\u3002\u4e0b\u9762\uff0c\u6211\u4eec\u901a\u8fc7\u51e0\u79cd\u5e38\u7528\u7684\u7c7b\u578b\u6765\u770b\u770b\u5b83\u4eec\u662f\u600e\u4e48\u5b9e\u73b0\u7684\u3002"),(0,a.kt)("h4",{id:"41-partialtype"},"4.1 Partial<Type",">"),(0,a.kt)("p",null,"\u901a\u8fc7\u5c06 Type \u4e2d\u7684\u6240\u6709\u5c5e\u6027\u90fd\u8bbe\u7f6e\u4e3a\u53ef\u9009\u6765\u6784\u9020\u4e00\u4e2a\u65b0\u7684\u7c7b\u578b\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"interface Member {\n id: number;\n name: string;\n age: number;\n}\nconst hzfer: Member = {\n id: 1,\n name: \"Qingzhen\",\n}; // Property 'age' is missing in type '{ id: number; name: string; }' but required in type 'Member'.\n\ntype HZFEMember = Partial<Member>;\nconst hzfer2: HZFEMember = {\n id: 1,\n name: \"Qingzhen\",\n}; // No errors\n")),(0,a.kt)("p",null,"\u6e90\u7801\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"type Partial<T> = {\n [P in keyof T]?: T[P];\n};\n")),(0,a.kt)("h4",{id:"42-requiredtype"},"4.2 Required<Type",">"),(0,a.kt)("p",null,"\u901a\u8fc7\u5c06 Type \u4e2d\u7684\u6240\u6709\u5c5e\u6027\u90fd\u8bbe\u7f6e\u4e3a\u5fc5\u9009\u6765\u6784\u9020\u4e00\u4e2a\u65b0\u7684\u7c7b\u578b\u3002\u548c Partial \u76f8\u53cd\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"interface Member {\n id: number;\n name: string;\n age?: number;\n}\nconst hzfer: Member = {\n id: 1,\n name: \"Qingzhen\",\n}; // No errors\n\ntype HZFEMember = Required<Member>;\nconst hzfer2: HZFEMember = {\n id: 1,\n name: \"Qingzhen\",\n}; // Property 'age' is missing in type '{ id: number; name: string; }' but required in type 'Required<Member>'\n")),(0,a.kt)("p",null,"\u6e90\u7801\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"type Required<T> = {\n [P in keyof T]-?: T[P];\n};\n")),(0,a.kt)("h4",{id:"43-excludeuniontype-excludedmembers"},"4.3 Exclude<UnionType, ExcludedMembers>"),(0,a.kt)("p",null,"\u4ece\u8054\u5408\u7c7b\u578b UnionType \u4e2d\u6392\u9664 ExcludedMembers \u4e2d\u7684\u6240\u6709\u8054\u5408\u6210\u5458\u6765\u6784\u9020\u4e00\u4e2a\u65b0\u7684\u7c7b\u578b\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'type HZFEMemberProps = Exclude<"id" | "name" | "age", "age">;\n\nconst hzferProp: HZFEMemberProps = "age"; // Type \'"age"\' is not assignable to type \'HZFEMemberProps\'.\n')),(0,a.kt)("p",null,"\u6e90\u7801\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"type Exclude<T, U> = T extends U ? never : T;\n")),(0,a.kt)("h4",{id:"44-picktype-keys"},"4.4 Pick<Type, Keys>"),(0,a.kt)("p",null,"\u4ece\u4e00\u4e2a\u5df2\u6709\u7684\u7c7b\u578b Type \u4e2d\u9009\u62e9\u4e00\u7ec4\u5c5e\u6027 Keys \u6765\u6784\u9020\u4e00\u4e2a\u65b0\u7684\u7c7b\u578b\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'interface Member {\n id: number;\n name: string;\n age: number;\n}\n\ntype HZFEMember = Pick<Member, "id" | "name">;\n\nconst hzfer: HZFEMember = {\n id: 1,\n name: "QingZhen",\n age: 18, // Object literal may only specify known properties, and \'age\' does not exist in type \'HZFEMember\'.\n};\n')),(0,a.kt)("p",null,"\u6e90\u7801\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"type Pick<T, K extends keyof T> = {\n [P in K]: T[P];\n};\n")),(0,a.kt)("h4",{id:"45-omittype-keys"},"4.5 Omit<Type, Keys>"),(0,a.kt)("p",null,"\u4ece\u4e00\u4e2a\u5df2\u6709\u7684\u7c7b\u578b Type \u4e2d\u79fb\u9664\u4e00\u7ec4\u5c5e\u6027 Keys \u6765\u6784\u9020\u4e00\u4e2a\u65b0\u7684\u7c7b\u578b\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'interface Member {\n id: number;\n name: string;\n age: number;\n}\n\ntype HZFEMember = Omit<Member, "id" | "age">;\n\nconst hzfer: HZFEMember = {\n id: 1, // Object literal may only specify known properties, and \'id\' does not exist in type \'HZFEMember\'.\n name: "QingZhen",\n};\n')),(0,a.kt)("p",null,"\u6e90\u7801\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;\n")),(0,a.kt)("h4",{id:"46-returntypetype"},"4.6 ReturnType<Type",">"),(0,a.kt)("p",null,"\u6784\u9020\u4e00\u4e2a\u7531\u51fd\u6570\u7684\u8fd4\u56de\u503c\u7684\u7c7b\u578b Type \u7ec4\u6210\u7684\u7c7b\u578b\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"interface GetHZFEMember {\n (id: number): {\n id: number;\n name: string;\n age: number;\n };\n}\n\ntype HZFEMember = ReturnType<GetHZFEMember>; // type HZFEMember = { id: number; name: string; age: number; };\n")),(0,a.kt)("p",null,"\u6e90\u7801\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"type ReturnType<T extends (...args: any) => any> = T extends (\n ...args: any\n) => infer R\n ? R\n : any;\n")),(0,a.kt)("h4",{id:"47-infer"},"4.7 infer"),(0,a.kt)("p",null,"infer \u8868\u793a\u5728 extends \u6761\u4ef6\u8bed\u53e5\u4e2d\u5f85\u63a8\u65ad\u7684\u7c7b\u578b\u53d8\u91cf\u3002"),(0,a.kt)("p",null,"\u4e0a\u6587\u7684 ReturnType \u6e90\u7801\u4e2d\u7684 ",(0,a.kt)("inlineCode",{parentName:"p"},"infer R")," \u5c31\u4ee3\u8868\u4e86\u5f85\u63a8\u65ad\u7684\u51fd\u6570\u7684\u8fd4\u56de\u503c\u7c7b\u578b\u3002"),(0,a.kt)("p",null,"\u501f\u52a9\u8fd9\u4e2a\u80fd\u529b\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 infer \u6765\u5b9e\u73b0 tuple \u8f6c union\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"// \u5982\u679c\u6cdb\u578b\u53c2\u6570 T \u6ee1\u8db3\u7ea6\u675f\u6761\u4ef6 Array<infer I>\uff0c\u90a3\u4e48\u5c31\u8fd4\u56de\u8fd9\u4e2a\u7c7b\u578b\u53d8\u91cf\ntype TypeOfArrayItem<T> = T extends Array<infer I> ? I : never;\n\ntype MyTuple = [string, number];\n\ntype MyUnion = TypeOfArrayItem<MyTuple>; // string | number\n")),(0,a.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://www.typescriptlang.org/docs/handbook/2/generics.html"},"Generics"))))}c.isMDXComponent=!0}}]); |