docs__myblog__frame__ts_00.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[66],{IIwL:function(e,n,t){"use strict";t.r(n);var a=t("q1tI"),l=t.n(a),r=t("dEAq"),c=t("H1Ra"),o=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h1",{id:"ts-\u521d\u63a2"},l.a.createElement(r["AnchorLink"],{to:"#ts-\u521d\u63a2","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"TS \u521d\u63a2"),l.a.createElement("h2",{id:"\u4ea4\u53c9\u7c7b\u578b"},l.a.createElement(r["AnchorLink"],{to:"#\u4ea4\u53c9\u7c7b\u578b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4ea4\u53c9\u7c7b\u578b"),l.a.createElement("p",null,"\u4ea4\u53c9\u7c7b\u578b\u662f\u4e00\u79cd\u5c06\u591a\u79cd\u7c7b\u578b\u7ec4\u5408\u4e3a\u4e00\u79cd\u7c7b\u578b\u7684\u65b9\u6cd5\u3002\u8fd9\u610f\u5473\u7740\u4f60\u53ef\u4ee5\u5c06\u7ed9\u5b9a\u7684\u7c7b\u578b A \u4e0e\u7c7b\u578b B \u6216\u66f4\u591a\u7c7b\u578b\u5408\u5e76\uff0c\u5e76\u83b7\u5f97\u5177\u6709\u6240\u6709\u5c5e\u6027\u7684\u5355\u4e2a\u7c7b\u578b"),l.a.createElement("p",null,"\u4f8b\u5b50\uff1a"),l.a.createElement(c["a"],{code:"//\u63a5\u53e3\ntype leftType = {\n  id: number,\n  left: string,\n};\n\ntype rightType = {\n  id: number,\n  right: string,\n};\n\ntype IntersectionType = leftType & rightType;\n\nfunction showType(args: IntersectionType) {\n  console.log(args);\n}\n\nshowType({ id: 1, left: 'test', right: 'test' });\n//{ id: 1, left: 'test', right: 'test' }",lang:"js"}),l.a.createElement("h2",{id:"\u8054\u5408\u7c7b\u578b"},l.a.createElement(r["AnchorLink"],{to:"#\u8054\u5408\u7c7b\u578b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u8054\u5408\u7c7b\u578b"),l.a.createElement("p",null,"\u8054\u5408\u7c7b\u578b\u4f7f\u4f60\u53ef\u4ee5\u8d4b\u4e88\u540c\u4e00\u4e2a\u53d8\u91cf\u4e0d\u540c\u7684\u7c7b\u578b"),l.a.createElement(c["a"],{code:"type UnionType = string | number;\n\nfunction showType(arg: UnionType) {\n  console.log(arg);\n}\n\nshowType('test');\n// Output: test\n\nshowType(7);\n// Output: 7",lang:"js"}),l.a.createElement("p",null,"\u51fd\u6570",l.a.createElement("code",null,"showType"),"\u662f\u4e00\u4e2a\u8054\u5408\u7c7b\u578b\u51fd\u6570\uff0c\u5b83\u63a5\u53d7\u5b57\u7b26\u4e32\u6216\u8005\u6570\u5b57\u4f5c\u4e3a\u53c2\u6570"),l.a.createElement("h2",{id:"generic-types\u6cdb\u578b"},l.a.createElement(r["AnchorLink"],{to:"#generic-types\u6cdb\u578b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Generic Types(\u6cdb\u578b)"),l.a.createElement("p",null,"\u6cdb\u578b\u7c7b\u578b\u662f\u590d\u7528\u7ed9\u5b9a\u7c7b\u578b\u7684\u4e00\u90e8\u5206\u7684\u4e00\u79cd\u65b9\u5f0f\u3002\u5b83\u6709\u52a9\u4e8e\u6355\u83b7\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7684\u7c7b\u578b T"),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u4f18\u70b9: \u521b\u5efa\u53ef\u91cd\u7528\u7684\u51fd\u6570\uff0c\u4e00\u4e2a\u51fd\u6570\u53ef\u4ee5\u652f\u6301\u591a\u79cd\u7c7b\u578b\u7684\u6570\u636e\u3002\u8fd9\u6837\u5f00\u53d1\u8005\u5c31\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u6570\u636e\u7c7b\u578b\u6765\u4f7f\u7528\u51fd\u6570")),l.a.createElement("p",null,l.a.createElement("strong",null,"\u6cdb\u578b\u51fd\u6570")),l.a.createElement(c["a"],{code:"function showType<T>(args: T) {\n  console.log(args);\n}\n\nshowType('test');\n// Output: \"test\"\n\nshowType(1);\n// Output: 1",lang:"js"}),l.a.createElement("p",null,"\u5982\u4f55\u521b\u5efa\u6cdb\u578b\u7c7b\u578b:\u9700\u8981\u4f7f\u7528<>\u5e76\u5c06 T(\u540d\u79f0\u53ef\u81ea\u5b9a\u4e49)\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u3002\u4e0a\u9762\u7684 \ud83c\udf30 \u6817\u5b50\u4e2d\uff0c \u6211\u4eec\u7ed9 ",l.a.createElement("code",null,"showType")," \u6dfb\u52a0\u4e86\u7c7b\u578b\u53d8\u91cf ",l.a.createElement("code",null,"T"),"\u3002",l.a.createElement("code",null,"T"),"\u5e2e\u52a9\u6211\u4eec\u6355\u83b7\u7528\u6237\u4f20\u5165\u7684\u53c2\u6570\u7684\u7c7b\u578b(\u6bd4\u5982\uff1anumber/string)\u4e4b\u540e\u6211\u4eec\u5c31\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e2a\u7c7b\u578b"),l.a.createElement("p",null,"\u6211\u4eec\u628a ",l.a.createElement("code",null,"showType")," \u51fd\u6570\u53eb\u505a\u6cdb\u578b\u51fd\u6570\uff0c\u56e0\u4e3a\u5b83\u53ef\u4ee5\u9002\u7528\u4e8e\u591a\u4e2a\u7c7b\u578b"),l.a.createElement("p",null,l.a.createElement("strong",null,"\u6cdb\u578b\u63a5\u53e3")),l.a.createElement(c["a"],{code:"interface GenericType<T> {\n  id: number;\n  name: T;\n}\n//\u591a\u53c2\u6570 (args: GenericType<string,string[]>)\nfunction showType(args: GenericType<string>) {\n  console.log(args);\n}\n\nshowType({ id: 1, name: 'test' });\n// Output: {id: 1, name: \"test\"}\n\nfunction showTypeTwo(args: GenericType<number>) {\n  console.log(args);\n}\n\nshowTypeTwo({ id: 1, name: 4 });\n// Output: {id: 1, name: 4}",lang:"ts"}),l.a.createElement("p",null,"\u5728\u4e0a\u9762\u7684\u6817\u5b50\u4e2d\uff0c\u58f0\u660e\u4e86\u4e00\u4e2a ",l.a.createElement("code",null,"GenericType")," \u63a5\u53e3\uff0c\u8be5\u63a5\u53e3\u63a5\u6536\u6cdb\u578b\u7c7b\u578b T, \u5e76\u901a\u8fc7\u7c7b\u578b T \u6765\u7ea6\u675f\u63a5\u53e3\u5185 name \u7684\u7c7b\u578b"),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u6ce8:\u6cdb\u578b\u53d8\u91cf\u7ea6\u675f\u4e86\u6574\u4e2a\u63a5\u53e3\u540e\uff0c\u5728\u5b9e\u73b0\u7684\u65f6\u5019\uff0c\u5fc5\u987b\u6307\u5b9a\u4e00\u4e2a\u7c7b\u578b")),l.a.createElement("p",null,"\u6cdb\u578b\u7c7b\u578b\u53ef\u4ee5\u63a5\u6536\u591a\u4e2a\u53c2\u6570\u3002\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u4f20\u5165\u4e24\u4e2a\u53c2\u6570\uff1aT \u548c U\uff0c\u7136\u540e\u5c06\u5b83\u4eec\u7528\u4f5c id,name \u7684\u7c7b\u578b\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u6211\u4eec\u73b0\u5728\u53ef\u4ee5\u4f7f\u7528\u8be5\u63a5\u53e3\u5e76\u63d0\u4f9b\u4e0d\u540c\u7684\u7c7b\u578b\u4f5c\u4e3a\u53c2\u6570"),l.a.createElement("h2",{id:"partial"},l.a.createElement(r["AnchorLink"],{to:"#partial","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Partial"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Partial<T>"))),l.a.createElement("p",null,l.a.createElement("code",null,"Partial")," \u5141\u8bb8\u4f60\u5c06 T \u7c7b\u578b\u7684\u6240\u6709\u5c5e\u6027\u8bbe\u4e3a\u53ef\u9009\u3002\u5b83\u5c06\u5728\u6bcf\u4e00\u4e2a\u5b57\u6bb5\u540e\u9762\u6dfb\u52a0\u4e00\u4e2a",l.a.createElement("code",null,"?")),l.a.createElement(c["a"],{code:"interface PartialType {\n  id: number;\n  firstName: string;\n  lastName: string;\n}\n\n/*\n\u7b49\u6548\u4e8e\ninterface PartialType {\n  id?: number\n  firstName?: string\n  lastName?: string\n}\n*/\n\nfunction showType(args: Partial<PartialType>) {\n  console.log(args);\n}\n\nshowType({ id: 1 });\n// Output: {id: 1}\n\nshowType({ firstName: 'John', lastName: 'Doe' });\n// Output: {firstName: \"John\", lastName: \"Doe\"}",lang:"ts"}),l.a.createElement("h2",{id:"required"},l.a.createElement(r["AnchorLink"],{to:"#required","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Required"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Required<T>")," \u5c06\u67d0\u4e2a\u7c7b\u578b\u91cc\u7684\u5c5e\u6027\u5168\u90e8\u53d8\u4e3a\u5fc5\u9009\u9879")),l.a.createElement(c["a"],{code:"interface RequiredType {\n  id: number;\n  firstName?: string;\n  lastName?: string;\n}\n\nfunction showType(args: Required<RequiredType>) {\n  console.log(args);\n}\n\nshowType({ id: 1, firstName: 'John', lastName: 'Doe' });\n// Output: { id: 1, firstName: \"John\", lastName: \"Doe\" }\n\nshowType({ id: 1 });\n// Error: Type '{ id: number: }' is missing the following properties from type 'Required<RequiredType>': firstName, lastName",lang:"ts"}),l.a.createElement("p",null,"\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u5373\u4f7f\u6211\u4eec\u5728\u4f7f\u7528\u63a5\u53e3\u4e4b\u524d\u5148\u5c06\u67d0\u4e9b\u5c5e\u6027\u8bbe\u4e3a\u53ef\u9009\uff0c\u4f46 Required \u88ab\u52a0\u5165\u540e\u4e5f\u4f1a\u4f7f\u6240\u6709\u5c5e\u6027\u6210\u4e3a\u5fc5\u9009\u3002\u5982\u679c\u7701\u7565\u67d0\u4e9b\u5fc5\u9009\u53c2\u6570\uff0c",l.a.createElement("code",null,"TypeScript")," \u5c06\u62a5\u9519"),l.a.createElement("h2",{id:"readonly"},l.a.createElement(r["AnchorLink"],{to:"#readonly","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Readonly"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Readonly<T>"))),l.a.createElement("p",null,"\u4f1a\u8f6c\u6362\u7c7b\u578b\u7684\u6240\u6709\u5c5e\u6027\uff0c\u4ee5\u4f7f\u5b83\u4eec\u65e0\u6cd5\u88ab\u4fee\u6539"),l.a.createElement(c["a"],{code:"interface ReadonlyType {\n  id: number;\n  name: string;\n}\n\nfunction showType(args: Readonly<ReadonlyType>) {\n  args.id = 4;\n  console.log(args);\n}\n\nshowType({ id: 1, name: 'Doe' });\n// Error: Cannot assign to 'id' because it is a read-only property.",lang:"ts"}),l.a.createElement("p",null,"\u9664\u6b64\u4e4b\u5916\uff0c\u4f60\u8fd8\u53ef\u4ee5\u5728\u6307\u5b9a\u7684\u5c5e\u6027\u524d\u9762\u4f7f\u7528\u5173\u952e\u5b57 readonly \u4f7f\u5176\u65e0\u6cd5\u88ab\u91cd\u65b0\u8d4b\u503c"),l.a.createElement(c["a"],{code:"interface ReadonlyType {\n  readonly id: number;\n  name: string;\n}",lang:"ts"}),l.a.createElement("h2",{id:"pick"},l.a.createElement(r["AnchorLink"],{to:"#pick","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Pick"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Pick<T, K>"),"\u6b64\u65b9\u6cd5\u5141\u8bb8\u4f60\u4ece\u4e00\u4e2a\u5df2\u5b58\u5728\u7684\u7c7b\u578b T \u4e2d\u9009\u62e9\u4e00\u4e9b\u5c5e\u6027\u4f5c\u4e3a K, \u4ece\u800c\u521b\u5efa\u4e00\u4e2a\u65b0\u7c7b\u578b \u5373 \u62bd\u53d6\u4e00\u4e2a\u7c7b\u578b/\u63a5\u53e3\u4e2d\u7684\u4e00\u4e9b\u5b50\u96c6\u4f5c\u4e3a\u4e00\u4e2a\u65b0\u7684\u7c7b\u578b")),l.a.createElement("p",null,"T \u4ee3\u8868\u8981\u62bd\u53d6\u7684\u5bf9\u8c61 K \u6709\u4e00\u4e2a\u7ea6\u675f: \u4e00\u5b9a\u662f\u6765\u81ea T \u6240\u6709\u5c5e\u6027\u5b57\u9762\u91cf\u7684\u8054\u5408\u7c7b\u578b \u65b0\u7684\u7c7b\u578b/\u5c5e\u6027\u4e00\u5b9a\u8981\u4ece K \u4e2d\u9009\u53d6"),l.a.createElement(c["a"],{code:"interface PickType {\n  id: number;\n  firstName: string;\n  lastName: string;\n}\n\nfunction showType(args: Pick<PickType, 'firstName' | 'lastName'>) {\n  console.log(args);\n}\n\nshowType({ firstName: 'John', lastName: 'Doe' });\n// Output: {firstName: \"John\"}\n\nshowType({ id: 3 });\n// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, \"firstName\" | \"lastName\">'",lang:"ts"}),l.a.createElement("p",null,l.a.createElement("code",null,"Pick")," \u4e0e\u6211\u4eec\u524d\u9762\u8ba8\u8bba\u7684\u5de5\u5177\u6709\u4e00\u4e9b\u4e0d\u540c\uff0c\u5b83\u9700\u8981\u4e24\u4e2a\u53c2\u6570:"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"T"),"\u662f\u8981\u4ece\u4e2d\u9009\u62e9\u5143\u7d20\u7684\u7c7b\u578b"),l.a.createElement("li",null,l.a.createElement("code",null,"K"),"\u662f\u8981\u9009\u62e9\u7684\u5c5e\u6027(\u53ef\u4ee5\u4f7f\u4f7f\u7528\u8054\u5408\u7c7b\u578b\u6765\u9009\u62e9\u591a\u4e2a\u5b57\u6bb5)")),l.a.createElement("h2",{id:"omit"},l.a.createElement(r["AnchorLink"],{to:"#omit","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Omit"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Omit<T, K>")," Omit \u7684\u4f5c\u7528\u4e0e Pick \u7c7b\u578b\u6b63\u597d\u76f8\u53cd\u3002\u4e0d\u662f\u9009\u62e9\u5143\u7d20\uff0c\u800c\u662f\u4ece\u7c7b\u578b T \u4e2d\u5220\u9664 K \u4e2a\u5c5e\u6027\u3002")),l.a.createElement(c["a"],{code:"interface PickType {\n  id: number;\n  firstName: string;\n  lastName: string;\n}\n\nfunction showType(args: Omit<PickType, 'firstName' | 'lastName'>) {\n  console.log(args);\n}\n\nshowType({ id: 7 });\n// Output: {id: 7}\n\nshowType({ firstName: 'John' });\n// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, \"id\">'",lang:"ts"}),l.a.createElement("h2",{id:"extract"},l.a.createElement(r["AnchorLink"],{to:"#extract","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Extract"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Extract<T, U>"))),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u63d0\u53d6 T \u4e2d\u53ef\u4ee5\u8d4b\u503c\u7ed9 U \u7684\u7c7b\u578b--\u53d6\u4ea4\u96c6")),l.a.createElement("p",null,l.a.createElement("code",null,"Extract"),"\u5141\u8bb8\u4f60\u901a\u8fc7\u9009\u62e9\u4e24\u79cd\u4e0d\u540c\u7c7b\u578b\u4e2d\u7684\u5171\u6709\u5c5e\u6027\u6765\u6784\u9020\u65b0\u7684\u7c7b\u578b\u3002\u4e5f\u5c31\u662f\u4ece",l.a.createElement("code",null,"T"),"\u4e2d\u63d0\u53d6\u6240\u6709\u53ef\u5206\u914d\u7ed9",l.a.createElement("code",null,"U"),"\u7684\u5c5e\u6027"),l.a.createElement(c["a"],{code:'interface FirstType {\n    id: number;\n    firstName: string;\n    lastName: string;\n}\n\ninterface SecondType {\n    id: number;\n    address: string;\n    city: string;\n}\n\ntype ExtractType = Extract<keyof FirstType, keyof SecondType>;\n// Output: "id"',lang:"js"}),l.a.createElement("p",null,"\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c",l.a.createElement("code",null,"FirstType"),"\u63a5\u53e3\u548c",l.a.createElement("code",null,"SecondType"),"\u63a5\u53e3\uff0c\u90fd\u5b58\u5728 ",l.a.createElement("code",null,"id:number"),"\u5c5e\u6027\u3002\u56e0\u6b64\uff0c\u901a\u8fc7\u4f7f\u7528",l.a.createElement("code",null,"Extract"),"\uff0c\u5373\u63d0\u53d6\u51fa\u4e86\u65b0\u7684\u7c7b\u578b ",l.a.createElement("code",null,"{","id:number","}")),l.a.createElement("h2",{id:"exclude"},l.a.createElement(r["AnchorLink"],{to:"#exclude","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Exclude"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Exclude<T, U>")," --\u4ece T \u4e2d\u5254\u9664\u53ef\u4ee5\u8d4b\u503c\u7ed9 U \u7684\u7c7b\u578b\u3002")),l.a.createElement("p",null,"\u4e0e",l.a.createElement("code",null,"Extract"),"\u4e0d\u540c\uff0c",l.a.createElement("code",null,"Exclude"),"\u901a\u8fc7\u6392\u9664\u4e24\u4e2a\u4e0d\u540c\u7c7b\u578b\u4e2d\u5df2\u7ecf\u5b58\u5728\u7684\u5171\u6709\u5c5e\u6027\u6765\u6784\u9020\u65b0\u7684\u7c7b\u578b\u3002\u5b83\u4f1a\u4ece",l.a.createElement("code",null,"T"),"\u4e2d\u6392\u9664\u6240\u6709\u53ef\u5206\u914d\u7ed9",l.a.createElement("code",null,"U"),"\u7684\u5b57\u6bb5"),l.a.createElement(c["a"],{code:'interface FirstType {\n  id: number;\n  firstName: string;\n  lastName: string;\n}\n\ninterface SecondType {\n  id: number;\n  address: string;\n  city: string;\n}\n\ntype ExcludeType = Exclude<keyof FirstType, keyof SecondType>;\n\n// Output; "firstName" | "lastName"',lang:"ts"}),l.a.createElement("p",null,"\u4e0a\u9762\u7684\u4ee3\u7801\u53ef\u4ee5\u770b\u5230\uff0c\u5c5e\u6027",l.a.createElement("code",null,"firstName"),"\u548c",l.a.createElement("code",null,"lastName")," \u5728",l.a.createElement("code",null,"SecondType"),"\u7c7b\u578b\u4e2d\u4e0d\u5b58\u5728\u3002\u901a\u8fc7\u4f7f\u7528",l.a.createElement("code",null,"Extract"),"\u5173\u952e\u5b57\uff0c\u6211\u4eec\u53ef\u4ee5\u83b7\u5f97",l.a.createElement("code",null,"T"),"\u4e2d\u5b58\u5728\u800c",l.a.createElement("code",null,"U"),"\u4e2d\u4e0d\u5b58\u5728\u7684\u5b57\u6bb5"),l.a.createElement("h2",{id:"record"},l.a.createElement(r["AnchorLink"],{to:"#record","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Record"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Record<K,T>"))),l.a.createElement("p",null,"\u6b64\u5de5\u5177\u53ef\u5e2e\u52a9\u4f60\u6784\u9020\u5177\u6709\u7ed9\u5b9a\u7c7b\u578b T \u7684\u4e00\u7ec4\u5c5e\u6027 K \u7684\u7c7b\u578b\u3002\u5c06\u4e00\u4e2a\u7c7b\u578b\u7684\u5c5e\u6027\u6620\u5c04\u5230\u53e6\u4e00\u4e2a\u7c7b\u578b\u7684\u5c5e\u6027\u65f6\uff0cRecord \u975e\u5e38\u65b9\u4fbf"),l.a.createElement(c["a"],{code:"interface EmployeeType {\n  id: number;\n  fullname: string;\n  role: string;\n}\n\nlet employees: Record<number, EmployeeType> = {\n  0: { id: 1, fullname: 'John Doe', role: 'Designer' },\n  1: { id: 2, fullname: 'Ibrahima Fall', role: 'Developer' },\n  2: { id: 3, fullname: 'Sara Duckson', role: 'Developer' },\n};\n\n// 0: { id: 1, fullname: \"John Doe\", role: \"Designer\" },\n// 1: { id: 2, fullname: \"Ibrahima Fall\", role: \"Developer\" },\n// 2: { id: 3, fullname: \"Sara Duckson\", role: \"Developer\" }",lang:"ts"}),l.a.createElement("p",null,l.a.createElement("code",null,"Record"),"\u7684\u5de5\u4f5c\u65b9\u5f0f\u76f8\u5bf9\u7b80\u5355\u3002\u5728\u4ee3\u7801\u4e2d\uff0c\u5b83\u671f\u671b\u4e00\u4e2a",l.a.createElement("code",null,"number"),"\u4f5c\u4e3a\u7c7b\u578b\uff0c\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u6211\u4eec\u5c06 0\u30011 \u548c 2 \u4f5c\u4e3a employees \u53d8\u91cf\u7684\u952e\u7684\u539f\u56e0\u3002\u5982\u679c\u4f60\u5c1d\u8bd5\u4f7f\u7528\u5b57\u7b26\u4e32\u4f5c\u4e3a\u5c5e\u6027\uff0c\u5219\u4f1a\u5f15\u53d1\u9519\u8bef,\u56e0\u4e3a\u5c5e\u6027\u662f\u7531",l.a.createElement("code",null,"EmployeeType"),"\u7ed9\u51fa\u7684\u5177\u6709 ID\uff0cfullName \u548c role \u5b57\u6bb5\u7684\u5bf9\u8c61"),l.a.createElement("h2",{id:"nonnullable"},l.a.createElement(r["AnchorLink"],{to:"#nonnullable","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"NonNullable"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"NonNullable<T>")," \u4ece ",l.a.createElement("code",null,"T")," \u4e2d\u5254\u9664 ",l.a.createElement("code",null,"null")," \u548c ",l.a.createElement("code",null,"undefined"))),l.a.createElement(c["a"],{code:"type NonNullableType = string | number | null | undefined;\n\nfunction showType(args: NonNullable<NonNullableType>) {\n  console.log(args);\n}\n\nshowType('test');\n// Output: \"test\"\n\nshowType(1);\n// Output: 1\n\nshowType(null);\n// Error: Argument of type 'null' is not assignable to parameter of type 'string | number'.\n\nshowType(undefined);\n// Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'.",lang:"ts"}),l.a.createElement("p",null,"\u6211\u4eec\u5c06\u7c7b\u578b",l.a.createElement("code",null,"NonNullableType"),"\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9",l.a.createElement("code",null,"NonNullable"),"\uff0c",l.a.createElement("code",null,"NonNullable"),"\u901a\u8fc7\u6392\u9664",l.a.createElement("code",null,"null"),"\u548c",l.a.createElement("code",null,"undefined"),"\u6765\u6784\u9020\u65b0\u7c7b\u578b\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5982\u679c\u4f60\u4f20\u9012\u53ef\u4e3a\u7a7a\u7684\u503c\uff0c",l.a.createElement("code",null,"TypeScript")," \u5c06\u5f15\u53d1\u9519\u8bef\u3002 \u987a\u4fbf\u8bf4\u4e00\u53e5\uff0c\u5982\u679c\u5c06",l.a.createElement("code",null,"--strictNullChecks"),"\u6807\u5fd7\u6dfb\u52a0\u5230",l.a.createElement("code",null,"tsconfig"),"\u6587\u4ef6\uff0c",l.a.createElement("code",null,"TypeScript")," \u5c06\u5e94\u7528\u975e\u7a7a\u6027\u89c4\u5219"),l.a.createElement("h2",{id:"mapped-types-\u6620\u5c04\u7c7b\u578b"},l.a.createElement(r["AnchorLink"],{to:"#mapped-types-\u6620\u5c04\u7c7b\u578b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Mapped Types( \u6620\u5c04\u7c7b\u578b)"),l.a.createElement("p",null,"\u6620\u5c04\u7c7b\u578b\u5141\u8bb8\u4f60\u4ece\u4e00\u4e2a\u65e7\u7684\u7c7b\u578b\uff0c\u751f\u6210\u4e00\u4e2a\u65b0\u7684\u7c7b\u578b"),l.a.createElement(c["a"],{code:"type StringMap<T> = {\n  [P in keyof T]: string;\n};\n\nfunction showType(arg: StringMap<{ id: number; name: string }>) {\n  console.log(arg);\n}\n\nshowType({ id: 1, name: 'Test' });\n// Error: Type 'number' is not assignable to type 'string'.\n\nshowType({ id: 'testId', name: 'This is a Test' });\n// Output: {id: \"testId\", name: \"This is a Test\"}",lang:"ts"}),l.a.createElement("p",null,l.a.createElement("code",null,"StringMap<>"),"\u4f1a\u5c06\u4f20\u5165\u7684\u4efb\u4f55\u7c7b\u578b\u8f6c\u6362\u4e3a\u5b57\u7b26\u4e32\u3002\u5c31\u662f\u8bf4\uff0c\u5982\u679c\u6211\u4eec\u5728\u51fd\u6570",l.a.createElement("code",null,"showType()"),"\u4e2d\u4f7f\u7528\u5b83\uff0c\u5219\u63a5\u6536\u5230\u7684\u53c2\u6570\u5fc5\u987b\u662f\u5b57\u7b26\u4e32-\u5426\u5219\uff0c",l.a.createElement("code",null,"TypeScript")," \u5c06\u5f15\u53d1\u9519\u8bef"),l.a.createElement("h2",{id:"type-guards\u7c7b\u578b\u4fdd\u62a4"},l.a.createElement(r["AnchorLink"],{to:"#type-guards\u7c7b\u578b\u4fdd\u62a4","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Type Guards(\u7c7b\u578b\u4fdd\u62a4)"),l.a.createElement("p",null,"\u7c7b\u578b\u4fdd\u62a4\u4f7f\u4f60\u53ef\u4ee5\u4f7f\u7528\u8fd0\u7b97\u7b26\u68c0\u67e5\u53d8\u91cf\u6216\u5bf9\u8c61\u7684\u7c7b\u578b\u3002\u8fd9\u662f\u4e00\u4e2a\u6761\u4ef6\u5757\uff0c\u5b83\u4f7f\u7528",l.a.createElement("code",null,"typeof"),"\uff0c",l.a.createElement("code",null,"instanceof"),"\u6216",l.a.createElement("code",null,"in"),"\u8fd4\u56de\u7c7b\u578b\u3002"),l.a.createElement("blockquote",null,l.a.createElement("p",null,"typescript \u80fd\u591f\u5728\u7279\u5b9a\u533a\u5757\u4e2d\u4fdd\u8bc1\u53d8\u91cf\u5c5e\u4e8e\u67d0\u79cd\u786e\u5b9a\u7c7b\u578b\u3002\u53ef\u4ee5\u5728\u6b64\u533a\u5757\u4e2d\u653e\u5fc3\u5730\u5f15\u7528\u6b64\u7c7b\u578b\u7684\u5c5e\u6027\uff0c\u6216\u8005\u8c03\u7528\u6b64\u7c7b\u578b\u7684\u65b9\u6cd5")),l.a.createElement("h3",{id:"typeof"},l.a.createElement(r["AnchorLink"],{to:"#typeof","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"typeOf"),l.a.createElement(c["a"],{code:"function showType(x: number | string) {\n  if (typeof x === 'number') {\n    return `The result is ${x + x}`;\n  }\n  throw new Error(`This operation can't be done on a ${typeof x}`);\n}\n\nshowType(\"I'm not a number\");\n// Error: This operation can't be done on a string\n\nshowType(7);\n// Output: The result is 14",lang:"ts"}),l.a.createElement("h3",{id:"instanceof"},l.a.createElement(r["AnchorLink"],{to:"#instanceof","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"instanceof"),l.a.createElement(c["a"],{code:"class Foo {\n  bar() {\n    return 'Hello World';\n  }\n}\n\nclass Bar {\n  baz = '123';\n}\n\nfunction showType(arg: Foo | Bar) {\n  if (arg instanceof Foo) {\n    console.log(arg.bar());\n    return arg.bar();\n  }\n\n  throw new Error('The type is not supported');\n}\n\nshowType(new Foo());\n// Output: Hello World\n\nshowType(new Bar());\n// Error: The type is not supported",lang:"ts"}),l.a.createElement("h3",{id:"in"},l.a.createElement(r["AnchorLink"],{to:"#in","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"in"),l.a.createElement(c["a"],{code:"interface FirstType {\n  x: number;\n}\ninterface SecondType {\n  y: string;\n}\n\nfunction showType(arg: FirstType | SecondType) {\n  if ('x' in arg) {\n    console.log(`The property ${arg.x} exists`);\n    return `The property ${arg.x} exists`;\n  }\n  throw new Error('This type is not expected');\n}\n\nshowType({ x: 7 });\n// Output: The property 7 exists\n\nshowType({ y: 'ccc' });\n// Error: This type is not expected",lang:"js"}),l.a.createElement("h2",{id:"conditional-types\u6761\u4ef6\u7c7b\u578b"},l.a.createElement(r["AnchorLink"],{to:"#conditional-types\u6761\u4ef6\u7c7b\u578b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Conditional Types(\u6761\u4ef6\u7c7b\u578b)"),l.a.createElement("p",null,"\u6761\u4ef6\u7c7b\u578b\u6d4b\u8bd5\u4e24\u79cd\u7c7b\u578b\uff0c\u7136\u540e\u6839\u636e\u8be5\u6d4b\u8bd5\u7684\u7ed3\u679c\u9009\u62e9\u5176\u4e2d\u4e00\u79cd\u3002"),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u4e00\u79cd\u7531\u6761\u4ef6\u8868\u8fbe\u5f0f\u6240\u51b3\u5b9a\u7684\u7c7b\u578b\uff0c \u8868\u73b0\u5f62\u5f0f\u4e3a ",l.a.createElement("code",null,"T extends U ? X : Y")," , \u5373\u5982\u679c\u7c7b\u578b",l.a.createElement("code",null,"T"),"\u53ef\u4ee5\u88ab\u8d4b\u503c\u7ed9\u7c7b\u578b",l.a.createElement("code",null,"U"),"\uff0c\u90a3\u4e48\u7ed3\u679c\u7c7b\u578b\u5c31\u662f",l.a.createElement("code",null,"X"),"\u7c7b\u578b\uff0c\u5426\u5219\u4e3a",l.a.createElement("code",null,"Y"),"\u7c7b\u578b\u3002 \u6761\u4ef6\u7c7b\u578b\u4f7f\u7c7b\u578b\u5177\u6709\u4e86\u4e0d\u552f\u4e00\u6027\uff0c\u589e\u52a0\u4e86\u8bed\u8a00\u7684\u7075\u6d3b\u6027\uff0c")),l.a.createElement(c["a"],{code:"// \u6e90\u7801\u5b9e\u73b0\ntype NonNullable<T> = T extends null | undefined ? never : T;\n\n// NotNull<T> \u7b49\u4ef7\u4e8e NoneNullable<T,U>\n\n// \u7528\u6cd5\u793a\u4f8b\ntype resType = NonNullable<string | number | null | undefined>; // string|number",lang:"ts"}),l.a.createElement("p",null,"\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c ",l.a.createElement("code",null,"NonNullable"),"\u68c0\u67e5\u7c7b\u578b\u662f\u5426\u4e3a ",l.a.createElement("code",null,"null"),"\uff0c\u5e76\u6839\u636e\u8be5\u7c7b\u578b\u8fdb\u884c\u5904\u7406\u3002\u6b63\u5982\u4f60\u6240\u770b\u5230\u7684\uff0c\u5b83\u4f7f\u7528\u4e86 ",l.a.createElement("code",null,"JavaScript")," \u4e09\u5143\u8fd0\u7b97\u7b26"),l.a.createElement("h2",{id:"\u67e5\u770b-typescript-\u7c7b\u578b"},l.a.createElement(r["AnchorLink"],{to:"#\u67e5\u770b-typescript-\u7c7b\u578b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u67e5\u770b typescript \u7c7b\u578b"),l.a.createElement("p",null,l.a.createElement("code",null,".d"),"\u662f\u58f0\u660e\u6587\u4ef6\uff0c",l.a.createElement("code",null,"index.d.ts"),"\u662f",l.a.createElement("code",null,"index.js"),"\u7684\u8f85\u52a9\u6587\u4ef6"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u8981\u770b ",l.a.createElement("code",null,"typescript/lib/lib.dom.ts"),"\u6587\u4ef6"),l.a.createElement("li",null,l.a.createElement("code",null,"typescript/lib/lib.es5.ts"))),l.a.createElement("h2",{id:"ts-\u6709\u4ec0\u4e48\u9ad8\u7ea7\u7684\u5730\u65b9\u4e3a\u4ec0\u4e48\u9009\u62e9\u4f7f\u7528-ts"},l.a.createElement(r["AnchorLink"],{to:"#ts-\u6709\u4ec0\u4e48\u9ad8\u7ea7\u7684\u5730\u65b9\u4e3a\u4ec0\u4e48\u9009\u62e9\u4f7f\u7528-ts","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"ts \u6709\u4ec0\u4e48\u9ad8\u7ea7\u7684\u5730\u65b9\uff0c\u4e3a\u4ec0\u4e48\u9009\u62e9\u4f7f\u7528 ts?"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u9879\u76ee\u5f00\u53d1\u7684\u66f4\u8212\u670d")),l.a.createElement("h2",{id:"tsconfig-\u7684\u7f16\u5199"},l.a.createElement(r["AnchorLink"],{to:"#tsconfig-\u7684\u7f16\u5199","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"tsconfig \u7684\u7f16\u5199"),l.a.createElement(c["a"],{code:'{\n  "complilerOptions":{\n    "lib":["ES2015","DOM"],\n    "strict":true,\n    "noImplicitThis":true,\n    "strictNullChecks":true,\n    "noImplicitAny":true\n  },\n  "include":["src/*.ts"]\n}',lang:"bash"}),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u8f93\u5165\u548c\u8f93\u51fa\u4e00\u5b9a\u8981\u517b\u6210\u597d\u4e60\u60ef")),l.a.createElement(c["a"],{code:"function alertName(something: string | number): void {\n  console.log('something', something.toString());\n}",lang:"ts"}),l.a.createElement("h2",{id:"\u4f34\u4fa3\u6a21\u5f0fts-\u7684\u5f00\u53d1\u6a21\u5f0f"},l.a.createElement(r["AnchorLink"],{to:"#\u4f34\u4fa3\u6a21\u5f0fts-\u7684\u5f00\u53d1\u6a21\u5f0f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4f34\u4fa3\u6a21\u5f0f(ts \u7684\u5f00\u53d1\u6a21\u5f0f)"),l.a.createElement("h2",{id:"\u4eab\u5143\u6a21\u5f0f"},l.a.createElement(r["AnchorLink"],{to:"#\u4eab\u5143\u6a21\u5f0f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4eab\u5143\u6a21\u5f0f"),l.a.createElement("p",null,l.a.createElement("strong",null,"interface \u63a5\u53e3\u4ec0\u4e48\u65f6\u5019\u5199\uff0c")),l.a.createElement("ul",null,l.a.createElement("li",null,"\u7b2c\u4e00\u79cd\u662f\u4e0d\u77e5\u9053\u662f\u4ec0\u4e48\u7c7b\u578b\u7684\u65f6\u5019\uff0csdk \u7684\u65f6\u5019"),l.a.createElement("li",null,"type \u4e1a\u52a1\u4e2d"),l.a.createElement("li",null,"class \u7c7b\u578b"),l.a.createElement("li",null,"\u62bd\u8c61\u7c7b")),l.a.createElement("h2",{id:"\u793a\u4f8b"},l.a.createElement(r["AnchorLink"],{to:"#\u793a\u4f8b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u793a\u4f8b"),l.a.createElement("p",null,"\u5f53\u6211\u4eec\u5728\u4e00\u4e2a\u6570\u7ec4\u91cc\u9762\u65e2\u5199\u4e86\u5b57\u7b26\u4e32\u7c7b\u578b\u53c8\u5199\u4e86\u6570\u5b57\u7c7b\u578b\u7684\u65f6\u5019\uff0c\u6211\u4eec\u7ed3\u6784\u51fa\u6765\u662f\u65e0\u6cd5\u4f7f\u7528\u5b83\u672c\u8eab\u81ea\u5e26\u7684\u51fd\u6570\u7684\uff0c\u90a3\u6211\u4eec\u9700\u8981\u600e\u4e48\u505a\u5462\uff1f"),l.a.createElement("p",null,"\u7b2c\u4e00\u79cd\uff1a"),l.a.createElement(c["a"],{code:"function test() {\n  const text: string = '\u6d4b\u8bd5';\n  const num: number = 1;\n  return [text, num] as const;\n}\nconst items = test();\nconst [a] = items;",lang:"ts"}),l.a.createElement("p",null,"\u7b2c\u4e8c\u79cd\uff1a"),l.a.createElement(c["a"],{code:"function test(){\n  const text:string='\u6d4b\u8bd5';\n  const num:number=1;\n  return tuplity(text,num)\n}\nconst items=test()\nconst [a]=items;\n\n//\u81ea\u5b9a\u4e49\nfunction tuplity<T extends unknown[]>(...elements: T):T{\n  return elements\n}",lang:"js"}),l.a.createElement("h2",{id:"\u5176\u4ed6"},l.a.createElement(r["AnchorLink"],{to:"#\u5176\u4ed6","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5176\u4ed6"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"node"),"\u7528",l.a.createElement("code",null,"ts"),"\u5199\uff0c\u76f4\u63a5\u7528",l.a.createElement("code",null,"pm2"),"\u542f\u52a8"),l.a.createElement("li",null,l.a.createElement("code",null,"esbuild")," \u6253\u5305\u901f\u5ea6\u6781\u5feb"),l.a.createElement("li",null,l.a.createElement("code",null,"vite")),l.a.createElement("li",null,l.a.createElement("code",null,"snowpack")),l.a.createElement("li",null,"\u5f00\u53d1 vue\uff1avue3+ts+vite \u5f00\u53d1\u5feb"),l.a.createElement("li",null,"\u5f00\u53d1 sdk\uff1arollup + parcel/snowpack + rome(ts \u5408\u96c6)"),l.a.createElement("li",null,"webpack(\u751f\u6001\u5b8c\u5584) v8-compile-cahche + SparkPlug + commonjs + \u63d2\u4ef6\u4ee3\u7801"),l.a.createElement("li",null,"quicktype\uff1a\u76f4\u63a5\u751f\u6210 ts \u5bf9\u5e94\u7684\u53c2\u6570\u7c7b\u578b")),l.a.createElement("p",null,"\u968f\u65f6\u7f16\u8bd1\uff1a"),l.a.createElement("ul",null,l.a.createElement("li",null,"quokka"),l.a.createElement("li",null,"ts-node"))))}));n["default"]=e=>{var n=l.a.useContext(r["context"]),t=n.demos;return l.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&r["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(o,{demos:t})}}}]);