You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1>}</span></span></span></code></pre><h2id=tagged-unions>Tagged Unions<ahref=#tagged-unionsaria-hidden=truetabindex=-1><spanclass=anchor>#</span></a></h2><pclass="is-info is-medium tag">Added in v4.1.3<p>Even if F# unions can be used in a typed-safe manner from TypeScript, when you build a public API you may want your unions to feel more "native".<p>Fable can compile F# unions to TypeScript tagged unions thanks to the <code>TypeScriptTaggedUnion</code> attribute. You define the name of the tag property in the attribute, and the name of each case will become the value of the tag. It is also important that you use named fields for each case.<preclass="atom-one-light grvsc-container"data-index=9data-language=fs><codeclass=grvsc-code><spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk8>[<TypeScriptTaggedUnion</span><spanclass=mtk14>(</span><spanclass=mtk10>"type"</span><spanclass=mtk14>)</span><spanclass=mtk8>>]</span></span></span>
110
+
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1>}</span></span></span></code></pre><h2id=tagged-unions>Tagged Unions<ahref=#tagged-unionsaria-hidden=truetabindex=-1><spanclass=anchor>#</span></a></h2><pclass="is-info is-medium tag">Added in v4.1.3<h3id=discriminated-unions>Discriminated Unions<ahref=#discriminated-unionsaria-hidden=truetabindex=-1><spanclass=anchor>#</span></a></h3><p>Even if F# unions can be used in a typed-safe manner from TypeScript, when you build a public API you may want your unions to feel more "native".<p>Fable can compile F# unions to TypeScript tagged unions thanks to the <code>TypeScriptTaggedUnion</code> attribute. You define the name of the tag property in the attribute, and the name of each case will become the value of the tag. It is also important that you use named fields for each case.<preclass="atom-one-light grvsc-container"data-index=9data-language=fs><codeclass=grvsc-code><spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk8>[<TypeScriptTaggedUnion</span><spanclass=mtk14>(</span><spanclass=mtk10>"type"</span><spanclass=mtk14>)</span><spanclass=mtk8>>]</span></span></span>
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1></span><spanclass=mtk14>|</span><spanclass=mtk1> Take </span><spanclass=mtk14>of</span><spanclass=mtk1> fromIndex</span><spanclass=mtk14>:</span><spanclass=mtk1></span><spanclass=mtk4>int</span><spanclass=mtk1></span><spanclass=mtk14>*</span><spanclass=mtk1> toIndex</span><spanclass=mtk14>:</span><spanclass=mtk1></span><spanclass=mtk4>int</span></span></span>
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1>}</span></span></span></code></pre><p>type Circle = abstract kind: string abstract radius: float<p>type Square = abstract kind: string abstract sideLength: float<p>[<TypeScriptTaggedUnion("kind")>] type Shape = | Circle of Circle | Square of Square<p>// usage let describeShape (shape: Shape) = match shape with | Circle c -> $"circle of radius {c.radius}" | Square s -> $"square of length {s.sideLength}"</div></div></section><divclass="section bd-docs-pagination bd-pagination-links"><aclass="button bd-fat-button is-primary is-light bd-pagination-prev" href="/docs/typescript/build-and-run.html"><i>←</i><spanclass="is-hidden-mobile"><em>TypeScript</em><strong>Build and Run</strong></span></a><aclass="button bd-fat-button is-primary is-light bd-pagination-next" href="/docs/typescript/compatibility.html"><spanclass="is-hidden-mobile"><em>TypeScript</em><strong>.NET and F# compatibility</strong></span><i>→</i></a></div></div></div></div></div><scriptasync="" src="/resources/nacara-standard-layouts/scripts/menu.js"></script></body></html>
129
+
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1>}</span></span></span></code></pre><h3id=interfaces>Interfaces<ahref=#interfacesaria-hidden=truetabindex=-1><spanclass=anchor>#</span></a></h3><p>It is also possible to use interfaces instead for describing tagged unions.<p>This allows to use interfaces in the F# code to access the fields instead of tuple destructuring.<preclass="atom-one-light grvsc-container"data-index=12data-language=fs><codeclass=grvsc-code><spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk14>type</span><spanclass=mtk1></span><spanclass=mtk4>Take</span><spanclass=mtk1></span><spanclass=mtk14>=</span></span></span>
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1></span><spanclass=mtk14>|</span><spanclass=mtk1> Take </span><spanclass=mtk14>of</span><spanclass=mtk1></span><spanclass=mtk4>Take</span></span></span>
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1></span><spanclass=mtk8>|</span><spanclass=mtk1> { type</span><spanclass=mtk8>:</span><spanclass=mtk1></span><spanclass=mtk10>"save"</span><spanclass=mtk1> }</span></span></span></code></pre><p>TypeScript consumer code can now use the union in a natural way:<preclass="atom-one-light grvsc-container"data-index=14data-language=ts><codeclass=grvsc-code><spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk14>function</span><spanclass=mtk1></span><spanclass=mtk9>execute</span><spanclass=mtk1>(command</span><spanclass=mtk8>:</span><spanclass=mtk1></span><spanclass=mtk4>Command</span><spanclass=mtk1>) {</span></span></span>
<spanclass=grvsc-line><spanclass=grvsc-source><spanclass=mtk1></span><spanclass="mtk7 mtki">// command.fromIndex and command.toIndex are available</span></span></span>
0 commit comments