ca6e0c9b.7680e9ac.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{164:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var a=n(1),r=n(9),i=(n(0),n(179)),o={title:"'type', 'tag', and 'kind'"},c={id:"articles/type-name",title:"'type', 'tag', and 'kind'",description:"Some users may prefer a discriminant other than `type`. The keys `tag` and `kind` are popular in various circles, and `__typename` is used in GraphQL communities. The key `type`is just the default. You can make a new `variant()` function to make variants with another discriminant by calling `variantFactory`.\r",source:"@site/docs\\articles\\type-name.md",permalink:"/variant/docs/articles/type-name",sidebar:"someSidebar",previous:{title:"That type tho...",permalink:"/variant/docs/articles/that-type"},next:{title:"\ud83d\udd2e Augmenting variants",permalink:"/variant/docs/articles/augment"}},p=[],l={rightToc:p};function s(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Some users may prefer a discriminant other than ",Object(i.b)("inlineCode",{parentName:"p"},"type"),". The keys ",Object(i.b)("inlineCode",{parentName:"p"},"tag")," and ",Object(i.b)("inlineCode",{parentName:"p"},"kind")," are popular in various circles, and ",Object(i.b)("inlineCode",{parentName:"p"},"__typename")," is used in GraphQL communities. The key ",Object(i.b)("inlineCode",{parentName:"p"},"type"),"is just the default. You can make a new ",Object(i.b)("inlineCode",{parentName:"p"},"variant()")," function to make variants with another discriminant by calling ",Object(i.b)("inlineCode",{parentName:"p"},"variantFactory"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-typescript"}),"const myVariant = variantFactory('__typename');\ntype KEY = '__typename';\n\nexport const Animal = variantList([\n    myVariant('Dog', fields<{name: string, favoriteBall?: string}>()),\n    myVariant('Cat', fields<{name: string, furnitureDamaged: number}>()),\n    myVariant('Snake', (name: string, pattern = 'striped') => ({name, pattern})),\n]);\nexport type Animal<T extends TypeNames<typeof Animal, KEY> = undefined> = VariantOf<typeof Animal, T, KEY>;\n")),Object(i.b)("p",null,"type ",Object(i.b)("inlineCode",{parentName:"p"},"Animal<'Dog'>")," is rendered as:"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-typescript"}),'{\n    __typename: "Dog";\n    name: string;\n    favoriteBall?: string | undefined;\n}\n')),Object(i.b)("p",null,"Most of variant's functions will accept an optional ",Object(i.b)("inlineCode",{parentName:"p"},"key")," as their final parameter, allowing the types to function with a different discriminant."),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-typescript"}),"const result = match(animal, {\n    Cat: ...\n    Dog: ...\n    Snake: ...\n}, '__typename')\n")))}s.isMDXComponent=!0},179:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return y}));var a=n(0),r=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),s=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c({},t,{},e)),n},u=function(e){var t=s(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=Object(a.forwardRef)((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=a,y=u["".concat(o,".").concat(d)]||u[d]||m[d]||i;return n?r.a.createElement(y,c({ref:t},l,{components:n})):r.a.createElement(y,c({ref:t},l))}));function y(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var l=2;l<i;l++)o[l]=n[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);