泛型对象类型

让我们想象一个 Box 类型可以包含任何值 - string、number、Giraffe 等等。

Let's imagine a Box type that can contain any value - strings, numbers, Giraffes, whatever.

interface Box {
  contents: any;
}

vYEdkUVJzL7kb7Yyzpz+wDWMSaxVPE1YzYHuupXFt8mJGtOTxdcibAkb7Ys/gsdVIPZZq26x4fp5jxWS/vTSlOTaDSrfM4WCBevljVBH8GptBXrhmX02Wofdql2gdgK7PEH5a70HPML2DH3pHBaavUoN8joLPR1R3AOYjBg1QU03G2Y8jMMkzYHLgOgPBxIBKQHORzXo8qbJHI64hokPXq4IvtCBE4KJE6RsKde5ALv9pr0OdMsKRr8CJVbcimUHJCXVAkocrvBabdqyYsoN0F37SKd6X1bw1ZaHKXgMBfivMrSYCBUmHeYBaik4fVe+dkz6Emk+xRJijwTqnH6Q2Yu2zZD2t6KPity5V+k6TUo=

SUQ4zTZ522uZ/92ZL4T6jvJbEO0PUyd/gvGXWIy/+1tqWDgSn/td1RToPJZd/+yBVOrRKOlny+I1YrzvrknZuJGIsEVTAC/dSmyJBNGhVnMo5JQSt84QZAUMUTAK7cur2M3D7PwK+LgQCmYyUK11ZyRnysNXnjy8sgTdRUdsb2XZlmxX3HjV8njncTEcTCSojoN7cz8L+X1e977HGhELDIgTHgw0a25hIwIHx0+ZE+XTB5PGrXxjE7n7kPAlfQHNZjxa540WgKgLVno4rtL09Xb1Qrp6VpDDuaWcSY2TOxe9thniGuG+7Xx7LGTc1Z+8KFiWX9jlwDFStBa8e+9lf0FRVm0IxYHB37zKpyR8Qea0Yp4/zlTjg6U8Jl2pr5y2iRRBvzgGgEd+TRrD3OwPX9qV2Yai1F9b5fMJ3GimcX+iZdUyRkq/O2iBbYQi1tsP+VyuoAxIX0xyQZaPogD0HjB4yiNCM8YG44VSddMpaq3V0kM2bZuuXXJhbL63Ybz40FY65/iFRksmKJpb6IfoiBHYaog51SLuutkyoYuGPjTnxyXr+G4lsEMUdemhH38PWZ+zpl9g99FQ6yWWwoCY9w==

interface Box {
  contents: unknown;
}

let x: Box = {
  contents: "hello world",
};

// we could check 'x.contents'
if (typeof x.contents === "string") {
  console.log(x.contents.toLowerCase());
}

// or we could use a type assertion
console.log((x.contents as string).toLowerCase());

wcB1UiASDEr2KFD1K94v9D4s+scixn7g5YCtgevIzQwQtb0zi96AIqN7NFrbqkezZk0Dg6WqSbid43dExMDm4TUxX24JiGmdh2mDqjbG66+9gtFU89dpSJBOXD1fruirUsM0HU7pqjgfkMIW8qmQD5ay0BiKXO+zVtvJ+ceQlyvCHMfAUKDhSYVT5/8jtOHnTZgKRw63JvvcKIQfNu4HCof8rW2jyC7fyEOhxJa7/XYX7yexMxbytlVawDr0krVOJWyJdAZld0ZQ8+yy/DXrVarwIGFxB9BOsYnrCZdFEMX7Dk4hSO077q/buPFeGBxeQcjfJQTfuZLZNVMw0e0doSEsWrHUyYT8hOe2jlDgEdk=

interface NumberBox {
  contents: number;
}

interface StringBox {
  contents: string;
}

interface BooleanBox {
  contents: boolean;
}

vtY0BOAyyIIqvb8HXDwBRp/zhnZgqhWo318+h17aAcgsQBsY1YXRAPTL01LE1GdWfcQyXpW14ojU2MEueeFe25mXRpG7DAp8onI1svFV0/11FIEhWIWIcdyTwUEK3+UJnJfOZ/yhgtAJBqGigeI5KHWRljzroGhAnQwjZ7LzClJNaSr3PV6ovArxGOBcM4qsi6HARKOeMs99hru5IJux7FnLJtsrd4K3L88zrg6281HYgDX3Qqh4KjIKYY7XRZjZUOLYHVH57yss8O0M6dbVxLR5MvHmW7j/AxNq2UJNlO/8z6bla/XBwHGFRtMUb4yy

interface NumberBox {
  contents: number;
}

interface StringBox {
  contents: string;
}

interface BooleanBox {
  contents: boolean;
}
function setContents(box: StringBox, newContents: string): void;
function setContents(box: NumberBox, newContents: number): void;
function setContents(box: BooleanBox, newContents: boolean): void;
function setContents(box: { contents: any }, newContents: any) {
  box.contents = newContents;
}

wVd49xJSl5cS4f+wDX8h3O6oUlWxRjIq9DJtYTS0Jbzkum9B6bspLp7/Sn111/a2ZY4XxGwDQqq8kZiIWdGel48Wt3VjGv7DOO+sCICAUgXmhgMWDmeqekMxJPXh7PYY8SDNjM0yX8CDcIiEcdCqwJjgGst16L9h2sxlj2l2E4D6GHVB98eJp8EuAFncrMrc8CkoRcfmSB1C5P0SJUdhnntNePahkqL0dEsxg2RGkXt2GInoE7fyyASEEeLiyvDkKxfL5iBZCoveu9BzXVGTyG64ccfHlxVDqex6ZZVD+Hy7L8wDhQo2z0EmLW3TfoTdosWRyAX1VVsW4d1hw9SejJg+HYx35qWn/Mxf2jjtSg8llJU+9p8ScNy5xVaJVzuBOrKIoTwXG/V9/YbzQgVJPRLOwCXqkhMPs3RARz9WWLUSGpy7fRSxss0fFj5L12uoQeRKurt5T3+QY+kuRPrfNFMviBGqzGIfaR/5IWG+Wb3qAMoIar5L2jl0SCHLd2VC

bsbiF+R+5kiAQWXJkvgCvAyCHVDPCHwcj19OEfRwi3wzZ6DozEOryi+i9FFxVzNFf3EHHh7hq0U8LGk02wSGzYrsVcK9/r1pl44eo4jfchiRAhQzkZFhsciYSthwsJkC3nNKdx8ruvJpXS5W9e6tQDlmzJ2YYlt753xyo8UoCUKfD4o7dl1kvZevAWG0qgXQdY+XJrXg1vhrY0JB9l4fHxPEOIzcHabx+661issoVuhATvUld6O/OSwCS0S6Oez+NlrVB5R85T5p8iivd/bvKonHlSB7AJSVgsL2u7E0E88=

interface Box<Type> {
  contents: Type;
}

Y6s4ftDD5l4wc/7rtDJ4yHgYIGMRe3EkYbQeZfnQHTreNFKYp/FYmIOVz7tdb2JRf/YUhzVJorWQ/Zcfb8MMPhOw1auvY2VrZ6Fapzhwd9YxluhljsUujPMNoaadpmWS+i7bY/Va+w5LItiDJvKzGyj47dMvh66hRoMpE/6GijL4XnB16ZpweLKceNSSg/VG1qpP6Cydrl5Rg5RoEKazApj2SyL51WBwGv1+XNQp5gjW5j4a38uKYpWqob5RX3zrYAPFqjd0CVuJDWucNteYOFBuCzepq6k8fsP8f7AZGx75YAHpx1DCK+CekUkXq/osILw1RJ4uSzSLqgE91/tnMYgfV9fw47I7laNRV0msXKQ0eBKpuZp379dD7HjP3vKolDhp4Ct1Dew5Sl9UcjHc7q+pfBjsw26rAebprrQFK9/pXpkTs78f5Jqzghx6fu6ryGSP88Imt1Jha7bD0w9yc1UOq39KCGQcaihMnt59+ZkXZh0K+wz1dH2gV1bLI8JkO8acsSn7A7ozSbDZMJ3ahX4BrEdrUKl7xANYn1cYZn4iUkV49Sh3IhrbN6F2Zht1Dc2I+clScN0olsDtPUatmWviFqeB/InNYjU0lBa6Z3TS5NasMYAbMfeIYSLxRjqOYsm5GpFUb1EKEWkfzkkuIOL9RpuDvdhiNENSPyRikWwyTKoi2zW8pPT3WGcHCXfMB6rqQsKTOB3DV0i3VonTbg==

interface Box<Type> {
  contents: Type;
}
let box: Box<string>;

Vob/fgPfa9cwc2r/wSZMY+AvYQXMWn0eGR9y4VTwh0Uy7GGJVO1lJ9BHZJlbnvQUbwqOk+NlFxHUM1YlE4By3ODt1zIfBWOrH4wl1ApVfyKlfVS7HzfoThlendchIiZdrnn1xiFhsCU106FAth5NUx3HarzZMGehwcStWLjMrAEZXAduAkn7AZ6mQEPivenkflBEnsWL4PHCwIC1fG9bOEclxE4kqj4iX9ceQ+kyucgd7kdPOmXj2kl2qTr6bLSYS3AkhTYMLUHnJVCR9LhlipdV2OeunNf5ZxmgeVD+CVZVm1Dvv54LBWGTNbrm/cpxB6v9QNZNSVVOHKc0UXet9cP6d564e5ux0YXB1TJS27s3ru2UIitwaMQzuOUEjeo4KBOWIXD0gl20L8SRaDQERbF+RaSQhfRPTyX8oSzziA9Fhu4vG7DNftbFAuD+IUoC9M9HMx+5FSqjAuon54BF2KQj2eDrMZPoifP9IIURIblJRMjjddfN1xi+1FmRWQsDWLCoRAfaGTK+ZQ9syjTRxRFtdyrkM16Uc+9cIZ7r4NbWohh9Fu4Vsqt8RVpwdzJxUE/1jzFTYMsWj62Tbqk856eT8tfJ/54n2/nMKWe9H3+m2Dy7rgK5TZkVvPjczBlnpktNmoCd7tnxdBBOarSv3P+5jPZBzPEwYT3SjDnU+LjKBu1HmW/Hx7/IfdP2vsF0euyst0RwIhjjM2EXw6B+0+eWW3mvdbB2eOp1I8dWpUpBQpanNiDIjJjoizUOffcJ8hmeKLHYQM614vDUd1YkZGZBJHd66qYQvi3Sf5TnhUQxsuV7/f21lZW1h4nMVoK3L+4xw7EqYZxx1YaemxfSqQuakgkdCLcOW6Ficy3KWZDNX25twIoSRkFmORoaeFeYYdq1PWxkjhAO7SoRx0vZ/ajPiVXrPtlZMkqNaRxkPTpwv6tih7g58HEgpcGpLaoycCYFFSpYJZMZItGOt6S/bYjJzdRnUV2NlLDU1gyeFLAy68ldMj22CwemAHSiWOTO/CHTHtPIsw/tus6em+sjRhjljz6iLK7uAUax5aeoYl6XjiS+uoR/5IrjNa/DpPbF8pPqe8Krwyb93tZn4ISSEaEzXW6kiImySDWiTk0CSYsJfN+G0UT6pUAZ7q+cusoP99/0Gn54rOknWgMV6A3ueOmqk1YaYnKzGchXQB7GFqDcLHipRjsNWctoqSseLmUB21gPu00eU9UQ4BB4pWjEUtEY+RdFQKJkxIG+aoOO0Dd6z3f/hQe6jp4ixZ9xTqD1mqsevCglpH0d59suvAMFyQ==

interface Box<Type> {
  contents: Type;
}
interface StringBox {
  contents: string;
}

let boxA: Box<string> = { contents: "hello" };
boxA.contents;

let boxB: StringBox = { contents: "world" };
boxB.contents;

2pOObQWLmoYi/ZfzCIh+a7nJBqLIQDAbDI8SRUa1zVoqqy7zeN6VobP1w/oesA8yKFebKSCOpSHjz85zO7JfmPs19MC5N0YkuvqqnqDC+laLxhXsTfL+9+EvU8QAd8axmsqxvsKJoZ+82i/PMTQURB3qw01rSCgKZV9LpzSyopr1rg4dr7O91JuSwVJrlka8jYmvF5/UQ8l5rrcUNGPyD5exRSfxnLUECFRksErC2SQkqhA3SluReKAWKVACGr+XofCOZ808/gEesa2wVowSfIaAKkKV+UG8UhgsoDNm6si+uut75hy2WmHrt7J90ZeX+/hZHlhpsiupBrGBZM3Urjnpf28d96OsxvvF8kOtVcXMiy05epiynIGwCzQxkKbDbynUNs3BLs1GWqStIqxRPsH2CpyPLYFQuxGFjgqbEdrVH3AUnc7XXobs24C7+67MUVa1z3BhPV0cozU6647nIVcQWQbHEatIU6KnbSg3/Aves+PsPUT2uGQGb3EzsQHM8lhLf2yeJ5otOfvBDSB0p066xVSAcML2dqjgtY2lmgyKrWITmHHNZn+U2llAfrHJzibhDXyVlITiWllDcwylPuMyJcPyJ/pYzC+ILjNPxN+POKzMOeAsct2sgsoUr5OZ8CHj6WT7nTYIrVk2cKskD9burAJlzR8n5fhUBhroAqadXLHmm/VpwNx5uYSuuXqFKOMqw1k8buXp9zIv791vtg==

interface Box<Type> {
  contents: Type;
}

interface Apple {
  // ....
}

// Same as '{ contents: Apple }'.
type AppleBox = Box<Apple>;

NiIGRt9gBEXnviJoS+O/rZkLdcjJppS+NG+703/9A1kpdoobDPdOeTUhMOrHW9/ofwpK6S3fneDXryoN57c9sLpMI7NR5J2NNbL5wUwgCxP6ckGfMeUXcg6K1UtX172y2AQF1kskTh3pVMMjkJkvzMXakIDr7gkO1EgIjkcH1D9rrGbwOm1zZlE82co8EqeCU7sn75zojdSNga6ylWr+Hvqra404R86ycwipZQHGdrsFNLtU+4LF+TxPtiFvVsIJ3ZtdUWl4D+L/B2qQUyn2LwTZmU0skbDSA0/5YyzSMfpfA075wYE/I12L6Ke5y9en5lmImpwBBqr78xk+/h4Y1G5g4uQuH/1hG+Xh98ibhJTDrEJ07FnDnWQv9dYM0Fvz

interface Box<Type> {
  contents: Type;
}

function setContents<Type>(box: Box<Type>, newContents: Type) {
  box.contents = newContents;
}

+rkb3eIVJxtuv4Jilkb4BU4WaEBl4hc36x0mCjuQg5NPu4CerPeJgbVVsdauD9J7L+oaOhIP74W2LXKFKhZlEDXPOqwXk+iCAZn5zsLydHmNeXDyyw6M5fIny9rYVzDArjwwo6UE3P3JZpx8PXVR+0ZVAzirl3E5Nj9DDUm8Ptm/ExMA00a13kCdzjZHfI8kytCv/StvzdFEEhuYaWOPY9UsBTMIV9UVQFLUVX7oLSMaxK0/AKguo/DN0UkZ5+QQdu9QW4DF4g7DkpwdpYGqVx5LA+dceDzFKLja7bPp9vUNEHsiVb8SZ2YKtL8vvmlt85zQuqPTo21itq/pTxAh57cJTZpiNyyyZIyzWdUsDrlFgtPIuDi+gp9snPUi8B7IRt7BadB9sEvwxicRo49MFw==

interface Box<Type> {
  contents: Type;
}

fAUrQkN4CS2JQ+S7HxReluycQmPWQyM7sn7pu900+oX3c0dBGjNd3UvZbFUo9sNNF/BFRTxubutgcGvzNkxGl9k10g7wkv3cX6bMq9/R3m7A30bQb7vEQkPtrs+XpKqK

type Box<Type> = {
  contents: Type;
};

nBiFZFJWYRCeFwn6bZT3euMJKf3MlaFCNJ604hgLHVhCvavBbCiHbvsSuZvy+2Z3cV8uturWUegIIVE/2m8jhEyzqq/dgovOEyElubqkePNt2olzPsvAyxxkezJkWCV2/xiMJLxXOqPsNZQ1c4KWMuD6EJft9hd3kJShkj2MvVFkBT6qCOvAaF6h4w10p1xEfgT/jZ2dvBL832qm4pNLKFgXvWArx+yUV5FiBGRL9ZcUZRi+rVEF1CMtFcTE7nvrYZQqO1CbGtLOFIzaziy2yZ5LwyYAGGtsxCoBYd1TblDnB0V57DS607eb36SNdBMErkk+qKj8LZsxTmJXkhQ8vDTloKk7bXPOZIPx25ojiNBVrZEO6GBYpjETmvHnUJ6GG4HOphb2+CrVyIUkKMy+iWDAQmtH2Xe0oQZIez8AuqTu0qp3u6T0fC5MfdLQKxur

type OrNull<Type> = Type | null;

type OneOrMany<Type> = Type | Type[];

type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>;

type OneOrManyOrNullStrings = OneOrManyOrNull<string>;

eu+vL1TpwTE763NyejC4DdQ90aS9c2QrtnDHPI23ryhVDTreE0aqeodOVOjWp5/4f/32Aw7moDaD6KhbWeh/rbfhm4HSMFNFMQB9U4G0Hqvt3O/qUbfltugauHkrB+5EwJl/5ntb0jNYpGiqTstNJ+LBO7OSA3b2ltSbp54jC4U=