<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[20600],{6296:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/manual/v10.0.0/use-illegal-identifier-names",function(){return t(22857)}])},22857:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return s},frontmatter:function(){return l}});var r=t(85893),a=t(11151);const l={title:"Use Illegal Identifier Names",description:"Handling (JS) naming collisions in ReScript",canonical:"/docs/manual/latest/use-illegal-identifier-names"};function i(e){const n={code:"code",h1:"h1",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.ah)(),...e.components},{CodeTab:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeTab",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"use-illegal-identifier-names",children:"Use Illegal Identifier Names"}),"\n",(0,r.jsx)(n.p,{children:"Sometime, for e.g. a let binding or a record field, you might want to use:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"A capitalized name."}),"\n",(0,r.jsx)(n.li,{children:"A name that contains illegal characters (e.g. emojis, hyphen, space)."}),"\n",(0,r.jsx)(n.li,{children:"A name that's one of ReScript's reserved keywords."}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"We provide an escape hatch syntax for these cases:"}),"\n",(0,r.jsxs)(t,{labels:["ReScript","JS Output"],children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-res",children:'let \\"my-\ud83c\udf4e" = 10\n\ntype element = {\n  \\"aria-label": string\n}\n\nlet myElement = {\n  \\"aria-label": "close"\n}\n\nlet label = myElement.\\"aria-label"\n\nlet calculate = (~\\"Props") =&gt; {\n  \\"Props" + 1\n}\n'})}),(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:'var my$$unknown$unknown$unknown$unknown = 10;\n\nvar myElement = {\n  "aria-label": "close"\n};\n\nvar label = myElement["aria-label"];\n\nfunction calculate(Props) {\n  return Props + 1 | 0;\n}\n'})})]}),"\n",(0,r.jsxs)(n.p,{children:["See the output. ",(0,r.jsx)(n.strong,{children:"Use them only when necessary"}),", for interop with JavaScript. This is a last-resort feature. If you abuse this, many of the compiler guarantees will go away."]})]})}function s(e={}){const{wrapper:n}={...(0,a.ah)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}s.frontmatter=l}},function(e){e.O(0,[92888,49774,40179],(function(){return n=6296,e(e.s=n);var n}));var n=e.O();_N_E=n}]);</pre></body></html>