CINXE.COM
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 5.13.5"/><meta name="theme-color" content="#3178C6"/><meta data-react-helmet="true" name="description" content="From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project."/><meta data-react-helmet="true" property="og:title" content="TSConfig Reference - Docs on every TSConfig option"/><meta data-react-helmet="true" property="og:description" content="From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project."/><meta data-react-helmet="true" property="twitter:site" content="typescriptlang"/><style data-href="/styles.0dd29b1a810d6c2acf56.css" data-identity="gatsby-global-css">#top-menu{background-color:#3178c6;clear:both;display:flex;height:3rem;justify-content:space-between;-webkit-user-select:none;user-select:none;z-index:101}#top-menu>.left{display:flex;flex-direction:row;padding-bottom:env(safe-area-inset-bottom)}#top-menu>.right{display:flex;flex-direction:row-reverse;justify-self:flex-end}#top-menu .nav{display:inline-block;text-decoration:none}#top-menu ul{margin:0;padding:0}#top-menu #home-page-logo{font-size:1.5rem;font-weight:600;padding-top:.7rem;width:200px}@media screen and (-ms-high-contrast:active){#top-menu #home-page-logo svg path{fill:blue}}#top-menu #home-page-logo svg{margin-left:1rem;margin-right:.6rem}#top-menu #home-page-logo span{margin-right:.2rem;position:relative;text-decoration:none;top:-.3rem}#top-menu .nav-item{display:inline-block;font-size:1rem;font-weight:600;text-decoration:none}#top-menu .nav-item a{display:block;padding:.95rem .5em .7em}#top-menu .nav-item a:hover{opacity:.8}#top-menu .nav-item a.active,#top-menu .nav-item a:focus{text-decoration:underline}#top-menu a{color:#fff;text-decoration:none}#beta-notification-menu,.gatsby-noscript{background-color:#c63131;color:#fff;padding:.4rem 0;text-align:center;-webkit-user-select:none;user-select:none}#beta-notification-menu a,.gatsby-noscript a{color:#fff}form.search{background-color:#235a97;border-radius:3px 0 0 3px;display:inline-block;height:3rem;padding-left:1rem}form.search svg{margin-right:.3rem;position:relative;top:.1rem}@media screen and (-ms-high-contrast:black-on-white){form.search svg path{fill:#000}}form.search:focus-within{background-color:#358ef1}@media screen and (-ms-high-contrast:black-on-white){form.search:focus-within{border:2px solid #fff}}@media screen and (-ms-high-contrast:white-on-black){form.search:focus-within{border:2px solid #000}}form.search input{-webkit-appearance:none;background-color:#235a97;border:none;border-radius:0;color:#fff;font-size:1rem;font-weight:600;height:3rem;vertical-align:initial!important;width:150px}form.search input:focus-within{background-color:#358ef1}form.search input::placeholder{color:#fff}#like-dislike-subnav,.page-popup{transition:opacity .2s linear}.page-popup{background:#222;border-radius:5px;border-radius:4px;bottom:20px;box-shadow:0 1.6px 3.6px 0 rgba(0,0,0,.432),0 .3px .9px 0 rgba(0,0,0,.408);color:#fff;position:fixed;right:20px;z-index:2}.page-popup p{font-size:14px;padding:0 10px}.page-popup div{display:flex}.page-popup div button{background-color:#235a97;border:none;border-radius:0;color:#fff;flex:1 1;flex-grow:1}.page-popup div button.focus,.page-popup div button:hover{background-color:#104261}.page-popup div button.first{border-right:1px solid #fff}.page-popup svg{fill:#fff}#top-menu nav ul .show-only-medium{display:none}#top-menu nav ul .hide-only-medium{display:inline}#top-menu nav ul .show-only-largest,#top-menu nav ul .show-only-small{display:none}@media(max-width:800px){#top-menu nav ul .show-only-small{display:block!important}#top-menu nav ul .show-small{display:inline!important}#top-menu nav ul .hide-only-medium{display:none}#top-menu nav ul .show-only-large{display:none!important}}@media(min-width:767px)and (max-width:900px){#top-menu nav ul .show-only-medium{display:inline!important}#top-menu nav ul .hide-only-medium{display:none!important}}@media(min-width:900px){#top-menu nav ul .show-only-large{display:inline-block!important}}@media(min-width:1050px){#top-menu nav ul .show-only-largest{display:inline-block!important}}@media(max-width:790px){#site-wrapper{margin-bottom:-1px}#my-lang-quick-jump,.hide-small{display:none!important}#top-menu{bottom:0;display:flex;flex-direction:column-reverse;height:auto;left:0;position:fixed;right:0}#top-menu .nav-item{display:block}#top-menu.up{transform:translate(0);transition-timing-function:ease;transition:transform .3s}#top-menu.down{transform:translateY(8.2rem);transition-timing-function:ease;transition:transform .6s}}@media(max-width:790px)and (prefers-reduced-motion:reduce){#top-menu.down,#top-menu.up{transition:none}}@media(max-width:790px){#top-menu #home-page-logo{width:auto}#top-menu .below-small nav{flex-grow:1}#top-menu .below-small nav ul{display:flex}#top-menu .below-small nav ul li{flex:1 1;text-align:center}.above-small .search-section{width:100%}.above-small form.search{display:flex;width:calc(100% - 1rem)}.above-small form.search svg{position:relative;top:1rem}.above-small form.search input{width:200%}#top-menu .ds-dropdown-menu{bottom:140%;left:0!important;margin-left:-34px;min-width:0;right:-180px!important;top:auto!important}#top-menu .ds-dropdown-menu:before{bottom:-7px;left:40px;top:auto;transform:rotate(135deg)}}.skip-to-main{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.skip-to-main:focus{clip:auto;background-color:#faf9f8;border:1px dashed #000;color:#000;height:auto;overflow:auto;padding:20px;position:absolute;text-align:center;width:100%;z-index:999999}#small-device-button-sidebar{display:none}nav#sidebar{background-color:var(--sidebar-background-color);color:var(--alt-text-color);min-width:16rem}nav#sidebar ul{margin:0;padding:0;position:sticky;top:0}nav#sidebar ul li{border-bottom:1px solid var(--sidebar-item-border-color);font-size:1rem;font-weight:400;list-style:none;min-height:2.5rem;padding:0}nav#sidebar ul li button{-webkit-appearance:none;background-color:transparent;border:none;color:var(--alt-text-color);cursor:pointer;display:block;font-size:1rem;font-weight:500;height:2.5rem;padding-left:1rem;position:relative;text-align:left;width:100%}nav#sidebar ul li button .closed path,nav#sidebar ul li button .open path{stroke:var(--text-color)}nav#sidebar ul li button:active,nav#sidebar ul li button:focus{background-color:var(--sidebar-active-button-background-color);color:var(--alt-text-color)}nav#sidebar ul li button span{position:absolute;right:20px}nav#sidebar ul li ul ul{margin-left:.2rem}nav#sidebar ul li.highlighted{background-color:var(--sidebar-list-active-background-color)}nav#sidebar ul li.highlighted svg path{stroke:#3178c6}nav#sidebar ul li.closed span.open,nav#sidebar ul li.closed ul,nav#sidebar ul li.open>button>span.closed{display:none}nav#sidebar ul li.open>ul{background-color:var(--sidebar-list-background-color)}nav#sidebar ul li.open.highlighted ul{background-color:var(--sidebar-list-active-background-color)}nav#sidebar ul li ul{margin:0;padding:0}nav#sidebar ul li ul a{color:var(--alt-text-color);display:block;flex-grow:1;padding-bottom:.5rem;padding-left:1rem;padding-top:.5rem;text-decoration:none}nav#sidebar ul li ul li{list-style:none}nav#sidebar ul li ul li a{font-weight:300;margin-right:-.5rem}nav#sidebar ul li ul li:hover{margin-right:-.3rem;padding-left:.3rem;transition:padding-left .1s ease-out}@media(prefers-reduced-motion:reduce){nav#sidebar ul li ul li:hover{transition:none}}nav#sidebar ul li ul li a:focus,nav#sidebar ul li ul li a:hover{border-left:2px solid var(--sidebar-link-border-color)}nav#sidebar ul li ul li.highlight a{border-left:2px solid #3178c6;color:#2866a9;font-weight:500;margin-left:.5rem;margin-right:-.5rem}@media(min-width:800px){nav#sidebar>ul{max-height:calc(100vh - 10px);overflow-x:hidden;overflow-y:auto}}@media(max-width:800px){button#small-device-button-sidebar{-webkit-appearance:none;background-color:#c4c4c4;border:none;border-radius:6px;bottom:120px;display:flex;left:20px;margin-bottom:env(safe-area-inset-bottom);padding:10px;position:fixed;transition-timing-function:ease;transition:left .3s;z-index:100}}@media(max-width:800px)and (prefers-reduced-motion:reduce){button#small-device-button-sidebar{transition:none}}@media(max-width:800px){button#small-device-button-sidebar.hidden{left:-80px}button#small-device-button-sidebar:active{background-color:#575757}nav#sidebar{-webkit-overflow-scrolling:touch;height:100%;margin-left:-800px;overflow-x:hidden;overflow-y:scroll;position:fixed;transition-timing-function:ease;transition:margin-left .3s;width:90%;z-index:99}nav#sidebar ul{padding-bottom:200px}}@media(max-width:800px)and (prefers-reduced-motion:reduce){nav#sidebar{transition:none}}@media(max-width:800px){nav#sidebar.show{margin-left:0}nav#sidebar>ul>li,nav#sidebar>ul>li>button{font-size:1.3rem}}#site-footer{background-color:#3178c6;color:#fff;padding-bottom:3rem;padding-top:1rem}@media(max-width:800px){#site-footer{padding-bottom:9rem}}#site-footer a{color:#fff}#site-footer section{margin:0 auto;max-width:1040px;padding-left:.5rem;padding-right:.5rem;padding-top:1rem}#site-footer h3{font-size:20px;font-style:normal;font-weight:600;margin-top:1px}#site-footer ul{display:flex;flex-wrap:wrap;padding:0}#site-footer ul li{font-weight:600;list-style:none;width:13rem}#site-footer ul li a{font-size:16px}#site-footer ul li p{font-size:14px;margin-top:2px;width:74%}#site-footer ul li span.link-prefix{left:-30px;position:absolute;text-align:right;width:26px}@media(max-width:800px){#site-footer ul li{margin-left:10px}#site-footer ul li p{width:100%}}#site-footer section#customize{border-bottom:1px solid hsla(0,0%,100%,.3);padding-top:2px}#site-footer section#customize article{display:flex;flex-direction:row}#site-footer section#customize article h3{width:240px}@media(max-width:800px){#site-footer section#customize article{flex-direction:column;margin-bottom:1rem}#site-footer section#customize article label{margin-left:8px}}#site-footer section#customize article label{display:flex;flex-direction:row}#site-footer section#customize article label p{margin:6px 8px 0 0;padding:0}#site-footer section#customize .switch-wrap{display:inline-block;height:20px;margin-right:1rem;padding:5px}#site-footer section#customize .switch-wrap select{background-color:#00273f;color:#fff}#site-footer section#community{border-top:1px solid hsla(0,0%,100%,.3);display:flex;padding-top:2rem}@media(max-width:800px){#site-footer section#community{flex-direction:column-reverse}#site-footer section#community article#logos{margin:3rem auto 0;text-align:center}}#site-footer section#community article>ul{display:flex;flex-wrap:wrap}#site-footer section#community article>ul>li{margin-bottom:.8rem;word-break:break-all}@media(min-width:800px){#site-footer section#community article>ul>li{width:50%}}#site-footer section#community #logos{margin-right:40px;width:200px}#site-footer section#community #logos svg{margin-bottom:-.8rem}@media screen and (-ms-high-contrast:black-on-white){#site-footer section#community #logos img{filter:invert(100%)}#site-footer section#community #logos svg path{fill:#000}}#site-footer section#community #logos svg.typescript-long{margin-left:8px;position:relative;top:2px}#site-footer section#community #logos img#microsoft-logo{margin-bottom:-.8rem;margin-top:1rem}#site-footer section#community #community-links,#site-footer section#community #using-typescript{flex:1 1}@media(max-width:800px){#playground-samples-popover{display:none}#community-links ul,#using-typescript ul{margin-left:12px}}.popover-container{position:relative}.popover-container .examples{overflow-y:auto}.popover-container .examples>div.section-content .section-list{width:300px}.popover-container.allow-hover #playground-samples-popover{bottom:-10px;opacity:0}.popover-container.allow-hover:hover #playground-samples-popover{bottom:-5px;opacity:1;visibility:visible}.popover-container.allow-hover:hover .footer-icon:after{content:"▼"}.popover-container .footer-icon:after{content:"⊙"}#playground-samples-popover{bottom:0;color:#000;left:-252px;margin:0 auto;opacity:1;position:absolute;right:-320px;transition:bottom .3s ease,opacity .2s linear,visibility 0s linear;visibility:hidden;z-index:123}#playground-samples-popover .section-content{display:flex}#playground-samples-popover .section-content .section-list li{margin-top:4px}#playground-samples-popover .section-content .example-indicator{margin-top:0}#playground-samples-popover .arrow-down{border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid var(--footer-arrow-color);height:0;margin:0 auto 20px;position:relative;right:179px;width:0}#playground-samples-popover .navbar-sub{border-bottom:1px solid #235a97;border-radius:0}#playground-samples-popover .navbar-sub div.info{color:#000;padding:20px;width:320px}#playground-samples-popover a{color:#3178c6;text-decoration:none}@font-face{font-display:swap;font-family:Cascadia Mono-SemiLight;font-style:normal;font-weight:400;src:url(/fonts/CascadiaMono-SemiLight.woff2) format("woff2")}@font-face{font-display:swap;font-family:Cascadia Code-SemiLight;font-style:normal;font-weight:400;src:url(/fonts/CascadiaCode-SemiLight.woff2) format("woff2")}@font-face{font-display:swap;font-family:JetBrains Mono-Regular;font-style:normal;font-weight:400;src:url(/fonts/JetBrainsMono-Regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:FiraCode-Regular;font-style:normal;font-weight:400;src:url(/fonts/FiraCode-Regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Dank Mono Regular;font-style:normal;font-weight:400;src:url(/fonts/DankMono-Regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:SourceCode Pro Regular;font-style:normal;font-weight:400;src:url(/fonts/SourceCodePro-Regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:OpenDyslexicMono Regular;font-style:normal;font-weight:400;src:url(/fonts/OpenDyslexicMono-Regular.woff) format("woff")}@font-face{font-display:swap;font-family:OpenDyslexic Regular;font-style:normal;font-weight:400;src:url(/fonts/OpenDyslexic-Regular.woff) format("woff")}@font-face{font-display:swap;font-family:Leelawadee UI Web;font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:Leelawadee UI Web;font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:Leelawadee UI Web;font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:Leelawadee UI Web;font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:Leelawadee UI Web;font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Arabic)";font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-light.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-light.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Arabic)";font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Arabic)";font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Arabic)";font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-semibold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-semibold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Arabic)";font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-arabic/segoeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Cyrillic)";font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-light.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-light.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Cyrillic)";font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Cyrillic)";font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Cyrillic)";font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-semibold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-semibold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Cyrillic)";font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-cyrillic/segoeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (East European)";font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-light.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-light.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (East European)";font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (East European)";font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (East European)";font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-semibold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-semibold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (East European)";font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-easteuropean/segoeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Greek)";font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-light.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-light.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Greek)";font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Greek)";font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Greek)";font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-semibold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-semibold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Greek)";font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-greek/segoeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Hebrew)";font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-light.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-light.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Hebrew)";font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Hebrew)";font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Hebrew)";font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-semibold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-semibold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Hebrew)";font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-hebrew/segoeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Vietnamese)";font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-light.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-light.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Vietnamese)";font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Vietnamese)";font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Vietnamese)";font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-semibold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-semibold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (Vietnamese)";font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-vietnamese/segoeui-bold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (West European)";font-style:normal;font-weight:100;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (West European)";font-style:normal;font-weight:300;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (West European)";font-style:normal;font-weight:400;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (West European)";font-style:normal;font-weight:600;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format("woff")}@font-face{font-display:swap;font-family:"Segoe UI Web (West European)";font-style:normal;font-weight:700;src:url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2) format("woff2"),url(https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts/segoeui-westeuropean/segoeui-bold.woff) format("woff")}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body button,body input,body textarea{font-family:inherit}[lang^=ar] body,body [lang^=ar],body[lang^=ar]{font-family:"Segoe UI Web (Arabic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=bg] body,body [lang^=bg],body[lang^=bg]{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=cs] body,body [lang^=cs],body[lang^=cs]{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=el] body,body [lang^=el],body[lang^=el]{font-family:"Segoe UI Web (Greek)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=et] body,body [lang^=et],body[lang^=et]{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=he] body,body [lang^=he],body[lang^=he]{font-family:"Segoe UI Web (Hebrew)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=hi] body,body [lang^=hi],body[lang^=hi]{font-family:Nirmala UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=hr] body,[lang^=hu] body,body [lang^=hr],body [lang^=hu],body[lang^=hr],body[lang^=hu]{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=ja] body,body [lang^=ja],body[lang^=ja]{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Meiryo,Hiragino Sans,Source Han Sans,Noto Sans CJK JP,sans-serif}[lang^=kk] body,body [lang^=kk],body[lang^=kk]{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=ko] body,body [lang^=ko],body[lang^=ko]{font-family:Malgun Gothic,Gulim,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=lo] body,body [lang^=lo],body[lang^=lo]{font-family:Leelawadee UI Web,Lao UI,DokChampa,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=lt] body,[lang^=lv] body,[lang^=pl] body,body [lang^=lt],body [lang^=lv],body [lang^=pl],body[lang^=lt],body[lang^=lv],body[lang^=pl]{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=ru] body,body [lang^=ru],body[lang^=ru]{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=sk] body,[lang^=sr-latn] body,body [lang^=sk],body [lang^=sr-latn],body[lang^=sk],body[lang^=sr-latn]{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=th] body,body [lang^=th],body[lang^=th]{font-family:Leelawadee UI Web,Kmer UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=tr] body,body [lang^=tr],body[lang^=tr]{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=uk] body,body [lang^=uk],body[lang^=uk]{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=vi] body,body [lang^=vi],body[lang^=vi]{font-family:"Segoe UI Web (Vietnamese)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=zh-hans] body,body [lang^=zh-hans],body[lang^=zh-hans]{font-family:Microsoft Yahei UI,Verdana,Simsun,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang^=zh-hant] body,body [lang^=zh-hant],body[lang^=zh-hant]{font-family:Microsoft Jhenghei UI,Pmingliu,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.dark-theme{--background-color:#262626;--text-color:#fff;--border-color:#444;--background-minor-highlight-color:#343434;--inline-code-background-color:rgba(58,58,92,.7);--link-color:#719af4;--pure-background:#000;--raised-background-color:#313131;--alt-text-color:#fff;--raised-box-shadow:0 1.6px 3.6px 0 hsla(0,0%,100%,.132),0 0.3px 0.9px 0 hsla(0,0%,100%,.108);--sidebar-background-color:#2a2a2b;--sidebar-list-active-background-color:#28323a;--sidebar-list-background-color:#353434;--sidebar-link-border-color:#fff;--sidebar-item-border-color:#3e3e3e;--sidebar-active-button-background-color:#4e4e4f;--playground-divider:#f2f2f2;--playground-dropdown-bg:#313131;--playground-dropdown-shadow:0 6px 12px hsla(0,0%,58%,.175);--playground-dropdown-border:#000;--playground-toolbar-hover-bg:#262626;--playground-dragbar-bg:#28323a;--playground-dragbar-border:#fff;--playground-pre-color:#fff;--table-border-color:#545454;--playground-pre-bg:#1e1e1e;--blue-tinged-bg:#2c3841;--blue-tinged-strong:#273f52;--footer-arrow-color:$ts-light-bg-grey-highlight-color;--fade-gradient:linear-gradient(0deg,#313131,rgba(49,49,49,.2))}html,html.light-theme{--background-color:#faf9f8;--pure-background:#fff;--text-color:#333;--border-color:#eee;--background-minor-highlight-color:#fcfcfc;--inline-code-background-color:#f1f1fe;--link-color:#235a97;--raised-background-color:#fff;--alt-text-color:#000;--raised-box-shadow:0 1.6px 3.6px 0 rgba(0,0,0,.132),0 0.3px 0.9px 0 rgba(0,0,0,.108);--sidebar-background-color:#eee;--sidebar-list-active-background-color:#e3e8ec;--sidebar-list-background-color:#e4e4e4;--sidebar-link-border-color:#000;--sidebar-item-border-color:#dfdfdf;--sidebar-active-button-background-color:#dfdfdf;--playground-divider:#4e4e4f;--playground-dropdown-bg:#fff;--playground-dropdown-shadow:0 6px 12px rgba(0,0,0,.175);--playground-dropdown-border:#f2f2f2;--playground-toolbar-hover-bg:#f2f2f2;--playground-dragbar-bg:#fff;--playground-dragbar-border:#c4c4c4;--playground-pre-color:#000;--playground-pre-bg:#f7f7f7;--footer-arrow-color:$ts-dark-bg-for-foreground-color;--table-border-color:#f1f1f1;--blue-tinged-bg:#e6f2fb;--blue-tinged-strong:#cce4f6;--fade-gradient:linear-gradient(0deg,#fff,hsla(0,0%,100%,.2));-webkit-font-smoothing:antialiased;background-color:var(--background-color);color:var(--text-color);font-family:var(--body-font);font-size:16px;line-height:1.4}html{--code-font:"Cascadia Mono-SemiLight",Menlo,Monaco,Consolas,monospace;--body-font:"Segoe UI Web (West European)","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif}html.font-cascadia-ligatures{--code-font:"Cascadia Code-SemiLight",Menlo,Monaco,Consolas,monospace}html.font-consolas{--code-font:Consolas,monospace}html.font-dank-mono{--code-font:"Dank Mono Regular",Menlo,Monaco,Consolas,monospace}html.font-jetbrains-mono{--code-font:"JetBrains Mono-Regular",Menlo,Monaco,Consolas,monospace}html.font-fira-code{--code-font:"FiraCode-Regular",Menlo,Monaco,Consolas,monospace}html.font-sf-mono{--code-font:"SF Mono",Menlo,Monaco,Consolas,monospace}html.font-source-code-pro{--code-font:"SourceCode Pro Regular",Menlo,Monaco,Consolas,monospace}html.font-open-dyslexic{--code-font:"OpenDyslexicMono Regular",Menlo,Monaco,Consolas,monospace;--body-font:"OpenDyslexic Regular","Segoe UI Web (West European)","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif}.raised{background-color:var(--raised-background-color);box-shadow:var(--raised-box-shadow);color:var(--alt-text-color)}.raised a{color:var(--link-color)}.raised h1,.raised h2,.raised h3{line-height:normal;margin-bottom:1.5rem;margin-top:2rem}.raised li,.raised p{line-height:1.4rem}.raised ul{padding-left:10px}.raised ul li{margin-bottom:10px;margin-left:10px}.raised h1>code,.raised h2>code,.raised h3>code{background-color:var(--inline-code-background-color);font-size:.95em;margin-left:.2em;margin-right:.2em;padding:2px 4px}.raised li>code,.raised p>code{background-color:var(--inline-code-background-color);font-family:var(--code-font);font-size:.9rem;padding:2px 4px}.raised td{padding:4px}.dark-theme .raised .markdown .anchor.before svg path{fill:#fff}h2,h3{font-weight:400}.main-content-block{margin:1rem auto;max-width:960px;padding:.4rem 2rem 2rem}.main-content-block.headline{max-width:calc(960px + 4rem)}body{margin:0}#___gatsby,body,html{height:100%}#site-wrapper{display:flex;flex-direction:column}.dark-theme{color-scheme:dark} /*! mscc v0.4.2 - Copyright 2020 Microsoft Corporation */.cc-banner{font-size:12px;position:relative}.cc-banner .hide{display:none}.cc-banner a,.cc-banner div,.cc-banner span,.cc-banner svg{margin:0;padding:0;text-decoration:none}.cc-banner .cc-v-center{display:inline;line-height:2em;vertical-align:middle}.cc-banner[dir=rtl] .cc-float-left,.cc-float-right{float:right}.cc-banner[dir=rtl] .cc-float-right,.cc-float-left{float:left}.cc-banner{background:#f2f2f2;color:#231f20;display:none;font-family:Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;padding:0 1em;text-align:center}@media(min-width:768px){.cc-banner{font-size:13px;padding:0 1.65em}}.cc-banner>.cc-container{display:inline-block;padding:.75em 0;text-align:left;width:100%}[dir=rtl].cc-banner>.cc-container{text-align:right}@media(min-width:1084px){.cc-banner{padding:0}.cc-banner>.cc-container{max-width:1600px;width:90%}}.cc-banner.active{display:block}.cc-banner .cc-icon{height:1.846em;width:1.846em}.cc-banner .cc-text{margin-left:.5em;margin-right:1.5em}[dir=rtl].cc-banner .cc-text{margin-left:1.5em;margin-right:.5em}.cc-banner .cc-link{color:#0067b8;text-decoration:none}.cc-banner .cc-link:focus,.cc-banner .cc-link:hover{text-decoration:underline}.cc-banner .cc-link:focus{background:content-box rgba(0,120,215,.1);outline:0}@media screen and (-ms-high-contrast:active){.cc-banner{border-bottom:1px solid}}#branding>h1,#branding>h2{font-weight:400;text-align:center}#branding>h1{font-size:3rem;margin-bottom:0;margin-top:5rem}#branding>h2{font-size:1.5rem;margin-bottom:2rem;margin-top:6rem}#branding>h2.subnav{margin-top:0}#branding .headline{padding:2rem}#branding .headline,#branding .subheadline{align-items:center;display:flex;justify-content:center}#branding .subheadline{flex-direction:column;max-width:400px;padding-bottom:5rem;position:relative}#branding .subheadline p.attached-bottom{border-top:1px solid #d3d3d3;bottom:0;height:2.8rem;left:0;padding:1rem;position:absolute;right:0;text-align:left}#branding .recommendations p{margin-top:0;padding:0 1rem 1rem}.navbar-sub{clear:both;display:flex;height:3rem;justify-content:space-between;position:relative}.navbar-sub>ul{display:flex;margin:0;padding:0}.navbar-sub li.name{font-size:1.2rem;font-weight:600;width:200px}.navbar-sub li.name span{padding-left:1rem;padding-top:.7rem}.navbar-sub li{display:flex;font-size:1rem;font-weight:600;list-style:none}.navbar-sub li.divider{background-color:var(--playground-divider);height:1px;margin:9px 0;overflow:hidden}.navbar-sub li .example-indicator{top:1.25em!important}.navbar-sub li a{color:var(--text-color);display:block;padding:.95rem .75rem .5rem .7rem;text-decoration:none}.navbar-sub li.dropdown.open .dropdown-dialog,.navbar-sub li.dropdown.open ul{display:block}.navbar-sub li.dropdown .dropdown-dialog,.navbar-sub li.dropdown ul{display:none;float:left;left:0;position:absolute;top:100%;z-index:5}.navbar-sub li.dropdown ul.dropdown-menu{-webkit-background-clip:padding-box;background-clip:padding-box;background-color:var(--playground-dropdown-bg);border:1px solid var(--playground-dropdown-border);border-radius:4px;box-shadow:0 6px 12px rgba(0,0,0,.175);font-size:14px;list-style:none;margin:2px 0 0;max-height:calc(100vh - 150px);min-width:300px;overflow-y:auto;padding:5px 0;text-align:left;z-index:99}.navbar-sub li.dropdown ul.dropdown-menu.versions{min-width:5rem}.navbar-sub li.dropdown ul.dropdown-menu.versions li{margin-bottom:0;margin-left:0}.navbar-sub li.dropdown ul.dropdown-menu.versions li.beta{border-bottom:1px solid #f2f2f2;color:#3178c6}.navbar-sub li.dropdown ul.dropdown-menu.versions li.nightly{border-top:1px solid #f2f2f2}.navbar-sub li.dropdown ul.dropdown-menu.versions a{margin:0;padding:10px;text-align:center}.navbar-sub li.dropdown ul.dropdown-menu a{display:block;width:100%}.navbar-sub li.dropdown ul.dropdown-menu li:hover{background-color:#f5f5f5;color:#262626;text-decoration:none}.navbar-sub li.dropdown .dropdown-dialog{overflow-y:scroll;padding:2rem;width:800px}.navbar-sub li.dropdown .dropdown-dialog h3{font-size:2em;font-weight:600;height:2em;margin:0}.navbar-sub li.dropdown .dropdown-dialog a{color:var(--link-color);padding-bottom:.2rem;padding-left:0}.navbar-sub li.dropdown .dropdown-dialog #config-container p{margin:0 0 8px 4px}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container{display:flex;flex-wrap:wrap}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div{max-width:400px;min-width:200px}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div ol{margin:0;padding:0}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div li{margin-bottom:.5rem}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div input{margin-top:.4rem}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div label{font-weight:400}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div label:hover a.compiler_info_link{display:block}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div label a.compiler_info_link{display:none;padding:0;position:absolute;right:10px;text-align:center;top:0}.navbar-sub li.dropdown .dropdown-dialog #config-container #boolean-options-container>div label>span{font-family:var(--code-font);margin-left:4px}.navbar-sub li.dropdown .dropdown-dialog #compiler-dropdowns{display:flex;margin:1.5rem 0}.navbar-sub li.dropdown .dropdown-dialog #compiler-dropdowns label{font-family:var(--code-font);margin-right:.5rem;width:33%}.navbar-sub li.dropdown .dropdown-dialog #compiler-dropdowns label select{margin-left:1rem}.navbar-sub li.dropdown .dropdown-dialog #compiler-dropdowns label span.compiler-flag-blurb{display:block;font-family:var(--body-font);font-weight:400}main>nav{position:relative}main>nav .dropdown-dialog{background-color:var(--playground-dropdown-bg);padding-left:0}main>nav>ul li.disabled{opacity:.5}main>nav>ul li.active.open,main>nav>ul li.active:hover{background-color:var(--playground-dropdown-bg)}main>nav>ul li.active.open .caret{transform:scaleY(-1)}main>nav>ul li.active.name:hover{background-color:transparent}main>nav .examples{box-shadow:none;height:auto}button.examples-close{position:absolute;right:20px;top:20px}main #editor-toolbar>ul>li{margin-bottom:0;margin-left:0;position:relative}main #editor-toolbar>ul>li>a{padding-top:.8rem}@media(prefers-color-scheme:dark){main #editor-toolbar>ul>li>a:hover{border-bottom:1px solid #fff}}main #editor-toolbar>ul>li .dropdown-menu{left:4px}main #editor-toolbar li:hover{background-color:var(--playground-toolbar-hover-bg)}.caret{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid;display:inline-block;height:0;margin-left:2px;vertical-align:middle;width:0}#editor-toolbar>ul>li>a:first-child{padding-left:1rem}#playground-container{display:flex;height:800px}#playground-container ol{padding:0}#playground-container #navigation-container{background-color:var(--blue-tinged-bg);overflow-y:auto}#playground-container #navigation-container h4{margin-left:12px;margin-top:12px}#playground-container #navigation-container ul{padding:0}#playground-container #navigation-container ul li{border-radius:0 3px 3px 0;cursor:pointer;font-size:14px;font-weight:600;height:22px;line-height:22px;list-style:none;margin:0;overflow:hidden;padding-left:12px;text-overflow:ellipsis;white-space:nowrap}#playground-container #navigation-container ul li a{display:block;text-decoration:none}#playground-container #navigation-container ul li a svg{margin-right:8px}#playground-container #navigation-container ul li.selectable:hover{background-color:hsla(0,0%,100%,.314)}#playground-container #navigation-container ul li.selectable.selected{background-color:var(--blue-tinged-strong)}#playground-container #navigation-container ul li.selectable.selected a{color:var(--text-color)}#playground-container #navigation-container ul li.selectable.selected path{stroke:var(--text-color)}#playground-container #navigation-container ul li hr{margin-left:0;margin-top:10px;width:60px}#playground-container #story-container{font-size:.9rem;overflow-y:auto;padding:0 20px 20px}#playground-container #story-container .highlight pre{background-color:#f7f7f7;border-radius:3px;font-size:85%;line-height:1.45;overflow:auto;padding:16px}#playground-container #story-container details[open]{border-left:2px solid var(--blue-tinged-strong);padding-left:1rem}#playground-container #story-container details[open] summary{margin-left:-.5rem}#playground-container #story-container summary:hover{background-color:var(--background-minor-highlight-color);cursor:pointer}#playground-container #story-container kbd{background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 0 0 2px #fff;color:#333;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff}#playground-container #story-container .highlight{font-size:14px;margin-bottom:16px}#playground-container #story-container .pl-c{color:#969896}#playground-container #story-container .pl-c1,#playground-container #story-container .pl-s .pl-v{color:#0086b3}#playground-container #story-container .pl-e,#playground-container #story-container .pl-en{color:#795da3}#playground-container #story-container .pl-s .pl-s1,#playground-container #story-container .pl-smi{color:#333}#playground-container #story-container .pl-ent{color:#63a35c}#playground-container #story-container .pl-k{color:#a71d5d}#playground-container #story-container .pl-pds,#playground-container #story-container .pl-s,#playground-container #story-container .pl-s .pl-pse .pl-s1,#playground-container #story-container .pl-sr,#playground-container #story-container .pl-sr .pl-cce,#playground-container #story-container .pl-sr .pl-sra,#playground-container #story-container .pl-sr .pl-sre{color:#183691}#playground-container #story-container .pl-v{color:#ed6a43}#playground-container #story-container .pl-id{color:#b52a1d}#playground-container #story-container .pl-ii{background-color:#b52a1d;color:#f8f8f8}#playground-container #story-container .pl-sr .pl-cce{color:#63a35c;font-weight:700}#playground-container #story-container .pl-ml{color:#693a17}#playground-container #story-container .pl-mh,#playground-container #story-container .pl-mh .pl-en,#playground-container #story-container .pl-ms{color:#1d3e81;font-weight:700}#playground-container #story-container .pl-mq{color:teal}#playground-container #story-container .pl-mi{color:#333;font-style:italic}#playground-container #story-container .pl-mb{color:#333;font-weight:700}#playground-container #story-container .pl-md{background-color:#ffecec;color:#bd2c00}#playground-container #story-container .pl-mi1{background-color:#eaffea;color:#55a532}#playground-container #story-container .pl-mdr{color:#795da3;font-weight:700}#playground-container #story-container .pl-mo{color:#1d3e81}#playground-container #editor-container{-webkit-font-smoothing:subpixel-antialiased;background-color:var(--playground-dropdown-bg);display:flex;flex-direction:column;flex-grow:1;position:relative;width:calc(100% - 360px)}#playground-container #editor-container .editor-section{display:flex;flex-direction:column}#playground-container #editor-container #monaco-editor-embed{height:100%}#playground-container #editor-container #editor-toolbar{border-bottom:1px solid #c4c4c4;height:3rem;margin-bottom:10px;margin-right:-2px;position:relative}#playground-container #editor-container #editor-toolbar ul.right{background-color:var(--playground-dropdown-bg);position:relative;right:0}#playground-container .playground-dragbar{background-color:var(--playground-dragbar-bg);border-left:1px solid var(--playground-dragbar-border);cursor:col-resize;margin-left:2px;padding:3px}#playground-container .playground-dragbar.left{background-color:var(--blue-tinged-bg);border-left:none;border-right:1px solid var(--playground-dragbar-border);margin-left:0}#playground-container .playground-dragbar:hover{background-color:var(--blue-tinged-tinged-strong)}#playground-container .playground-dragbar.selected{background-color:var(--blue-tinged-strong)}#playground-container .playground-sidebar{background-color:var(--playground-dropdown-bg);display:flex;flex-basis:320px;flex-direction:column;max-width:320px;overflow-x:hidden;overflow-y:hidden;padding:0 1em 0 .5rem;width:320px;z-index:1}@media(max-width:800px){#playground-container .playground-sidebar{flex-basis:300px;max-width:300px;width:300px}}#playground-container .playground-sidebar .playground-plugin-container{flex:1 1;flex-grow:1;flex-shrink:1;height:100%;max-width:100%;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}#playground-container .playground-sidebar .playground-plugin-container #restart-required{border:1px solid #3178c6;display:none;padding:5px 10px;position:absolute;right:0;text-align:center;top:-2px}#playground-container .playground-sidebar .playground-plugin-container pre{background-color:var(--pure-background);border:none;color:var(--text-color);overflow-x:auto;padding:0 10px;width:100%}#playground-container .playground-sidebar .playground-plugin-container pre code{font-family:var(--code-font);font-size:14px;line-height:19px}#playground-container .playground-sidebar .playground-plugin-tabview{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}@media(max-width:800px){#playground-container .playground-sidebar .playground-plugin-tabview{justify-content:flex-start}}#playground-container .playground-sidebar .playground-plugin-tabview button{background:none;border:none;color:inherit;cursor:pointer;font-family:var(--body-font);font-size:14px;font-weight:600;margin:14px 2px 5px;padding-top:0;position:relative}#playground-container .playground-sidebar .playground-plugin-tabview button .plugin-tab-notification{background-color:#c63131;border-radius:20px;color:#fff;height:20px;padding:0 4px;position:absolute;right:-10px;text-align:right;top:-8px}#playground-container .playground-sidebar .playground-plugin-tabview button:disabled{opacity:.4}#playground-container .playground-sidebar .playground-plugin-tabview button.active{border-bottom:1px solid var(--link-color)}#playground-container .playground-sidebar .playground-plugin-tabview button:focus{color:var(--link-color)}#playground-container .playground-sidebar .playground-settings-container,#playground-container .playground-sidebar pre{margin:0}.playground-plugin-container #log-tools{align-items:center;border-bottom:1px solid var(--playground-dragbar-border);border-top:1px solid var(--playground-dragbar-border);display:flex;margin-top:1px;padding:3px}.playground-plugin-container #log-tools svg{stroke:var(--text-color);cursor:pointer;padding-right:5px}.playground-plugin-container #log-container{font-family:var(--code-font);height:95%;line-height:1.5rem;overflow:auto;white-space:pre-wrap}.playground-plugin-container #log-container #log{margin-top:1rem}.playground-plugin-container #log-container .log-warn{color:orange}.playground-plugin-container #log-container .log-error{color:red}.playground-plugin-container #log-container .log-info{color:skyblue}.playground-plugin-container #log-container .log-log{color:silver}.playground-plugin-container #log-container .log-error,.playground-plugin-container #log-container .log-warn{font-weight:700}.playground-plugin-container #log-container hr{background:#fff;border:0;border-bottom:1px dashed #ccc}.playground-plugin-container #log-container .comma{color:#777}.playground-plugin-container div.ast{font-family:var(--code-font);font-size:.8rem;line-height:.3rem}.playground-plugin-container div.ast li{list-style-type:none;margin-bottom:4px;margin-left:0;position:relative}.playground-plugin-container div.ast li span.ast-node-number{color:blue}.dark-theme .playground-plugin-container div.ast li span.ast-node-number{color:#87cefa}.playground-plugin-container div.ast li span.ast-node-string{color:green}.dark-theme .playground-plugin-container div.ast li span.ast-node-string{color:#adff2f}.playground-plugin-container div.ast li span.ast-node-boolean{color:red}.dark-theme .playground-plugin-container div.ast li span.ast-node-boolean{color:coral}.playground-plugin-container div.ast li span.ast-node-undefined{color:brown}.dark-theme .playground-plugin-container div.ast li span.ast-node-undefined{color:#f4a460}.playground-plugin-container div.ast .ast-children>div.ast-tree-start{display:block;margin-left:12px;min-height:1rem}.playground-plugin-container div.ast div.ast-tree-start{display:inline-block}.playground-plugin-container div.ast div.ast-tree-start ul.ast-tree{border-left:1px solid #d3d3d3;display:none;margin-left:12px;margin-top:4px;padding-top:0}.playground-plugin-container div.ast div.ast-tree-start.open>a.node-name{top:4px}.playground-plugin-container div.ast div.ast-tree-start a.node-name{color:purple;font-weight:700;margin-left:10px;position:relative;text-decoration:none;top:0}.dark-theme .playground-plugin-container div.ast div.ast-tree-start a.node-name{color:orchid}.playground-plugin-container div.ast div.ast-tree-start a.node-name:hover{cursor:pointer;text-decoration:underline}.playground-plugin-container div.ast div.ast-tree-start a.node-name:before{display:block;height:1em;left:-.8em;padding:0 .1em;position:absolute}.playground-plugin-container div.ast div.ast-tree-start.open,.playground-plugin-container div.ast div.ast-tree-start.open>ul{display:block}.playground-plugin-container div.ast div.ast-tree-start>a:not(:last-child):before{content:"+"}.playground-plugin-container div.ast div.ast-tree-start.open>a:not(:last-child):before{content:"-"}.playground-plugin-container ul.compiler-diagnostics{font-family:var(--code-font);margin:0;padding:0}.playground-plugin-container ul.compiler-diagnostics li.diagnostic{cursor:pointer;font-size:.85rem;list-style:none;margin:0 0 1rem;padding-left:1rem;white-space:pre-wrap}.playground-plugin-container ul.compiler-diagnostics .error{border-left:2px solid red}.playground-plugin-container #empty-message-container{align-items:center;display:flex;flex-direction:column;height:80%;justify-content:center}.playground-plugin-container .playground-options input[type=checkbox]{margin-right:6px}.playground-plugin-container .playground-options.tight li{margin-bottom:.2rem}.playground-plugin-container .playground-options.tight span{margin-right:1rem}.playground-plugin-container .playground-options li{list-style:none;margin-bottom:1rem}.playground-plugin-container .playground-options li span{font-weight:600}.playground-plugin-container .briefly-highlight{animation:highlight 1s ease 1}@keyframes highlight{0%{background-color:#ff0}to{background-color:inherit}}span.right{float:right}.warning{font-size:.8}input[type=text],input[type=url]{font-size:1.1rem;padding:.2rem;width:80%}input.good{border-color:#086f56}#playground-container .playground-plugins{margin:1rem 0}#playground-container .playground-plugins.featured{border:1px solid #d3d3d3}#playground-container .playground-plugins.featured li{border-bottom:1px solid #d3d3d3}#playground-container .playground-plugins li{padding:10px 0}#playground-container .playground-plugins li div{display:flex;flex-direction:row;position:relative}#playground-container .playground-plugins input{display:block;height:100%;margin:0 8px;position:absolute}#playground-container .playground-plugins label{padding-left:30px;padding-right:10px}#playground-container .playground-plugins label span{font-weight:600}.custom-modules li a{border:1px solid #000;display:inline-block;height:1rem;line-height:1rem;text-align:center;text-decoration:none;width:1rem}.custom-modules li a:hover{background-color:#fcb7b7;color:red}.highlight-error{background-color:#fcb7b7}.highlight-info{background-color:#d3d3d3}.underscore-neutral{border-bottom:1px solid green}#popover-background{background-color:rgba(0,0,0,.75);height:100%;left:0;position:fixed;top:0;width:100%;z-index:100}#popover-modal{background-color:#fff;color:#000;display:flex;flex-direction:column;height:70%;left:50%;padding:20px;position:fixed;top:50%;transform:translate(-50%,-50%);width:80%;z-index:101}#popover-modal.smaller{height:40%;min-width:320px;padding:0;width:40%}#popover-modal textarea{font-family:var(--code-font);padding:8px}#popover-modal .close{position:absolute;right:20px;top:20px}#popover-modal pre{max-height:90%;overflow:auto}#popover-modal .window-title{background-color:#eee;font-size:32px;text-align:center}#popover-modal .window-title.warning{background:repeating-linear-gradient(45deg,#d63131,#d63131 10px,#c63131 0,#c63131 20px);color:#fff}#loader{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-bottom:200px;padding-top:200px}#loader p{text-align:center}#loader .lds-grid{display:inline-block;height:80px;position:relative;width:80px}#loader .lds-grid div{animation:lds-grid 1.2s linear infinite;background:#3178c6;border-radius:50%;height:16px;position:absolute;width:16px}#loader .lds-grid div:first-child{animation-delay:0s;left:8px;top:8px}#loader .lds-grid div:nth-child(2){animation-delay:-.4s;left:32px;top:8px}#loader .lds-grid div:nth-child(3){animation-delay:-.8s;left:56px;top:8px}#loader .lds-grid div:nth-child(4){animation-delay:-.4s;left:8px;top:32px}#loader .lds-grid div:nth-child(5){animation-delay:-.8s;left:32px;top:32px}#loader .lds-grid div:nth-child(6){animation-delay:-1.2s;left:56px;top:32px}#loader .lds-grid div:nth-child(7){animation-delay:-.8s;left:8px;top:56px}#loader .lds-grid div:nth-child(8){animation-delay:-1.2s;left:32px;top:56px}#loader .lds-grid div:nth-child(9){animation-delay:-1.6s;left:56px;top:56px}@keyframes lds-grid{0%,to{opacity:1}50%{opacity:.5}}#flash-bg{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:42}#flash-bg p{background-color:rgba(0,0,0,.8);border-radius:1em;color:#fff;font-size:1.5rem;padding:.5em 1.5em;transform:translateZ(0);transition:opacity .1s ease-in-out}.monaco-list{background-color:var(--background-color)}#dev .navbar-sub .active{text-decoration:underline}#dev .content{display:flex}@media(max-width:800px){#dev .content{flex-direction:column}}#dev pre{background-color:#f9f9f9;margin-right:0;overflow-x:scroll}#dev pre,#dev pre .mtk5{color:#000}#dev .split-fifty{display:flex;flex-direction:row;width:100%}@media(max-width:800px){#dev .split-fifty{flex-direction:column}}#dev .split-fifty>div,#dev .split-fifty>p{flex:1 1}#dev .split-fivehundred{width:calc(100% - 500px)}@media(max-width:900px){#dev .split-fivehundred{width:100%}}#dev .fivehundred{margin-left:20px;width:500px}@media(max-width:900px){#dev .fivehundred{margin-left:0;padding-left:20px;text-align:center;width:100%}}#dev .split-code{display:flex}#dev .split-code>p{flex:1 1;padding-right:1rem;width:30%}#dev .split-code>pre{flex:3 1;overflow-x:scroll}#dev #example-buttons div.button{background-color:#faf9f8;color:#000;cursor:pointer;display:inline-block;margin:10px;padding:8px 12px;text-decoration:none}#dev #example-buttons div.button:active,#dev #example-buttons div.button:hover{background-color:#dfdfdf}#dev #twoslash-failure{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:hsla(0,0%,100%,.5);bottom:0;left:0;padding:10px;position:absolute;right:0;top:0}#dev #twoslash-failure .err-content{border:2px solid #c63131;padding:20px}#dev #twoslash-failure .err-content p{font-family:Menlo,Monaco,Consolas,Courier New,monospace;white-space:pre-wrap}.cheatsheets .row{justify-content:center;margin-bottom:2rem}.cheatsheets .row p{flex:1 1;margin:10px;max-width:320px}.cheatsheets .sheet-container{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.cheatsheets .sheet{position:relative}.cheatsheets .sheet img{border:1px solid #000;box-shadow:0 4px 20px -6px rgba(0,0,0,.25);max-width:360px;transition:all .15s ease}.cheatsheets .sheet:active,.cheatsheets .sheet:hover{z-index:100}.cheatsheets .sheet:active img,.cheatsheets .sheet:hover img{border-color:#3178c6;box-shadow:0 4px 20px -2px rgba(0,0,0,.25);margin:-2px;z-index:100}.cheatsheets .sheet:active .description,.cheatsheets .sheet:hover .description{display:block}.cheatsheets .sheet.cs-1{transform:rotate(-1.1deg)}.cheatsheets .sheet.cs-2{transform:rotate(1.2deg)}.cheatsheets .sheet.cs-3{margin-top:-40px;transform:rotate(3deg)}.cheatsheets .sheet.cs-4{margin-top:-40px;transform:rotate(-2deg)}.cheatsheets .sheet .description{background-color:rgba(0,0,0,.5);box-sizing:border-box;color:#fff;display:none;font-size:2.5rem;height:100%;padding-top:30%;position:absolute;text-align:center;top:0;width:100%}.cheatsheets .fluid-button{border:1px solid #000;color:#000;margin:3rem auto 0;max-width:260px}@media(max-width:800px){.cheatsheets .cs-2{margin-top:-40px}}@media(min-width:768px){.cheatsheets .sheet-container{margin:0;min-height:550px}.cheatsheets .cs-1 .description{padding-top:20%}}@media(min-width:1200px){.cheatsheets .sheet-container{margin:0 -80px;min-height:780px}.cheatsheets .sheet img{max-width:550px}.cheatsheets .cs-1 .description{padding-top:30%}}.community{padding:0}.community.centered{text-align:center}.community.centered h2{margin-top:120px}.community .sidebar{background-color:rgba(204,207,233,.1)}.community .next-steps-container{background-color:#fff}.community .banner-text{margin-top:20px}.community .callouts{display:flex;flex-wrap:wrap;margin:20px 0}.community .callouts .callout{display:flex;line-height:1.4rem;margin-bottom:10px;margin-top:20px;width:48%}@media(max-width:800px){.community .callouts .callout{width:90%}}.community .callouts h3{font-size:1rem;margin:0 0 10px;padding:0}.community .callouts .icon{background-position:50%;background-repeat:no-repeat;background-size:auto 3.2rem;display:block;height:5rem;margin:0 20px 20px;min-width:5rem;transition:background-color .2s ease-out;width:5rem}@media screen and (-ms-high-contrast:active){.community .callouts .icon{-ms-high-contrast-adjust:none}}.community .callouts .icon.high-contrast-only{font-size:1.8rem}.community .callouts .icon.img-circle{border-radius:50%}.community .callouts .icon.discord{background-color:#7289da;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJwcmVmaXhfX0xheWVyXzEiIHZpZXdCb3g9IjAgMCAyNDUgMjQwIj48cGF0aCBkPSJNMTA0LjQgMTAzLjljLTUuNyAwLTEwLjIgNS0xMC4yIDExLjFzNC42IDExLjEgMTAuMiAxMS4xYzUuNyAwIDEwLjItNSAxMC4yLTExLjEuMS02LjEtNC41LTExLjEtMTAuMi0xMS4xem0zNi41IDBjLTUuNyAwLTEwLjIgNS0xMC4yIDExLjFzNC42IDExLjEgMTAuMiAxMS4xYzUuNyAwIDEwLjItNSAxMC4yLTExLjFzLTQuNS0xMS4xLTEwLjItMTEuMXoiIGNsYXNzPSJwcmVmaXhfX3N0MCIvPjxwYXRoIGQ9Ik0xODkuNSAyMGgtMTM0QzQ0LjIgMjAgMzUgMjkuMiAzNSA0MC42djEzNS4yYzAgMTEuNCA5LjIgMjAuNiAyMC41IDIwLjZoMTEzLjRsLTUuMy0xOC41IDEyLjggMTEuOSAxMi4xIDExLjIgMjEuNSAxOVY0MC42YzAtMTEuNC05LjItMjAuNi0yMC41LTIwLjZ6bS0zOC42IDEzMC42cy0zLjYtNC4zLTYuNi04LjFjMTMuMS0zLjcgMTguMS0xMS45IDE4LjEtMTEuOS00LjEgMi43LTggNC42LTExLjUgNS45LTUgMi4xLTkuOCAzLjUtMTQuNSA0LjMtOS42IDEuOC0xOC40IDEuMy0yNS45LS4xLTUuNy0xLjEtMTAuNi0yLjctMTQuNy00LjMtMi4zLS45LTQuOC0yLTcuMy0zLjQtLjMtLjItLjYtLjMtLjktLjUtLjItLjEtLjMtLjItLjQtLjMtMS44LTEtMi44LTEuNy0yLjgtMS43czQuOCA4IDE3LjUgMTEuOGMtMyAzLjgtNi43IDguMy02LjcgOC4zLTIyLjEtLjctMzAuNS0xNS4yLTMwLjUtMTUuMiAwLTMyLjIgMTQuNC01OC4zIDE0LjQtNTguMyAxNC40LTEwLjggMjguMS0xMC41IDI4LjEtMTAuNWwxIDEuMmMtMTggNS4yLTI2LjMgMTMuMS0yNi4zIDEzLjFzMi4yLTEuMiA1LjktMi45YzEwLjctNC43IDE5LjItNiAyMi43LTYuMy42LS4xIDEuMS0uMiAxLjctLjIgNi4xLS44IDEzLTEgMjAuMi0uMiA5LjUgMS4xIDE5LjcgMy45IDMwLjEgOS42IDAgMC03LjktNy41LTI0LjktMTIuN2wxLjQtMS42czEzLjctLjMgMjguMSAxMC41YzAgMCAxNC40IDI2LjEgMTQuNCA1OC4zIDAgMC04LjUgMTQuNS0zMC42IDE1LjJ6IiBjbGFzcz0icHJlZml4X19zdDAiLz48L3N2Zz4=)}.community .callouts .icon.stackoverflow{background-color:#5016d9;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0IDU1VjM1LjhoMy41bC0uMSAxNS40aDIzVjM1LjlINDRWNTVIMTR6bTUuNi0xMC4xaDE4djMuOGgtMTh2LTMuOHptLjEtM0wyMCAzOGwxOC4xIDEuNy0uNCAzLjktMTgtMS43em0uOS03LjkgMS4xLTMuOCAxNy41IDQuOS0xLjEgMy44TDIwLjYgMzR6bTMuMy05LjMgMi0zLjQgMTUuNSA5LjQtMi4xIDMuNC0xNS40LTkuNHptNy43LTkuNCAzLjItMi4zIDEwLjYgMTQuOC0zLjIgMi4zLTEwLjYtMTQuOHptMTEuNi01LjdMNDcgOWwzIDE3LjktMy45LjYtMi45LTE3Ljl6Ii8+PC9zdmc+)}.community .callouts .icon.blog{background-color:#d9a216;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjMgMTcuNmMxMS4xIDAgMjAuMSA5IDIwLjEgMjAuMWgtNC4zYzAtNC4yLTEuNi04LjItNC42LTExLjJzLTctNC42LTExLjItNC42di00LjN6bTAtOC42QzQyLjEgOSA1NSAyMS45IDU1IDM3LjhoLTQuM2MwLTMuMy0uNi02LjUtMS45LTkuNS0xLjItMi45LTMtNS41LTUuMi03LjgtMi4yLTIuMi00LjktNC03LjgtNS4yLTMtMS4zLTYuMi0xLjktOS41LTEuOVY5em04LjUgMjAuMmMyIDIgMi45IDQuNSAyLjkgNy4xLTIuOSA0LjMtMi45IDEwLjEtMi45IDEwLjEtMTEuNSAwLTIwLjEgOC42LTIwLjEgOC42bC0uNi0uNi0xLTEgMTIuNy0xMi43aC40YzEuNiAwIDIuOS0xLjMgMi45LTIuOXMtMS4zLTIuOS0yLjktMi45LTIuOSAxLjMtMi45IDIuOXYuNEwxMC43IDUwLjkgOSA0OS4zczguNi04LjYgOC42LTIwLjFjMCAwIDUuNyAwIDEwLjEtMi45IDIuNiAwIDUuMS45IDcuMSAyLjl6Ii8+PC9zdmc+)}.community .callouts .icon.uservoice{background-color:#1a2833;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM0LjkgOUM0NiA5IDU1IDE0LjYgNTUgMjEuNWMwIDQuNC0zLjYgOC4yLTkuMSAxMC40IDEuMiAyLjMgMy4yIDQuNyA1LjMgNy45LTQuMy0xLjUtMTAuNy0yLjktMTQuNC01LjlMMzUgMzRjLTExLjEgMC0yMC4xLTUuNi0yMC4xLTEyLjUtLjItNi45IDguOS0xMi41IDIwLTEyLjV6bTQuOCAyOS43YzAgNS44LTYuOSAxMC41LTE1LjMgMTAuNWgtMS4yYy0zLjEgMi45LTcuNCA1LjgtMTIuMyA1LjggMS4xLTIuMiAzLjUtNC41IDUtNy41LTQuMi0xLjktNi45LTUuMS02LjktOC44IDAtMy43IDIuNy02LjkgNi45LTguOCAzLjYgMy41IDkuOSA1LjggMTcuMSA1LjhsMS44LS4xYzEuNCAxLjEgMyAxLjkgNC45IDIuN3YuNHoiLz48L3N2Zz4=)}.community .callouts .icon.twitter{background-color:#00a0d1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTU2IDE3LjRjLTEuOC44LTMuNyAxLjMtNS43IDEuNSAyLTEuMiAzLjYtMy4xIDQuMy01LjMtMS45IDEuMS00IDEuOS02LjMgMi4zLTEuOC0xLjktNC40LTMuMS03LjItMy4xLTUuNCAwLTkuOCA0LjMtOS44IDkuNyAwIC44LjEgMS41LjMgMi4yLTguMi0uNC0xNS40LTQuMy0yMC4zLTEwLjEtLjggMS40LTEuMyAzLjEtMS4zIDQuOSAwIDMuNCAxLjcgNi4zIDQuNCA4LTEuNi0uMS0zLjEtLjUtNC41LTEuMnYuMWMwIDQuNyAzLjQgOC42IDcuOSA5LjUtLjguMi0xLjcuMy0yLjYuMy0uNiAwLTEuMy0uMS0xLjktLjIgMS4zIDMuOCA0LjkgNi42IDkuMiA2LjctMy40IDIuNi03LjYgNC4xLTEyLjIgNC4xLS44IDAtMS42IDAtMi4zLS4xIDQuNCAyLjcgOS41IDQuMyAxNS4xIDQuMyAxOC4xIDAgMjgtMTQuNyAyOC0yNy41di0xLjNjMS45LTEuMiAzLjYtMi45IDQuOS00Ljh6Ii8+PC9zdmc+)}.community .callouts .icon.definitelytyped{background-color:#0077d2;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAcLElEQVR4nOzdCVxU9d4G8N+ZlWWGdQZwTxKVXMilUssltbLFrKtppJbVrdS0MhfULMUyRTMtvXrtZjfNbrlWLmkuZe6aCqgY7isqIDvMMMxy3vM/UPpamo0w/zPD8+WDv1kOw0MBD2fOmXM05LaE4ampEXOkC2pyDR0i3yQ8f5b9S0KtWu4/LgAAVDKRxNJ95RfXRkv/2Emc9ihR0oy4Fjt3uvugws0vmjAs9UDd4dIFDblGjSr/2P795CkErXc3AAAAcCCKPaV/XSRu7cqukWrSLKlQPoiLW//rzT7ETRQIK45WLaULWhLX3lP+MeY57mYGAAAFEqmX/K84fZ00d5DfqMekQtkWF+tafL0PuUGBJIxMTYl/Wl5G+HxP+bK6E5WdGQAAFEcqkkXHpXmBLjwvFUjSorhHHOOuXUj1x49LGJG6v1UrQnEAAFRX0u//fg2kWYNqfv5fouH703rRHdcudFWBJAxJ/aXuTPk29dq7CcUBAFDdqUjoK62JaL52jHth+h/vvMKftKPiCds4AADgDyZKfZHQLXW55ve9d1VX7Y7L9qoawzEdAAAoE3t5xoPSbE7RoxdeuVHeWP5uZ5JXVcZt4pcPAAAUTiSxuFiaZeQwDWJPYUkl8oKVdyoAAFA8aU3EYJCmjjTt48sLRKi5g3cqAADwGtKKx5On/mQ3XgAAgBsSiTr9CwUCAABuqLcHBQIAAH+XQEKgAQUCAABuQYEAAIBbUCAAAOAWFAgAALgFBQIAAG5BgQAAgFtQIAAA4BYUCAAAuAUFAgAAbkGBAACAW1AgAADgFhQIAAC4BQUCAABuQYEAAIBbUCAAAOAWFAgAALgFBQIAAG5BgQAAgFtQIAAA4BYUCAAAuAUFAgAAbkGBAACAW1AgAADgFhQIAAC4BQUCAABuQYEAAIBbUCAAAOAWFAgAALgFBQIAAG5BgQAAgFtQIAAA4BYUCAAAuAUFAgAAbkGBAACAW1AgAADgFhQIAAC4BQUCAABuQYEAAIBbUCAAAOAWFAgAALgFBQIAAG5BgQAAgFs0vAMoxfzCJ8pq5BCFtw8YoLmTdxrPs9mc48TFRKU/ODeJJiLLgLIMcTbRZcFqdMUSZR8uTrKnEJ3+PvfftvNEJ/xy/l0mzWP5edvtTxKVtXM6xQm8vwrP69690QWDgejFs61GhIbyTgPe5sgnmV9bSogS7vkhOasju0UTp/6Gd6qbhwKp0G1+43eCZxDVTAkJ0a3knYaLlTTwqms/Su+9/t/9Y6+ZMtdBsYgtd+5/efNsq6ViuZwzryyS6FCvzL2lpfKcVPo40Z7PzxVYLEQHG2e2sN0ufZxLvIMOV+0X5Am33x7eS68n6rGyeXMUCPxdu7udmKpKZJeyjh3uzKZhVOBueRoCt7KpWi6M4Jfvr6BA4Jaomgl9aBlRvWZhfaTfo1SPwojNzhQTY2QLbKf4q5fPH2JZ49hAtCh5//k86Z65ObtWXpZ+UA4fvtzMbufxFQAogauNS/6DrXB+kXzd8p71OTZNjrD72NRo1Nu4hbsubAMBjwr5KOBRzQNEQ7bc94r5MlFa2og1sbFEqX6v2WPGEL399v3Z5iyihm+Fx+m+5Z0WgBfHOIeDzcxZ2U3YLMgv+oFNcTF7qlkpsAYCitDcWnO6/xppUk3yl65PaPRg4xpDib5elByTK/0AjUn+ITjzHaKz0wtq27/inRbAU8SnyrctFhUXy9dLNlnkp7pMHcIasqnrp/2OVzasgYBCqY4I6fQr0TN9W64K6ymtqRx6M6hRLtG83CdTan1CFNvYXKrfxzslgKe53nGx7ZOU3SBHfoorf3vhMDadd7te93waFAh4BcM6/RzVRaKXQ+9ZFz6bKHns64ENk4je2tBJNEvXNc1VKmEp75QAniLWFtuyWVyvZBSbWX0vl7Fpa1tW5rkUKBDwSvr+mknSOgq917VbUg1pjWTbgFdCo/cStf+49jC/fmwJURRr8U4J4CnOns532MxempPDZt68ghfk2xu53q66z4oCAZ9wz7B6IwPXEm0ZOiSy4QGikfVaJxnfYPfY2trb8U4H4Gklj1omsXnpx6w72LRa2G71lQ0FAj5pauunpkcPIlrc8+m5tY4TRQ6xR5ZMZPeUjmavQ5HskN4AfJy0Jt6JzZwu+V3lOTRf3lbi2OJsfeuPjgIB37SMhpO05tF72T3roqKINqx/w9VsN5Gxe3Fx4WS2wOWU3ANsOjc6nXyjAnjAUlHeRmhNsI5mM3N09kk2LWus37v/oCgQqBaaHakz3HCOKGXm+7p2ydL1h82DdTp2z6WD2YPZzMst+A+b9hhHKs+kAJ4gLhHT2MyNy2/B5uX78wawaX/r73z/o0CgWomOjohgrzdZ9erwES31RCEpAfU08qp9icXyGJuZP2VHsJn3eoG8EV6U8MsL4BmlX5TKa+aZg8q//4uLS+r99UehQKBaqveoyeSXRLS7f2J2m4VEdWaEW/zuv3qJkpGWvWxeDM2azWbhp8Xd2HR97Tro+bwAnpWfX7iLzWxzrvzCxTKbfcofl0KBQLXW8EBUXsAZos8Ov5TYtPDPlnAdqjhGUbei/7J50VFeKMW7Soo9lxOAD1uy7Us2s17NWc1mYUHxcPmOJdIbDmWiFMfiLq2wvELUt9+cmAPPe/7zq9WqC8JOIv/WOqvqZaIQVcBd2gVEkV8Gz9B1kv5izzBl+o8likmKigp4jSiuft0+xjZEDfwiWwcEeD5vZev6SdNm4SaiWcuffTZWWsN4Pf+L0vQN8lGDl4hvXr2k2Kn80BL5VFhE9JVj/frjdxJtn7a3/rlVXKJXqS+TB2c2T5f+v/8vqmvAAH45+n03d+xB6fMfPXoxvmQgvxyVrXi6Ld/JniL9gUJ4Z/kLE8o3whdSxcEeE6x7UCCKYbGUTXHeTfTLqJMNCwo4hbijYpYf9XMZ3V5x/VzFHCS9r6KLVH7U3Jm0lajO/PAD/t2Inn++46Fa0i/SIa92za+zm8g8JyiofCO1dxmS8+CDdUdIhbDi2OD8fKKve+6UvuDry5ydn1+6SJqUn1TK6/9bFbL0KNM6e8oXu/LMkTbhvFAsFXpKypmkwnieSSrZKKk4HuEdwh2OrY678RQW3KJzL+Y0t64jmqha8czxKUQ13hhyefNmou7h03smSwWyIn3vo1kdiOw9nE+Kb/BOe/MmH++zPkZa4wqfZfhAN4l3GgBlQoFApXI2cr3D9lpanZvsn7WKqGfszNDkt4jazpyQuHsZ0YlPs2LZiaWU7rZRpuP+AUTz+78c02QZ7zQAyoQCAY/YF31qasF8otjZI6dt70o0dsyS6cekv+xtXziecLl4p7u+HsEtiyIiiB6zthgUMZh3GgBlQYGAR9lTnV+7xhNNnrIy+WRrolZJ4y7u3EmU+WNBQdki3umub3RCd3P9x3inAFAWFAhwlZZ2PoadKafL6cnv/9Ke7WVz6RWLAjcq3lu3YUrICKInYlpNiXyVdxoAZUCBgCKkvXg+ozidqHXx25t2tiQ6uSor07qAd6qrDKfeVIdo9o8D9sT2ItIcVTdT9eYdCoAvFAgoSlEraxuHtCbSu9uszNS3iAp3WveWnxtaGWrVDv2HfgpRj34t+5tP8E4DwBcKBBRpn658o3sv8eNxqSFE4iGKZa98VYq+e+99qeY/eKcA4AsFAoq24d6DpsvLieZ9tWnWudq801zx4LpmI8IXEoXdZ/heG8c7DQAfKBDwCu8MW778eClRaYJ9rGsT7zREgQ/o71ffRvRSWafDtX3wFegANwMFAl4h21xYVGYnGjJ3wYJf5/JOc8XL47o0rfOm9IM0QpghLOWdBsCzUCDgVeYXbb7//EtEabHnfyjexTsNUXR382V2fpGmL9X50MDhIJgAPKFAwCt9tnHL3Ixfeae4ov3IRrmhG3mnAPAsFAh4pcV373zzEnudyE/SmwK0OxzTOuRe3ikAPAsFAl4p40LeJ6VjiFbW2R+c3ZF3GqKWc+q/G4RT30I1gwIBrzbn8sYNZ6fzTkHUaGvUmcBtREFB/n6arbzTAHgGCgS82qZLaYdzuxDljSvZ4Ijkl0OYKAiUSHTfy40OhKbyywHgSSgQ8GqOJ51O1xKiX9qf7FxwB+80RO2CY8aGPME7BYBnoEDAJ6Q0PJNfdJh3CqKWrW67LWg/7xQAnoECAZ9wODFjafF9vFMQNRtSZ77hA94pADwDBQI+4YQ561+WZ3inIKp1POyi3yoi3XeaeFUG7zQAVQsFAj7h7PicyNLZvFMQCQIto95E5kFGo24h7zQAVQsFAj4hc1DBOdtY6cJ4WkJpvNMQhVkMn2jDeacAqFooEPAJtkX2u1wuory4kkfsMbzTEBl6+iWrR/JOAVC1UCDgU3KfLi62K+AMhoFf6fXqi7xTAFQtFAj4lOJHbGOcTt4piDSZarXQjXcKgKqFAgGfYrc7vxJ78k4h/WCphD5CIu8UAFULBQI+RatVxwvLeacgEkWxlxI25gNUJRQI+BT/53TH1H14pyByDHXWFNfyTgFQtVAg4FPCnYYE7Ru8UxCV6uwnndt5pwCoWigQ8Ak6neaiahlRWGPDKG0+7zRERXVLf3K+zjsFQNXS8A4AUBkisoOW6voSCUEURp14pyEqrGPVOu7inQKgamENBHxC3c9M9f07805xRXZE0YyyCN4pAKoWCgR8wu2PR6zyV8CJnEpG2EY7NxIVdbO2cNzNOw1A1UKBgE9o8lStWMMB3imI0iZkrC/GU1dQTaBAwCfcqa13wfgQ7xREqRfP7Csq5J0CwDNQIODVNBrVRKEJ0V0No6ODFfCLe+/dp+oWKqDIADwBBQJe7f7EJneENyYKW2gwaqN5pyHakp4+L68m7xQAnoECAa82eHGX3DpTeKcgys0pecl+kuhI3sXUkhLeaQA8AwUCXilqaPAM/TGiHimtH45owjsNUfKXp7sWtSUSY8U0cQLvNACegQIBr9RnVxtjVBf5FLI/0/280xDtaXby2YLavFMAeBYKBLzSgBodNtX6D+8UV2w9nb4C2z6gusGhTMCrxDdv+2KNHKI7Z9drYPyQdxoi6157A9fbRDvOHYvJWyzfFE5bOYcC8BCsgYBXCF4f0FobTzRP/eLoJnOkG+pIbwqwNG33c5caExWMt4Q7UBxQzaBAwCuMbfB4v2gtkXG/3271Nt5piMQPqBZNJ/ro5XW3n6nPOw0AHygQULS41+t+FtSd6M1hD4fW+5h3miv2dTrVpfA80f6y098XFvFOA8AHCgQUKfrbiMcDVhN9P3LUIy13EWm+VasFBZxp8Ddf19iZePE93ikA+EKBgKIIiYIgTCBaOHDg0WbSd2fNWiEb9S15p7rCeZ/rbVGU8n23bcCF3bzTAPCFvbBAEUzvG2N13xIten9QdLOVRPcWNYwPMfNO9UeT569adSqJKLtxYdOyFrzTAPCFNRDgyt9ft109kWjV5uFCy+NEDxU1jzcpsDgubszfbislSmy6fMVxBa0RAfCENRDg4oG1zYpMA4nmOV4YccdSovqPmV/1b8071fVNN35f47STyOFwvcOewgIAFAh4iF9/7TPqPkRTVvbpHJNK9NobDx2v9yyRkC40JQUXR0ZG3gpbG6LZ5g2rzi7nnQZAWVAgUCXCLIYHtB2I+i5o16TmAKkw3npoWN3dRA3yIx8JqCcv0pQS+Wa8kZJ023HnaaInJn/YI/k8kW2hfYXrEO9UAMqCAoFKUaNLSDu9nujVTg8crXuCaEjyg+PrHiUKHuh/WsMO8THQuw7wMbvveuGslHvv/lPPFcznnQZAmVAg8KdUM1XLhKVEpn5GI9s7ql6Iyeq3mqjR1KjTgWuIWsy+7T7jeKK2y2L8QusStdp827tBdYh0YzSDhfLdW2dy/hLc8svIk1MKHyR6f/DKlidnSTf8U3o/zTkUgEKhQBSikaNGjcDTRCk93te26+25zyv8XP5Ekl83XRzbRhG037+eJk8qjtmGPdo3pG+Q19XNhU+v+oAx0nsbeab/ftsF6b2t5zJXhQvBedtsXxA9kDjl5C9riQr/aT3k2Mg7FYCyoUAUwu+U9jvVu0RxVJeMfCLk0fd8PjFP1gVlZa5/EPXrMXfKwZVEBcMsIY4I3qkAvAMKBKolewNnQ7EnUbdaU5/dt45oy5b0kNw1vFMBeBe8kBCqFdsXjidcLqJnT83devCgXBzpud/wTgXgnbAGAtVCyR7bfucBooePTVu1r5RoqyvdkDeLdyoA74YCAZ929oOcIaULifp+O2fRgVyibduPxOfF8k4F4BtQIOCTttyfvjzvNWmNY8/UUfuMRBZLWb6zA+9UAL4FBQI+oeCQNc6xhWjagdWpp7sQzYxf1/h0vlQcm8vGOhVwBkMAX4QCAa92+HBGRskIol6HPy5MsRP92jejX/HqijtRHABVCgUCXuXYpEuXLJ9Laxo91+SeHkr02ZGfT5xfTuTs47oXR8kF8CwUCChacbGtjXMj0djHFw869h+iWR3X288slO6Ipc1Uo2IhFAcAFygQUAT7SedX4gdEWwOOHMkzEP0vYEebixeJFu/Y1fvSJqlIfird4HhbWvAn6X0z57AAIEOBABeXzUXz7Q2IFozeGp+xQVqz2LR+99nTRGfWXr5s7S4vcpzqVyzcjltMALgBFAhUKpdLXEzjiU48nhltkb67UvzPNC5aT7Rnzwm/gjSiHQXHvs1bS7T3sVNbC/sTlY1w/OQ6WvHB3blGB4C/CQUCN+TcKFWCSJQ1vnBYWTLRyalZr1oXSAWxMquDRVpDOLjpXFBxEtH+GacDC1sS7dp1vCB/GJFlja2d01nxIHdf86D50vuXVH5UXwDwWgJRQkJqKvZfibRrv3HWIFLvKapbLJ+61NnY9TbvVJ7jqimeFT+Uvuppru1ibakAjtoWsf8eJaG2/c5AaYGldFh6g2rGvDnonE5HpNWqm6s8eJqBa2V3KmxSFklktzu3uabzywH/HwrkD8SO1JHN3PR8LZvWfdYv+CYCAFAiPIX1B8LP9DOb4UtCdrBptfptYLPg06JgNh1fOa59SgYAoBrC4dyvr3f53j/+z/k9y2bkENPtbAZMDUjiGQsAQBlQIDdN6CM0ZTPs42D5bN+mo2HyKU+132ia88wFAMAHCsRtfp31/dmMHGrOZtPwQWAA30QAAJ6EAqk0ITOD5G0kZlP4JTZ1HXU4YREA+DAUSKXT++lasGnuF34nm0FG4wfyHROEpzjGAgCoZCiQKiMkkrzffFCwQd5vPWJM+GNs6lvo+/LMBQBQOVAgHqO7XTuaTXN22I9shmQEGfkmAgC4FSgQbgz3BBrYjJxrzmLTr79fP76JAAD+DhQId9pJmjg2TT+FbmIz9KOQZDaF3kITnrkAAG4Mr0RXnMBp/o+wqd+ii2azYEJRCJtWa2mpvMBScSm3cAAAv0OBKJamg3ovm+E/yv1BVkvpPjZzhfzNbIqi2IlPMgAABk9heQ3/AL9WbEZ1jpCPihu4JuAtvokAoHpDgXgd9RHVu2yGvhL8GZvmp8LD5duXqyfyzAUA1Q0KxOvpd7LzNRBFfGmSp+FM4FQ2hfPCTp65AMDXoUB8hnqP6iM2Q+4NmsGm+Xj4AjZVE1WdeeYCAF+FAvFZun7a79iMioqYwKbRYDjAprBUmMAvFQD4DhSIz1NNFPqwGRxifIjNyKbmNDY172mwDx4A3AIUSLWjeUC9jc2IbNMkNoNeNK5lU7VLtYxnLgDwNvgbtNpSLRfkE2MFkXxEFQqI8WvI5uX38raz6RjncHALBwBeAGsgUEETpznKZmSkeTabwf8MOsSmapkqkWcuAFAqgSghITVVFHkHAaVyucQObObMzT3Cpq1HWQrfRACgDFgDgb+gUglb2DR9Ed6ezdANwefZVKvVy3nmAgDeUCBwk4RdJG9kD3w+4C42I+aYBrOpn6zfwTMXAPCCAgE3qd9Vyd895n+F9WQzLD2kSL69GdZMAKoHFAhUkoCu/vJeXFHNI+TDzfsn+U/hmwgAqhYKBCqZ8DP9zGZ4fIj8Asbw8FD5ePSaUZrbOMYCgEqHAoGq0k56k/j7+/mzGTnWJJ8QKzAwYDfPWABQWVAg4CFCU0FgMzQ0+Ak2Taaw5mxqNdr3eOYCAHehQIATPz99NpuRUaZ/sWlca5jGNxEA/D0oEFCI4JeMH7JpHlx+gizdaN1evokA4MZQIKAw+pUVJ8h6PNzKZtCHxvKDdU3AYegBlAUFAkrVW3ojViAGI5sRK8OfYVPfT/8dz1gA8BsUCHgJXZa2I5vmzWED2QwJCf5BvqOT9AYAHKBAwEsZDAED2IyaaJYPBeo3x28l10AA1Q4KBLyc5pnyw9Cb3g99hc2w0FD5PCdCoqo3z1wAvg8FAj4mINAvic3IOSaTfH21/yr5jqeEpzjGAvBBOCMh+CiNVv0Nm2ED5SOpkH+4TS6SXCFPfkGjKOIsOAC3BmsgUE34r9bLBRI1NGIzm4EBAeUnxrpDegMAN6BAoJpRr1A9zWZoWPDDbJpfNcXKt6erJ/LMBeB9UCBQzekna+UTYkWsMsm7CRsCAwPZFAThPM9cAMqHAgGQqT8qXzMJCQ0KYtNsCpe3oagmqjrzzAWgSPJOKSgQgD+l02vfZ7NGl/ITZBnHG/LYFJYKS3nmAlAC1THhqCMSBQJwQ0IfoSmbwfON8sb2yKHmLDa132ia88wFwJO6g3rRyS2sQEQSS6284wB4B41GLZ+/JMJmms1m8A/lB3tUZah28cwF4EliK9Hw6aflBULrRvOOA+BdhBGCfMpe44sVB3vsb9rHplaLE2SB79MladXrzrECcZI49VH5NlHsyTcUgLfSHK1YM5lTvjdXyPqgAjZVv6qW8cwFUJnUtdU/7S4i+s9bHV8+uFi4ckfCqNTkn9k54gRSdTBxywfgU1wdxA5s5vyaJx/3wZZs+5JvIgA3sL2u0ogCuvjXv+esVCDGDgf2PHL1RnSRxEkJFZfG88kI4GtUW4QtbJo6hsWxGRoSHMym+j71bp65AP4O9QRVnSXjfyuO3269qkCSpsW1XP8ZydtEpu/jkBDAhwnLaAabgYaAADYjV5keZ9NPr9fxzAVwI8J81fNlbYn09+j+PeLza+/9s914d5B+FNuvRFoj+bJllecDqJZUzVTyT5/JHCafAz4sNETeXVj9tFrNMxcAIzwq6DKfIdIZNC3apUhrHvM6djhn/MNS13+AhPjUJRr2Wtza1PDz1cTKRuj7adUFBgDp77bx5U8g53XNf5BNS31rNN9EUJ38tsah1ZcXx3+Fzt/vK73e0jd4IWHSV3G9HU8SOeI17/XbKd3gIvFFtl+JtGaSsb7ygwMAOxEWJbIZpg6R/7wLHxj2MpvaXzTteeYCH1WxcVydpn5zSS8i/wT94gYb/qo4fnODNZDrSfhHaoqmq3ShAQmjX5BvEhO6y48lGAx///EA4K+JoigfNTj/jUL5BYslIy0WvonAm/22O65+nH7ta9uu3Th+s9wokGslDE3dqp8sXdBTQPs4+THVT54iee2mY1+SN8rftkK+XQh8/tY/HwAQWS2l8s72OV3yG8s3LBVxjC74/cyb5ceqkg858sXJrdKv4aZi10+lP0F0M7V71z312+s4bvWT/V8AAAD//9ud87xmEBwjAAAAAElFTkSuQmCC)}.community .callouts .icon.bug{background-color:#4d4d4d;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzlFQkFERkU4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzlFQkFERkQ4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJFOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJGOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Kk5lQwAABYxJREFUeNrkm29oVXUYx3+7bM3V1FnbqlltrtXWtYRa1nqxooY5E7EhKWGuaTDBagol9SIMDCKICASj+cISw/DPi16ZBakrUBnoC7nNoTMWy6I1c+LmVq6t78N9jpyu555znt855+536IHPi939/jzP95zznN+/kzc1NaUitirwJJgPasF94DZQDG7hMqNgBFwEZ5kU+AH0R+lcXgQCJMBT4EXwLKgM2N7P4FvwJegCk6YKUA5eB23grogu2C/gc7AN/GGKABTsZtAOZqjc2DjYAT5kUfSNBNCkAGwGo1PTZ6PsQ4FuHLp3QD3YDR5QZtgZsAac1ElYokcGbATHDApesS/kUwf7GEkOKAK7wAvKbNsPXgZjYQowG3wNnlDxsONgCbgchgAU/GHwiIqXUT5o8hLBKwfcDA7FMHgrUR/iGLQEoGTyBWhQ8bUGjiFPR4A3QIuKv7VwLKIcQMnue5Dv0fjT/IwtAM3g+RyMBmkU+BXf3qc5Rx3xqDPBE7LjfkaCheCcj1HYKYe6JeBt8GcEo75L3HaJQ7+nfNQ/x7H9p67TFX4L1Pi4EocdfhsGH4BPwVbwqu0xGwI/8vT2N/77Gv+vAJSCO3n6PJ//Vjz72w62cPtORnfAwx7+1nBsW93ugGow7vOKtPkYa9eDl0Clxji9kuvW+yjb5tPncY7xet3MhjoFt2RzgIlU2DQL/O6017W/Be4BawXJqMCgTH+ToOxajvWG1+AmYVBlBglQKrxwmzIFoB9XCzt91CABpL6sti62JcBiXtKS2GMGCSD1pZxjvi7AKmED9PraYJAAG2yvVL+2yi7AImHl90C3QQJ03/B+97ZF1lCYVlN6BBV/BffykNQkoyF4H5grqJOkO6BR2NF2A4O35gifCOs0JjTW9vYaPPPbJ11LJAFqBRVoDf68wQLQI3BBUL424XPiY1lvDOb/ZwRla0iAOYIKv8dAgEFB2VtJgJmCChMxEEAyHigmAQoFFWbFQIDZgrKF0p2hmTEQQOQjCTAmKD8vBgJUCcqOkQBXBBXosEORwcEXKdmBjCskwICgQr5h0+BMW6i8V7LtNkAC9As7WWqwAM8Jy/cnhBMhspVKvq2eC0uwbxLrSWhMa+dpdJQLW6mRpLtpOlyuMcL7CTwErhoSPG2ApjQEuD3BQ0fp0ZJqlT6pZYpt0wieYh60nuWDGp2+At4xIPgt7IvU0jHzBkFdgD27HWDGNGyGFHHfulaXuTN0IkBjZ8EykJeDwKmPFtAXwN8TTltjrVkKfwcawXJW3G3v8DTYCKoiCLwGvAl6QthpbnU6J5jP2f1uh1Wgxbbxwv0qvT/vtZRGA6wuzs50+Pkb8JdgQtPMq1VJld7bnxtSzhjgJD5hzwEW611OZK6xlSvzeYbAsl3Cx4PK7ozodOl6t93hfJByqbzOVnYh+MdHhxfBLI1bnuoMhRx8imPMKgDR5LG/nrSVfddHpx8HeO4/ClmApsw+snXsdk7gYMat+r5Hp0sDCLAkxOA7nfrI1nGxx2tmQUb5x8FuzgvD4Dw4wNm2MIAA1SEF38cx+RaAeBCMZGlwb44GOyUhBD/CsTj24TatpddXq3L+RIVmXnE4QzjJMaSylvBxFdqzKHsVrDD8Dmj36sOvIx0unewHDRENg4MI0BH2FyP0RcZOlzW3Ib7VLvPqDK0z1PEq7bDmLVwCLgnr0AhvnUp/0eJp0k9m6HO4fUp2nGZODgUY5PzUJVlHkxg1TEfnjxqY8I6yb12SSjqLm7T9/Ax4TaW/+JxuIx862KcL4toBk1QFT1omXZLRHQHaL3Npl/r8jH3QjiGsbJ3kGd/fDo6WBWi31KG9a9xXMgzfw35tVfCR9l52dk8Ibe7htnq57YowfY7i4+lYWUL9z+1fAQYACqstE4NCc18AAAAASUVORK5CYII=)}.community .community-callout-headline{margin-top:0}.community h3.centered-highlight{background-color:rgba(204,207,233,.1);padding:20px;text-align:center}.community .upcoming-event{min-width:330px}.community .upcoming-event img{width:50px}.community .upcoming-event .event-info{position:relative}.community .upcoming-event .meetup-text{max-height:300px;overflow-y:auto;padding-bottom:20px}.community .upcoming-event .meetup-gradient{background:var(--raised-background-color);background:var(--fade-gradient);height:30px;position:absolute;top:290px;width:100%}.community .events>h4{padding-left:20px}.row,.split-row{display:flex;flex-direction:row;flex-wrap:wrap}.split-row{align-items:center;justify-content:center}.split-row .first{margin-left:0}.col1{flex:1 1;min-width:250px;padding:1rem}.col2{flex:2 1}.col1.first{margin-left:20px}.col1.last{margin-right:0}@media(max-width:800px){.container>.row{flex-direction:column}}.version-bar{background-color:#262626;color:#fff;margin:0;padding:.7rem 2rem;text-align:center}.version-bar p{margin:0}.version-bar p a{color:#719af4}.grey-box{background-color:#d8d8d8;box-sizing:border-box;margin-right:20px;padding:18px}.grey-box a{color:#000}.clicky-grey-button.first,.grey-box.first{margin-left:20px}.clicky-grey-button.last,.grey-box.last{margin-right:0}.split-row>.clicky-grey-button{flex:1 1}@media(max-width:800px){main #index-2 h2{font-size:1.8rem;padding-left:20px;padding-right:20px}main #index-2 div.headline-diagram{height:400px;max-width:100%;overflow-x:hidden}main #index-2 .split-row>a{margin-left:20px!important;min-width:80%}main #index-2 .grey-box{margin-right:0}main #index-2 .illustration{display:none}main #index-2 ul.dropdown{margin-top:12px}main #index-2 .headline-diagram div.editor.front{margin:20px auto;position:static}main #index-2 .headline-diagram .text{overflow-x:scroll}main #index-2 #m-stories{flex-direction:column}main #index-2 #m-stories div.illustration{display:flex;justify-content:center;order:1}main #index-2 #m-stories div.illustration div.bg{visibility:hidden}main #index-2 #m-stories div.illustration div.fg{position:static;text-align:center}main #index-2 #m-stories div.copy{margin:20px auto 0;order:2;position:static;text-align:center}main #index-2 #m-stories div.copy a.migration-button{margin:0 auto}main #index-2 .small_full_width{width:100%}main #index-2 .github-bar{display:none}main #index-2 .get-started-section{flex-direction:column}main #index-2 .get-started-section a.get-started{background-image:none!important;height:auto!important;margin:0 auto}main #index-2 img{max-width:100%}main #index-2 h3{text-align:center}}@media(max-width:900px){.tag-container .twoslash-annotation.left{bottom:0;left:0;position:static;top:auto!important}.tag-container .twoslash-annotation.left svg{transform:rotate(44deg) scaleX(-1) translateX(-20px)!important}.tag-container .twoslash-annotation.right{display:none}}.show-only-small{display:none}@media(max-width:480px){.show-only-small{display:block!important}#index div.headline-diagram div.editor.front{max-width:300px}}#index-2 h1{font-size:2.5rem;font-weight:200;line-height:2.8rem;margin-top:0;padding-right:40px}#index-2 h1 strong{font-weight:600}#index-2 h2{font-size:2.5rem;font-weight:500;line-height:2.5rem;margin-top:0;text-align:center}#index-2 h3{font-size:1.6rem;font-weight:400;line-height:1.6rem;margin-bottom:2.5rem;margin-top:0}#index-2 p{font-size:1.2rem}#index-2 .col1{min-width:230px}@media(max-width:360px){#index-2 .col1{max-width:calc(100% - 2rem)}}#index-2 .darkblue{background-color:#00273f;color:#fff}#index-2 .blue{background-color:#3178c6;color:#fff}#index-2 .purple{background-color:#4e086f;color:#fff}#index-2 .dark-green{background-color:#086e12;color:#fff}#index-2 .white{background-color:#fff;color:#000}#index-2 .white .col1 h3{text-align:center}#index-2 .white .col1>p,#index-2 .white .col2>p{font-size:1.2rem}#index-2 .light-grey{background-color:#faf9f8;color:#000}#index-2 .grey{background-color:#d8d8d8;padding-bottom:0}#index-2 .grey div.container{padding:1rem}#index-2 .headline{min-height:420px}#index-2 .headline .col1{padding-bottom:3rem}#index-2 .headline p{padding-right:20px}#index-2 .headline .container{font-size:1rem;padding-bottom:0}#index-2 .container{max-width:1080px;padding-bottom:40px;padding-top:64px}#index-2 .container,#index-2 .container .half{display:flex;flex-direction:column;margin:0 auto;position:relative}#index-2 .container .half{max-width:780px}@media(max-width:360px){#index-2 .container .half{max-width:100%}}#index-2 .headline-diagram{display:relative}@media screen and (-ms-high-contrast:active){#index-2 .headline-diagram{border:2px solid #fff}}#index-2 .headline-diagram pre .code-container{overflow:hidden}#index-2 .headline-diagram pre .code-container a{display:none}#index-2 .headline-diagram .editor{border:2px solid #7fa2c9;border-radius:4px;width:540px}#index-2 .headline-diagram .editor ul.editor-tabs{display:flex;flex-direction:row;font-size:14px;margin:0;padding:0}#index-2 .headline-diagram .editor ul.editor-tabs li{list-style:none;padding:10px}#index-2 .headline-diagram .editor ul.editor-tabs li a{color:#fff;text-decoration:none}#index-2 .headline-diagram .editor ul.editor-tabs li.selected{text-decoration:underline}#index-2 .headline-diagram .editor .min-dark{display:none}#index-2 .headline-diagram .editor.front{border-radius:8px;width:96%}@media screen and (-ms-high-contrast:active){#index-2 .headline-diagram .editor.front{border:none}}#index-2 .headline-diagram .editor .error{border-left:0!important}#index-2 .headline-diagram .editor .editor-inner{position:relative}#index-2 .headline-diagram .editor .titlebar{border-bottom:2px solid #172e38;display:flex;flex-direction:row;height:2rem}#index-2 .headline-diagram .editor .titlebar .lang{display:none;margin-left:6px;margin-top:3px}#index-2 .headline-diagram .editor .titlebar .window-name{display:none;margin-left:10px;padding-top:5px}#index-2 .headline-diagram .editor .line-error{background-color:#c63131;height:20px;left:0;position:absolute;width:22px}#index-2 .headline-diagram .editor .underline-error{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'%3E%3Cg fill='%23c94824'%3E%3Cpolygon points='5.5 0 2.5 3 1.1 3 4.1 0'/%3E%3Cpolygon points='4 0 6 2 6 .6 5.4 0'/%3E%3Cpolygon points='0 2 1 3 2.4 3 0 .6'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 100%;padding-bottom:3px}#index-2 .headline-diagram .editor .error-message{color:#444d80;font-family:var(--code-font);font-size:.8rem}#index-2 .headline-diagram .editor .error-behind{opacity:0}#index-2 .headline-diagram .editor .inline-completions{position:relative}#index-2 .headline-diagram .editor .inline-completions ul.dropdown{background-color:#fff;border-left:4px solid #4b9edd;color:gray;display:inline-block;font-family:var(--code-font);font-size:.8rem;margin:0;padding:0;position:absolute;width:240px}#index-2 .headline-diagram .editor .inline-completions ul.dropdown:before{background-color:#fff;content:" ";left:-3px;position:absolute;top:-16px;width:2px}#index-2 .headline-diagram .editor .inline-completions ul.dropdown li{border-bottom:1px solid #000;height:1rem;overflow-x:hidden;padding-left:4px}#index-2 .headline-diagram .editor .inline-completions ul.dropdown li span.result-found{color:#4b9edd}#index-2 .headline-diagram .editor .inline-completions ul.dropdown li span.result{color:#000;display:inline-block;width:100px}#index-2 .headline-diagram .editor .did-you-mean,#index-2 .headline-diagram .editor .did-you-mean-icon{position:absolute}#index-2 .headline-diagram .editor .content{display:flex;flex-direction:row}#index-2 .headline-diagram .editor .content svg{margin:12px auto}#index-2 .headline-diagram .editor .content svg path{fill:#fff}#index-2 .headline-diagram .editor .content .text{background-color:#235a97;border-radius:0 0 6px 6px;border-top:1px solid #7fa2c9;flex-grow:1;flex-shrink:1;font-family:var(--code-font);font-size:.8rem;height:260px;line-height:.95rem;overflow-x:auto;position:relative}#index-2 .headline-diagram .editor .content .text pre{background-color:#235a97;border:none;margin:0}#index-2 .headline-diagram .editor .content .text pre code{font-size:14px;line-height:16px}#index-2 .headline-diagram .editor .content .text pre .error{background-color:rgba(255,0,0,.149);color:#ffc5c5}#index-2 .headline-diagram .editor .content .text .language-id{display:none}#index-2 .headline-diagram .editor .highlight{color:#9ed5ff}#index-2 .headline-diagram .back .content .text>div{padding-right:200px}#index-2 .next-headline-button{align-items:center;background-color:#fff;bottom:20px;color:#000;cursor:pointer;display:flex;flex-direction:row;height:30px;justify-content:center;margin-bottom:20px;padding:3px;position:absolute;right:15px;text-decoration:none;width:30px}@media screen and (-ms-high-contrast:active){#index-2 .next-headline-button{border:2px solid gray}}#index-2 .next-headline-button.focus,#index-2 .next-headline-button:hover{background-color:#eee}#index-2 .next-headline-button:active{background-color:#ddd}#index-2 .next-headline-button .fluid-button-title{font-weight:600}#index-2 .next-headline-button svg path{fill:#000}@media screen and (-ms-high-contrast:active){#index-2 .next-headline-button svg path{fill:#ff0}}#index-2 a.get-started{align-items:flex-end;background-color:#fff;box-shadow:0 4px 20px -6px rgba(0,0,0,.25);box-sizing:border-box;color:#000;cursor:pointer;display:flex;margin:0 auto;max-width:244px;padding:1rem;text-decoration:none;width:100%}@media screen and (-ms-high-contrast:active){#index-2 a.get-started{border:2px solid gray}}#index-2 a.get-started.focus,#index-2 a.get-started:hover{background-color:#eee}#index-2 a.get-started:active{background-color:#ddd}#index-2 a.get-started .fluid-button-title{font-weight:600}#index-2 a.get-started.short{background:#3178c6;background-position-y:bottom -180px;color:#fff;height:260px;outline:1px solid #fff}#index-2 a.get-started.short.handbook{background-image:url(/images/index/get-started-handbook-blue.svg)}#index-2 a.get-started.short.playground{background-image:url(/images/index/get-started-playground-blue.svg)}#index-2 a.get-started.short.download{background-image:url(/images/index/get-started-download-blue.svg);background-position:100% 100%;background-repeat:no-repeat}#index-2 a.get-started.short svg path{stroke:#fff}#index-2 a.get-started.short:active{background-color:#156fb4}#index-2 a.get-started.short:focus-visible,#index-2 a.get-started.short:hover{box-shadow:0 4px 20px -2px rgba(0,0,0,.25);outline-width:2px}#index-2 a.get-started.tall{background:#fff;color:#000;height:342px;margin-bottom:2px;outline:1px solid #000}#index-2 a.get-started.tall:focus-visible,#index-2 a.get-started.tall:hover{box-shadow:0 4px 20px -2px rgba(0,0,0,.25);color:#3178c6;margin-bottom:0;outline-color:#3178c6;outline-width:2px}#index-2 a.get-started.tall:focus-visible svg path,#index-2 a.get-started.tall:hover svg path{stroke:#3178c6}#index-2 a.get-started.tall:active{background-color:#eee}#index-2 a.get-started .fluid-button-title{font-size:1.4rem}#index-2 a.get-started svg{margin-bottom:10px;margin-left:20px}#index-2 a.get-started:active{box-shadow:0 4px 10px 0 rgba(0,0,0,.25)}#index-2 a.get-started.handbook{background-image:url(/images/index/get-started-handbook.svg);background-position:0 100%;background-repeat:no-repeat}#index-2 a.get-started.playground{background-image:url(/images/index/get-started-playground.svg);background-position:bottom;background-repeat:no-repeat}#index-2 a.get-started.download{background-image:url(/images/index/get-started-download.svg);background-position:100% 100%;background-repeat:no-repeat}#index-2 .call-to-action{display:flex;justify-content:center;position:relative}#index-2 .call-to-action a.flat-button{background-color:#fff;color:#000;cursor:pointer;display:block;font-size:1.2rem;height:1.4rem;line-height:1.4rem;padding:1rem;text-align:center;text-decoration:none}@media screen and (-ms-high-contrast:active){#index-2 .call-to-action a.flat-button{border:2px solid gray}}#index-2 .call-to-action a.flat-button.focus,#index-2 .call-to-action a.flat-button:hover{background-color:#eee}#index-2 .call-to-action a.flat-button:active{background-color:#ddd}#index-2 .call-to-action a.flat-button .fluid-button-title{font-weight:600}#index-2 .call-to-action a.flat-button:first-child{margin-right:2rem}#index-2 .call-to-action .handbook-preview{background-color:#1a1a1a;padding:4rem}#index-2 .call-to-action .inline-buttons{background-color:#1a1a1a;display:flex;justify-content:center}#index-2 .call-to-action .inline-buttons a{background-color:#1a1a1a;border-left:4px solid #00273f;color:#fff;flex:1 1;margin:0!important}#index-2 .call-to-action .inline-buttons a:first-child{border-left:none}#index-2 .call-to-action .inline-buttons a:active,#index-2 .call-to-action .inline-buttons a:hover{color:#000}#index-2 .cta-redirects{overflow-y:hidden}#index-2 .cta-redirects>div{margin-bottom:-18%;position:relative}#index-2 .cta-redirects>div a{bottom:55%;position:absolute}#index-2 .release-info{display:flex;flex-direction:row;position:relative;width:100%}#index-2 .release-info .needle,#index-2 .release-info .needle-head{background-color:#000;height:68px;margin-top:-8px;position:absolute;width:2px}#index-2 .release-info .needle-head{background-color:transparent;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #000;height:0;margin-left:-4px;margin-top:-14px}#index-2 .release-info>div>div{display:flex;flex-direction:row}#index-2 .bar{height:50px;margin-left:-1px;width:100%}#index-2 .separator{background-color:#000;height:12px;margin-top:50px;width:1px}@media screen and (-ms-high-contrast:active){#index-2 .needle-head{opacity:0}#index-2 .release-info .needle{border:1px solid #000;height:80px}#index-2 .beta>div,#index-2 .rc>div,#index-2 .release>div,#index-2 form.search:focus{border:1px solid #000}}#index-2 .release{width:55%}#index-2 .release .bar{background-color:#c4c4c4}#index-2 .beta{width:28%}#index-2 .beta .bar{background-color:#3178c6}#index-2 .rc{width:17%}#index-2 .rc .bar{background-color:#235a97}#index-2 .migrations{overflow:hidden}#index-2 .migrations.github #migration_title{color:#fff}#index-2 .migrations strong{color:#187abf}#index-2 .migrations .container{padding-bottom:0}#index-2 #m-stories{min-height:370px;position:relative}#index-2 #m-stories .controls a{align-items:center;background-color:#c4c4c4;color:#000;display:flex;height:2rem;justify-content:center;line-height:2.5rem;position:absolute;text-align:center;top:70%;width:2rem;z-index:2}#index-2 #m-stories .controls a:hover{background-color:#eee}#index-2 #m-stories .controls a:active{background-color:#ddd;top:calc(70% + 1px)}#index-2 #m-stories .controls a.left{left:0}#index-2 #m-stories .controls a.right{right:0}#index-2 #m-stories .copy{background:#faf9f8;background:linear-gradient(90deg,#faf9f8 48%,hsla(30,17%,98%,.125))}#index-2 #m-stories .copy p{font-size:1rem}#index-2 #m-stories .airbnb .fg,#index-2 #m-stories .goog .illustration .fg{padding-top:40px}#index-2 #m-stories .copy{padding-left:20px;padding-right:30px;position:absolute;transition:opacity .2s ease-out;width:260px}#index-2 #m-stories .copy p{padding:1rem 0}#index-2 #m-stories .copy a.migration-button{border:1px solid #000;color:#000;display:block;padding:8px 0;text-align:center;text-decoration:none;width:60%}#index-2 #m-stories .copy a.migration-button:focus,#index-2 #m-stories .copy a.migration-button:hover{background-color:#fff;color:#000}#index-2 #m-stories .illustration .bg{position:absolute;right:20px}#index-2 #m-stories .illustration .fg{font-size:1.4rem;line-height:1.6rem;position:absolute;right:70px;width:370px}#index-2 .oss{width:100%}#index-2 .oss .icons{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;margin:0 auto;max-width:800px}@media screen and (-ms-high-contrast:black-on-white){#index-2 .oss .icons svg path{fill:#000}}@media screen and (-ms-high-contrast:white-on-black){#index-2 .oss .icons svg path{fill:#fff}}#index-2 .oss .icons svg{margin:0 auto}#index-2 .oss .icons a{color:#fff;display:flex;flex:1 1;flex-direction:column;height:145px;justify-content:space-between;margin:20px;max-width:140px;text-align:center;width:140px}#index-2 .oss .icons a p{padding-bottom:0}#index-2 .github-bar{opacity:0;position:absolute;transition:opacity .3s ease-out}#index-2 .github-bar.left{left:-200px}#index-2 .github-bar.right{right:-200px}#index-2 ul#videos{margin:0;padding:0}#index-2 ul#videos li{border-left:2px solid transparent;list-style:none;margin:0;padding:0}#index-2 ul#videos li.active{border-color:#000}#index-2 ul#videos li a{color:#000;display:block;font-size:1rem;margin-left:6px;text-decoration:none}#index-2 ul#videos li span{font-size:.8rem;font-style:italic}#index-2 .installation-panel .flat-button{background-color:#fff;color:#000;cursor:pointer;display:block;margin-top:20px;padding:1rem;text-decoration:none}@media screen and (-ms-high-contrast:active){#index-2 .installation-panel .flat-button{border:2px solid gray}}#index-2 .installation-panel .flat-button.focus,#index-2 .installation-panel .flat-button:hover{background-color:#eee}#index-2 .installation-panel .flat-button:active{background-color:#ddd}#index-2 .installation-panel .flat-button .fluid-button-title{font-weight:600}#index-2 .installation-panel .flat-button button{background-color:transparent;border:none;float:right}#index-2 .installation-panel .flat-button svg{float:right;height:.9em;margin-top:3px;opacity:.5;transition:opacity .2s linear;width:.9em}#index-2 .installation-panel .flat-button:hover svg{opacity:1}#index-2 .installation-panel .tooltip{background-color:#3f3f3f;border-radius:2px;color:#fff;display:none;font-family:var(--code-font);font-size:14px;padding:5px 8px;pointer-events:none;text-align:center;white-space:pre-wrap;z-index:100}#index-2 #adopt-gradually-content.fancy-scroll{height:1400px}#index-2 #adopt-gradually-content.fancy-scroll #adopt-step-slider{height:580px;position:sticky;top:80px}#index-2 #adopt-gradually-content.fancy-scroll #adopt-step-blurb,#index-2 #adopt-gradually-content.fancy-scroll #global-stepper{bottom:64px;left:0;margin:0 auto;max-width:480px;position:absolute;right:0}#index-2 #adopt-gradually-content.fancy-scroll #global-stepper{bottom:32px;display:flex}#index-2 #adopt-gradually-content.fancy-scroll #global-stepper>div{opacity:.2;transition:opacity .2s}#index-2 #adopt-gradually-content.fancy-scroll #global-stepper>div.active{opacity:1}#index-2 #adopt-gradually-content.fancy-scroll .adopt-step{left:0;margin-left:auto;margin-right:auto;padding-top:200px;position:absolute;right:0;top:0;transition:opacity .2s}#index-2 #adopt-gradually-content.fancy-scroll .adopt-step .adopt-step-stepper,#index-2 #adopt-gradually-content.fancy-scroll .adopt-step>div>p,#index-2 #global-stepper{display:none}#index-2 .adopt-step{margin:20px auto;max-width:480px;padding-top:120px}#index-2 .adopt-step pre{margin-bottom:10px}#index-2 .adopt-step>p{font-size:1rem;font-weight:700;margin:10px 0}#index-2 .adopt-step .tag-container p{font-size:1rem}#index-2 .adopt-step-stepper{display:flex;margin-bottom:80px}#index-2 .adopt-step-stepper div{border:1px solid #000;display:inline-block;flex:1 1;height:13px;margin-left:10px;position:relative}#index-2 .adopt-step-stepper div.yellow,#index-2 .adopt-step-stepper div.yellow-hint-blue,#index-2 .adopt-step-stepper div.yellow-lot-blue{background-color:#ffe200}#index-2 .adopt-step-stepper div.yellow-hint-blue:after,#index-2 .adopt-step-stepper div.yellow-lot-blue:after{background-color:#3178c6;content:"";height:13px;left:0;position:absolute;width:20%}#index-2 .adopt-step-stepper div.yellow-lot-blue:after{width:60%}#index-2 .adopt-step-stepper div.first{margin-left:0}#index-2 .via-delete .highlight{background-color:#fee}#index-2 .via-delete .dim{opacity:1}.yellow{background-color:#f1dd3f;color:#000;margin-bottom:-110px}.yellow .col1{align-self:stretch;width:50%}.yellow .col1 pre{height:220px;overflow:hidden}.yellow .col1 pre code{font-size:14px;line-height:16px}.yellow a{color:#000}.darkblue.dt{position:relative}.darkblue.dt .dark-blue-trans-bg{background-color:rgba(0,39,62,.77)}.darkblue.dt .dark-blue-trans-bg a{color:#fff}.darkblue.dt .dt-background{bottom:20px;font-family:var(--code-font);font-size:1.2rem;left:20px;opacity:.2;overflow:hidden;position:absolute;top:20px;width:80%}.flex-column{flex-direction:column}.fluid-button{background-color:#fff;color:#000;display:flex;padding:.5rem 1rem;text-decoration:none}.fluid-button .fluid-button-title{font-weight:600}.fluid-button div.fluid-button-icon{align-items:center;border-left:2px solid #000;display:flex;justify-content:center;margin-left:1rem;margin-right:-1rem;min-width:4rem;text-align:center}.fluid-button.focus,.fluid-button:hover{background-color:#eee}.fluid-button:active{background-color:#ddd}.cta .cta-back a{left:20px;position:relative;top:20px;width:60px}.transparent-button{border:1px solid #fff;color:#fff;cursor:pointer;left:20px;padding:10px;position:absolute;text-decoration:none;top:40px;width:80px}.transparent-button svg{margin-right:8px}.transparent-button.focus,.transparent-button:hover{background-color:hsla(0,0%,100%,.063)}.transparent-button:active{background-color:hsla(0,0%,100%,.125);border:1px solid hsla(0,0%,100%,.376)}.flow-links{display:flex;flex-wrap:wrap}.clicky-grey-button{background-color:#d8d8d8;color:#000;display:flex;flex-direction:column-reverse;height:10rem;margin-bottom:20px;margin-right:20px;padding:18px;position:relative;text-decoration:none;width:16rem}.clicky-grey-button.white-theme{background-color:#fff;border:1px solid #000}.clicky-grey-button.white-theme:hover{background-color:#eee}.clicky-grey-button.white-theme:active{background-color:#f2f2f2;margin-bottom:19px}@media screen and (-ms-high-contrast:active){.clicky-grey-button{border:1px solid gray}.clicky-grey-button svg path{fill:#fff}}.clicky-grey-button.headline{height:200px;width:300px}.clicky-grey-button.links{height:26rem}.clicky-grey-button.focus,.clicky-grey-button:hover{background-color:#ccc}.clicky-grey-button:active{background-color:#ddd}.clicky-grey-button p{color:#000}.clicky-grey-button div{color:#000;font-size:1.6rem;font-weight:400;line-height:1.6rem;margin-bottom:.2rem;text-decoration:none}.clicky-grey-button div:hover{text-decoration:none}.clicky-grey-button p{margin-bottom:0;margin-top:0}.clicky-grey-button a{text-decoration:none}.clicky-grey-button .badge{background-color:#666;position:absolute;right:10px;top:10px}.columns{display:flex;flex-direction:row;flex-wrap:wrap;margin:0 -2.6rem}.columns.wide{justify-content:space-between}.columns.wide .item{min-width:240px}.columns .item{flex:1 1;margin:.6rem;padding:1rem}.columns .item h4{margin-top:0}.columns .item ul{padding:0}.columns .item ul ul{margin-left:.5rem}.columns .item li{list-style:none;margin-left:0}@media(max-width:800px){.columns{flex-direction:column;margin:0}}div#like-dislike-subnav div{font-size:14px;padding-left:4px;padding-top:16px}div#like-dislike-subnav div button{align-items:center;background:none;border:none;color:var(--text-color);display:inline-flex;flex-direction:row}div#like-dislike-subnav div button svg{fill:var(--text-color);color:var(--text-color);margin-right:4px}#beta{background:repeating-linear-gradient(45deg,#9b9a4e,#9b9a4e 10px,#6e6a33 0,#6e6a33 20px);background-color:"#c63131";color:#fff;padding:4px 4px 6px;text-align:center;text-shadow:0 2px 4px #000}#doc-layout{display:flex;flex-direction:row}#handbook-content{margin:auto;max-width:1200px;min-width:0;padding:0 2rem}@media(max-width:480px){#handbook-content{padding:0}}#handbook-content>h1{font-size:3.5rem;font-weight:400;letter-spacing:0;line-height:3.5rem}@media(max-width:800px){#handbook-content>h1{font-size:2.5rem;margin-left:1rem;margin-right:1rem}}#handbook-content article{display:flex;flex-direction:row;width:100%}@media(max-width:999px){#handbook-content article{flex-direction:column}}#handbook-content .whitespace,#handbook-content .whitespace-tight{margin:0 auto 1rem;overflow:hidden;padding:2rem}@media(max-width:999px){#handbook-content .whitespace,#handbook-content .whitespace-tight{order:2}}#handbook-content .whitespace-tight{padding:1.2rem 2rem}#handbook-content aside{flex-shrink:0;margin-left:20px;width:13rem}@media(min-width:1000px){#handbook-content aside{display:block}}@media(max-width:999px){#handbook-content aside{margin-left:0;order:1;position:relative;top:0;width:100%;z-index:1000}}#handbook-content aside nav{margin-bottom:1rem;position:sticky;top:30px}#handbook-content aside nav.deprecated{top:7rem}#handbook-content aside h5{font-size:16px;font-weight:600;margin:0}#handbook-content aside ul{padding:0}#handbook-content aside ul li{list-style:none}#handbook-content aside ul a{border-left:2px solid transparent;color:var(--alt-text-color);display:block;font-size:14px;font-weight:400;overflow:hidden;padding-left:8px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}#handbook-content aside ul a:active,#handbook-content aside ul a:hover{border-left:2px solid rgba(0,120,212,.3)}#handbook-content aside ul a.current{border-left:2px solid #0078d4}#handbook-content aside .like-dislike-subnav #dislike-button,#handbook-content aside .like-dislike-subnav #like-button{cursor:pointer}#handbook-content .preamble a{color:var(--text-color)}#handbook-content .justify-between{justify-content:space-between}#handbook-content a.navigation-link{flex:1 1;text-decoration:none}#handbook-content .prev-next{flex:1 1}#handbook-content .prev-next .arrow{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-right:20px}#handbook-content .prev-next h3,#handbook-content .prev-next header,#handbook-content .prev-next p{margin:0;padding:0}#handbook-content .prev-next header{font-size:.8rem;margin-bottom:.5rem}#handbook-content .prev-next p{margin-bottom:.4rem}#handbook-content .prev-next header,#handbook-content .prev-next p{color:var(--text-color)}#handbook-content .prev-next:hover h3,#handbook-content .prev-next:hover svg path{fill:var(--text-color);color:var(--text-color)}#handbook-content .prev-next .nav-content{flex:1 1;padding-right:1rem}#handbook-content .prev-next.next{flex-direction:row-reverse;padding-left:1rem;padding-right:0;text-align:right}#handbook-content .prev-next.next .arrow{margin-left:20px;margin-right:0}#handbook-content .prev-next.next svg{transform:scaleX(-1)}#handbook-content .vertical-line{background-color:#e3e3e3;flex-basis:2px;flex-grow:0;flex-shrink:0;height:80px;min-width:2px}#handbook-content .docs-footer{border-top:1px solid var(--border-color);display:flex;flex-direction:row-reverse;height:2rem;margin:0 -2rem;padding:0}#handbook-content .docs-footer h5{font-weight:400;margin:0;padding:.5rem 1rem 0 0}#handbook-content .docs-footer button{align-items:center;background:none;border:none;border-left:1px solid var(--border-color);color:var(--text-color);cursor:pointer;display:inline-flex;flex-direction:row;padding:0 1rem}#handbook-content .docs-footer button:hover{background-color:var(--border-color)}#handbook-content .docs-footer button svg{fill:var(--text-color);color:var(--text-color);margin-right:4px}#handbook-content #deprecated-header{align-items:center;background-color:#fff4cf;color:#000;display:flex;justify-content:space-between;margin:0 -2rem;padding:1rem 2rem 1rem 0;position:sticky;top:0;z-index:1}#handbook-content #deprecated-header [id]:before{height:110px;margin-top:-110px}@media(max-width:800px){#handbook-content #deprecated-header{flex-direction:column;margin:0;padding:1rem}#handbook-content #deprecated-header h3{font-size:.8rem}#handbook-content #deprecated-header #deprecated-icon{margin-right:1rem}#handbook-content #deprecated-header #deprecated-action{margin-top:1rem}}#handbook-content #deprecated-header #deprecated-content{align-items:center;display:flex}#handbook-content #deprecated-header #deprecated-content #deprecated-icon{text-align:center;width:2rem}#handbook-content #deprecated-header h3{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;margin-top:0}#handbook-content #deprecated-header p{margin-bottom:.2rem;margin-top:0}#handbook-content #deprecated-header #deprecated-action{flex-shrink:0}#handbook-content #deprecated-header #deprecated-action a{background-color:#fff;border:1px solid #000;color:#000;padding:.2rem .5rem;text-decoration:none}#handbook-content #deprecated-header #deprecated-action a:hover{background-color:#eee}#handbook-content .markdown table.cli-option{display:table}#handbook-content .markdown table.cli-option tr{width:100%}#handbook-content .markdown table.cli-option tr p{margin:0;padding:0}#handbook-content .markdown table.cli-option tr code{word-wrap:normal}#handbook-content .markdown table.cli-option tr.odd{background-color:var(--background-color)!important}#handbook-content .markdown table.cli-option tr.even{background-color:var(--background-minor-highlight-color)!important}#handbook-content .markdown table.cli-option ul{margin:0;padding:0}#handbook-content .markdown table.cli-option ul li{list-style:none;margin:0 0 8px}#handbook-content .markdown table.cli-option tr.option-description td{border-top:none;margin-top:0}.circle-bg{background-color:#719af4;color:#000;display:inline-block;line-height:31px;margin-right:3px;margin-top:12px;overflow:hidden;position:relative;text-align:center}.circle-bg,.circle-bg img{border-radius:16px;height:32px;width:32px}.circle-bg img{left:0;position:absolute;top:0}.bottom-section-content{flex:1 1;padding:1rem 2rem}@media(max-width:480px){.small-columns{flex-direction:column!important}}.inline-popup{background:var(--background-color);border-radius:2px;box-shadow:0 30px 90px -20px rgba(0,0,0,.3),0 0 1px 1px rgba(0,0,0,.05);font-size:14px;line-height:20px;max-width:400px;min-width:300px;padding:0;position:absolute;transition:opacity .5s;z-index:110}.inline-popup .inline-popup-container{display:flex}.inline-popup .inline-popup-container a.inline-popup-extract{color:var(--text-color);display:block;margin:16px;max-height:140px;overflow:hidden;position:relative;text-decoration:none}.inline-popup .inline-popup-container a.inline-popup-extract h5{margin-top:0}.inline-popup .inline-popup-container a.inline-popup-extract:after{background-color:transparent;bottom:0;content:" ";height:20px;pointer-events:none;position:absolute;width:25%}.inline-popup .inline-popup-container a.inline-popup-extract div{margin:0}.inline-popup .inline-popup-container a.inline-popup-extract div code{background-color:var(--inline-code-background-color);border-radius:2px;padding:2px 4px}.inline-popup.popup-fade-in{animation:.1s ease forwards}.handbook-on-this-page-section-list{max-height:80vh;overflow:auto}.handbook-on-this-page-section-list ul{padding-left:.5em!important}pre{background-color:#fff;border-bottom:1px solid #999;border-left:1px solid #999;color:#000;margin-bottom:3rem;overflow-x:auto;padding:12px;position:relative}pre.shiki{overflow-x:visible}pre.shiki:hover .dim{opacity:1}pre.shiki div.dim{opacity:.9}pre.shiki div.dim,pre.shiki div.highlight{margin:0;padding:0}pre.shiki div.highlight{background-color:#f1f8ff;opacity:1}pre.shiki div.line{min-height:1rem}pre.shiki .language-id{display:none}pre.twoslash{border-color:#719af4}pre.twoslash:hover data-lsp{border-color:#747474}pre.twoslash data-lsp:hover:before{background-color:#3f3f3f;border-radius:2px;color:#fff;content:attr(lsp);font-family:JetBrains Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px;padding:5px 8px;position:absolute;text-align:left;transform:translateY(1rem);white-space:pre-wrap;z-index:100}pre .code-container{overflow:auto}pre .code-container>a{border:1px solid var(--link-color);border-radius:4px;bottom:8px;color:var(--link-color);opacity:0;padding:0 8px;position:absolute;right:8px;text-decoration:none;transition-timing-function:ease;transition:opacity .3s}@media(prefers-reduced-motion:reduce){pre .code-container>a{transition:none}}pre .code-container>a:focus,pre .code-container>a:hover{background-color:var(--link-color);color:#fff;opacity:1}pre .code-container:focus a,pre .code-container:hover a{opacity:1}pre code{-webkit-overflow-scrolling:touch;font-family:JetBrains Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:15px;white-space:pre}pre code a{text-decoration:none}pre .query{color:#137998;display:inline-block;margin-bottom:10px}pre .error,pre .error-behind{display:block;margin-bottom:4px;margin-left:-14px;margin-top:8px;padding:6px 6px 6px 14px;white-space:pre-wrap;width:calc(100% - 20px)}pre .error{align-items:center;background-color:#fee;border-left:2px solid #bf1818;color:#000;display:flex;margin-right:-2px;position:absolute}pre .error .code{display:none}pre .error-behind{color:#fee;-webkit-user-select:none;user-select:none;visibility:transparent}pre .arrow{background-color:#eee;border-left:1px solid #eee;border-top:1px solid #eee;height:8px;margin-left:.1rem;position:relative;top:-7px;transform:translateY(25%) rotate(45deg);width:8px}pre .popover{background-color:#eee;border-radius:3px;display:inline-block;margin-bottom:10px;margin-top:10px;padding:0 .5rem .6rem}pre .inline-completions ul.dropdown{background-color:#e7e7e7;border-left:4px solid #4b9edd;color:#333;display:inline-block;font-family:var(--code-font);font-size:.8rem;margin:0;padding:0;position:absolute;width:240px}pre .inline-completions ul.dropdown:before{background-color:#4b9edd;content:" ";left:-3px;position:absolute;top:-1.2rem;width:2px}pre .inline-completions ul.dropdown li{margin-bottom:4px;overflow-x:hidden;padding-left:4px}pre .inline-completions ul.dropdown li.deprecated{text-decoration:line-through}pre .inline-completions ul.dropdown li span.result-found{color:#2265a5}pre .inline-completions ul.dropdown li span.result{color:#000;display:inline-block;width:100px}.dark-theme .markdown pre{background-color:#d8d8d8;border-color:#ddd;filter:invert(98%) hue-rotate(180deg)}data-lsp{border-bottom:1px dotted transparent;transition-timing-function:ease;transition:border-color .3s}@media(prefers-reduced-motion:reduce){data-lsp{transition:none}}.tag-container{position:relative}.tag-container .twoslash-annotation{color:#187abf;font-family:JetBrains Mono,Menlo,Monaco,Consolas,Courier New,monospace;position:absolute;right:-210px;width:200px}.tag-container .twoslash-annotation svg{float:left;margin-left:-44px}.tag-container .twoslash-annotation.left{left:-200px;right:auto}.tag-container .twoslash-annotation.left svg{float:right;margin-right:-5px}.markdown{scroll-behavior:smooth}.markdown h1,.markdown h2,.markdown h3{white-space-collapse:preserve;display:flex;flex-wrap:wrap;font-weight:400;line-height:1.3}.markdown h1 a,.markdown h2 a,.markdown h3 a{padding-right:10px!important}.markdown h1[id]:before,.markdown h2[id]:before,.markdown h3[id]:before{content:"";display:block;height:30px;margin-top:-30px;visibility:hidden}.markdown h1{word-wrap:break-word;font-size:2rem;margin-bottom:12px;margin-top:0;word-break:break-word}.markdown h2{font-size:1.75rem;margin-bottom:12px;margin-top:32px}.markdown h3{font-size:1.1875rem;margin-bottom:18px;margin-top:30px}.markdown pre{clear:both;top:10px}.markdown blockquote{background-color:var(--inline-code-background-color);border-left:2px solid var(--border-color);font-size:.8rem;margin:auto;padding:.1rem 2rem}.markdown blockquote.bg-reading{border-left:none;float:right;margin-left:.5rem}.markdown .language-id{display:none}.markdown table{border-collapse:separate;border-spacing:0;display:block;font-size:.875rem;max-width:100%;overflow-x:auto;table-layout:auto;width:100%}.markdown table.data{display:table}.markdown table.data td,.markdown table.data th,.markdown table.data tr{text-align:center}.markdown table td,.markdown table th{word-wrap:break-word;border:0;border-top:1px solid var(--border-color);display:table-cell;line-height:1.5;padding:.75rem 1rem;text-align:left;vertical-align:top}.markdown table tr:nth-child(2n){background-color:var(--background-minor-highlight-color)}.markdown table th{border-top:none}.markdown img{max-width:100%}.markdown div.table-container{overflow-x:auto}.markdown table.full-width-table{display:table;width:100%}.markdown .blue-tick{color:#3178c6;font-size:1.2rem;font-weight:700}.markdown .black-tick{color:#086f56;font-size:1.2rem}.markdown .red-cross{color:#c63131;font-size:1.2rem}#glossary ul.filterable-quicklinks{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}#glossary ul.filterable-quicklinks li{background-color:#e0e0e0;cursor:pointer;list-style:none;margin:.1rem;padding:.3rem;text-decoration:none}@media screen and (-ms-high-contrast:active){#glossary ul.filterable-quicklinks li{border:2px solid gray}}#glossary ul.filterable-quicklinks li.focus,#glossary ul.filterable-quicklinks li:hover{background-color:#cecece}#glossary ul.filterable-quicklinks li:active{background-color:#adadad}#glossary ul.filterable-quicklinks li a{color:#000;text-decoration:none}#glossary ul.filterable-quicklinks li a:visited{color:#505050}.cropper{background-color:#f9f6f6;display:block;height:500px;overflow:hidden;position:relative}.cropper img{margin-left:-50px}.cropper p{background:#fff;background:linear-gradient(0deg,#fff,hsla(0,0%,100%,.5));bottom:0;font-size:3rem;left:0;line-height:3rem;margin:0;padding-bottom:.8rem;padding-left:.8rem;position:absolute;width:100%}.dev-tools h3{margin:.6rem 0 0 1rem}@media(max-width:800px){.navbar-sub.dev-tools{height:auto}.navbar-sub.dev-tools .nav{flex-direction:column}}.examples{background-color:var(--playground-dropdown-bg);box-shadow:0 6px 12px rgba(0,0,0,.175);color:var(--text-color);height:450px;padding:20px}.examples a{color:var(--link-color)}.examples button.section-name{background-color:transparent;border:none;color:var(--text-color);font-size:2rem;font-weight:600;height:2.8rem;margin-right:1rem;margin-top:0;padding-bottom:.05rem;padding-top:0;text-decoration:none}.examples button.section-name.selected{border-bottom:2px solid #3178c6}.examples>ol{padding-left:0}.examples>ol li{display:inline-block;margin-bottom:20px;padding:0;width:auto}.examples>ol li:hover{background-color:transparent}.examples ol{list-style:none;padding-left:0;padding-right:20px}.examples>div.section-content{display:flex;flex-wrap:wrap}.examples>div.section-content>p>a{color:#3178c6;display:inline-block;padding:0}.examples>div.section-content .section-list{display:flex;flex-direction:column;margin-top:1.5em;width:280px}.examples>div.section-content .section-list h4{font-size:16px;font-weight:600;margin:0 0 8px}.examples>div.section-content .section-list ol li{margin:0;padding:0;position:relative;width:auto!important}.examples>div.section-content .section-list ol li .section-list a{border-bottom:none;display:block;font-size:14px;margin-left:-8px;padding:4px 4px 4px 10px;text-decoration:none}.examples>div.section-content .section-list ol li .section-list a:hover{color:#000}.examples>div.section-content .section-list ol li .section-list a.highlight{border-left:2px solid #235a97;padding-left:8px}.examples>div.section-content .section-list ol li .example-indicator{border-radius:.5rem;height:.5rem;margin-top:.3rem;position:absolute;right:.8rem;top:.75rem;width:.5rem}.examples>div.section-content .section-list ol li .example-indicator.done{background-color:#235a97}.examples>div.section-content .section-list ol li .example-indicator.changed{border:1px solid #235a97}.tsconfig{margin-bottom:6rem}@media(max-width:480px){.tsconfig.raised{margin:0;padding:2rem}.tsconfig.raised #full-option-list{padding:10px}.tsconfig.raised .indent{padding:1rem}}.tsconfig.button{margin-bottom:2rem}.tsconfig.button>a{display:block}.tsconfig.button svg{margin-right:.3rem;margin-top:.8rem}.tsconfig.button svg path{stroke:var(--text-color)}.tsconfig.button.closed svg{transform:rotate(270deg)}.tsconfig.button.open a{color:var(--text-color);text-decoration:none}.tsconfig .tsconfig-quick-nav{margin-left:-1rem;padding-left:1rem}.tsconfig .tsconfig-quick-nav.grouped{border-left:1px solid var(--text-color);margin-bottom:3rem}.tsconfig .tsconfig-quick-nav h4{font-weight:400;margin-bottom:.1rem}.tsconfig .tsconfig-quick-nav h4 a{color:var(--text-color)}.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category{align-items:flex-start;display:flex}@media(max-width:900px){.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category{flex-direction:column}}.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category h5{flex:0 0 auto;width:160px}.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category ol{flex:1 1 auto;max-width:100%}.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category li{display:inline-block;list-style:none;margin-left:8px}.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category li a{color:var(--text-color);text-decoration:none}.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category li a:hover{text-decoration:underline}.tsconfig .tsconfig-quick-nav .tsconfig-quick-nav-category li span{opacity:.8}.tsconfig article{width:100%}.tsconfig a[id]:before{content:"";display:block;height:80px;margin-top:-80px;scroll-margin-top:121px;visibility:hidden}.tsconfig .indent{padding:2rem}.tsconfig div#full-option-list{display:flex;flex-flow:row wrap}.tsconfig div#full-option-list div.tsconfig-nav-top{flex:auto;margin:0 8px 8px 0;width:30%}@media(max-width:480px){.tsconfig div#full-option-list div.tsconfig-nav-top{width:46%}.tsconfig div#full-option-list div.tsconfig-nav-top h5{overflow-x:hidden}}.tsconfig div#full-option-list div.tsconfig-nav-top h5 a{color:var(--text-color);font-size:2rem;font-weight:400;text-decoration:none}.tsconfig div#full-option-list div.tsconfig-nav-top ul{margin:0;padding:0}.tsconfig div#full-option-list div.tsconfig-nav-top li{font-family:var(--code-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tsconfig div#full-option-list div.tsconfig-nav-top li a{color:var(--text-color)}.tsconfig nav{background-color:var(--raised-background-color);border-bottom:1px solid #d3d3d3;flex-direction:row;padding-bottom:10px;padding-top:4px;position:sticky;top:0;z-index:99999}.tsconfig nav,.tsconfig nav ul{display:flex;justify-content:center}.tsconfig nav ul{flex-wrap:wrap;margin:0}@media(max-width:800px){.tsconfig nav{position:static}.tsconfig nav ul{flex-wrap:wrap}.tsconfig nav li{min-width:120px}}.tsconfig nav a{text-decoration:none}.tsconfig nav a.current{border-bottom:1px solid #3178c6}.tsconfig nav li{display:block;margin:6px}.tsconfig .category{margin-bottom:40px;margin-top:80px}.tsconfig .category>h2>a:focus{background-color:#000;color:#fff;outline:none}.tsconfig .compiler-option{margin-bottom:80px}.tsconfig .compiler-option>h3{margin-bottom:0;offset-anchor:-30px;overflow-x:hidden}@media(max-width:800px){.tsconfig .compiler-option>h3{display:block;overflow-y:hidden}}.tsconfig .compiler-option>h3>a{scroll-margin-top:65px}.tsconfig .compiler-option>h3>a:focus{background-color:#000;color:#fff;outline:none}.tsconfig .compiler-option .compiler-content{display:flex}.tsconfig .compiler-option .compiler-content .markdown{word-wrap:break-word;border-right:1px solid gray;flex-shrink:1;padding-right:20px;width:calc(100% - 250px)}@media(max-width:480px){.tsconfig .compiler-option .compiler-content .markdown{border-right:none;padding-right:0}}.tsconfig .compiler-option .compiler-content ul.compiler-option-md{float:right;margin-left:20px;max-width:220px;min-width:200px;overflow-x:hidden;padding:0;width:220px}.tsconfig .compiler-option .compiler-content ul.compiler-option-md span{display:block;font-weight:600;width:100px}.tsconfig .compiler-option .compiler-content ul.compiler-option-md li{list-style:none;margin-bottom:12px}.tsconfig .compiler-option .compiler-content ul.compiler-option-md li ul{margin-bottom:18px;padding:0}.tsconfig .compiler-option .compiler-content ul.compiler-option-md li li{margin:0 0 12px}.tsconfig .compiler-option .compiler-content ul.compiler-option-md tr{padding:10px 0}.tsconfig .compiler-option .compiler-content ul.compiler-option-md li>p{display:inline-block;margin:0}@media(max-width:800px){.tsconfig .compiler-option .compiler-content{flex-direction:column}.tsconfig .compiler-option .compiler-content .markdown{width:100%}.tsconfig .compiler-option .compiler-content ul.compiler-option-md{margin-left:0;width:100%}}</style><link rel="icon" href="/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=8944a05a8b601855de116c8a56d3b3ae"/><link rel="sitemap" type="application/xml" href="/sitemap-index.xml"/><title data-react-helmet="true">TypeScript: TSConfig Reference - Docs on every TSConfig option</title><link data-react-helmet="true" rel="preload" href="/css/docsearch.css" as="style"/><link data-react-helmet="true" rel="preconnect" href="https://consentdeliveryfd.azurefd.net/"/><style data-react-helmet="true"> pre data-err { background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x 0 100%; padding-bottom: 3px; }</style><style type="text/css"> .anchor.before { position: absolute; top: 0; left: 0; transform: translateX(-100%); padding-right: 4px; } .anchor.after { display: inline-block; padding-left: 4px; } h1 .anchor svg, h2 .anchor svg, h3 .anchor svg, h4 .anchor svg, h5 .anchor svg, h6 .anchor svg { visibility: hidden; } h1:hover .anchor svg, h2:hover .anchor svg, h3:hover .anchor svg, h4:hover .anchor svg, h5:hover .anchor svg, h6:hover .anchor svg, h1 .anchor:focus svg, h2 .anchor:focus svg, h3 .anchor:focus svg, h4 .anchor:focus svg, h5 .anchor:focus svg, h6 .anchor:focus svg { visibility: visible; } </style><script> document.addEventListener("DOMContentLoaded", function(event) { var hash = window.decodeURI(location.hash.replace('#', '')) if (hash !== '') { var element = document.getElementById(hash) if (element) { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop var clientTop = document.documentElement.clientTop || document.body.clientTop || 0 var offset = element.getBoundingClientRect().top + scrollTop - clientTop // Wait for the browser to finish rendering before scrolling. setTimeout((function() { window.scrollTo(0, offset - 0) }), 0) } } }) </script></head><body><script> (function() { let hasLocalStorage = false try { hasLocalStorage = typeof localStorage !== "undefined" } catch (error) {} const systemIsDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches const hasSetColorTheme = hasLocalStorage && localStorage.getItem("force-color-theme") const customThemeOverride = hasLocalStorage && localStorage.getItem("force-color-theme") if (!hasSetColorTheme && systemIsDark) { document.documentElement.classList.add("dark-theme") } else if (customThemeOverride) { document.documentElement.classList.add(customThemeOverride.replace("force-", "") + "-theme") } const customFontOverride = hasLocalStorage && localStorage.getItem("force-font") || "cascadia" document.documentElement.classList.add('font-' + customFontOverride) })() </script><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="ms-Fabric"><div id="cookie-banner" class="openx"></div><header dir="ltr"><a class="skip-to-main" href="#site-content" tabindex="0">Skip to main content</a><div id="top-menu" class="up"><div class="left below-small"><a id="home-page-logo" aria-label="TypeScript Home Page" href="/"><svg fill="none" height="26" viewBox="0 0 27 26" width="27" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.98608 0h24.32332c.5446 0 .9861.436522.9861.975v24.05c0 .5385-.4415.975-.9861.975h-24.32332c-.544597 0-.98608-.4365-.98608-.975v-24.05c0-.538478.441483-.975.98608-.975zm13.63142 13.8324v-2.1324h-9.35841v2.1324h3.34111v9.4946h2.6598v-9.4946zm1.0604 9.2439c.4289.2162.9362.3784 1.5218.4865.5857.1081 1.2029.1622 1.8518.1622.6324 0 1.2331-.0595 1.8023-.1784.5691-.1189 1.0681-.3149 1.497-.5879s.7685-.6297 1.0187-1.0703.3753-.9852.3753-1.6339c0-.4703-.0715-.8824-.2145-1.2365-.1429-.3541-.3491-.669-.6186-.9447-.2694-.2757-.5925-.523-.9692-.7419s-.8014-.4257-1.2743-.6203c-.3465-.1406-.6572-.2771-.9321-.4095-.275-.1324-.5087-.2676-.7011-.4054-.1925-.1379-.3409-.2838-.4454-.4379-.1045-.154-.1567-.3284-.1567-.523 0-.1784.0467-.3392.1402-.4824.0935-.1433.2254-.2663.3959-.369s.3794-.1824.6269-.2392c.2474-.0567.5224-.0851.8248-.0851.22 0 .4523.0162.697.0486.2447.0325.4908.0825.7382.15.2475.0676.4881.1527.7218.2555.2337.1027.4495.2216.6475.3567v-2.4244c-.4015-.1514-.84-.2636-1.3157-.3365-.4756-.073-1.0214-.1095-1.6373-.1095-.6268 0-1.2207.0662-1.7816.1987-.5609.1324-1.0544.3392-1.4806.6203s-.763.6392-1.0104 1.0743c-.2475.4352-.3712.9555-.3712 1.5609 0 .7731.2268 1.4326.6805 1.9785.4537.546 1.1424 1.0082 2.0662 1.3866.363.146.7011.2892 1.0146.4298.3134.1405.5842.2865.8124.4378.2282.1514.4083.3162.5403.4946s.198.3811.198.6082c0 .1676-.0413.323-.1238.4662-.0825.1433-.2076.2676-.3753.373s-.3766.1879-.6268.2473c-.2502.0595-.5431.0892-.8785.0892-.5719 0-1.1383-.0986-1.6992-.2959-.5608-.1973-1.0805-.4933-1.5589-.8879z" fill="#fff" fill-rule="evenodd"></path></svg><span class="hide-small">TypeScript</span></a><nav aria-label="top menu"><ul role="tablist" aria-owns="tab1 tab2 tab3 tab4 tab5 tab6" aria-busy="true"><li class="nav-item hide-small" role="none presentation"><a id="tab1" role="tab" href="/download/">Download</a></li><li class="nav-item" role="none presentation"><a id="tab2" role="tab" href="/docs/"><span>Docs</span></a></li><li class="nav-item show-only-large" role="none presentation"><a id="tab3" role="tab" href="/docs/handbook/intro.html">Handbook</a></li><li class="nav-item" role="none presentation"><a id="tab4" role="tab" href="/community/">Community</a></li><li class="nav-item show-only-largest" role="none presentation"><a id="tab5" role="tab" to="/play/" href="/play/">Playground</a></li><li class="nav-item" role="none presentation"><a id="tab6" role="tab" href="/tools/">Tools</a></li></ul></nav></div><div class="right above-small"><div class="search-section"><div id="my-lang-quick-jump" style="display:none" class="nav-item"><a href="">in En</a></div><div class="nav-item"><form id="search-form" class="search top-nav" role="search" aria-live="assertive"><svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m10.5 0c.5052 0 .9922.0651042 1.4609.195312.4688.130209.9063.315105 1.3125.554688.4063.239583.7761.52865 1.1094.86719.3386.33333.6276.70312.8672 1.10937s.4245.84375.5547 1.3125.1953.95573.1953 1.46094-.0651.99219-.1953 1.46094-.3151.90625-.5547 1.3125-.5286.77864-.8672 1.11718c-.3333.33334-.7031.61978-1.1094.85938-.4062.2396-.8437.4245-1.3125.5547-.4687.1302-.9557.1953-1.4609.1953-.65104 0-1.27604-.1094-1.875-.3281-.59375-.2188-1.14062-.5339-1.64062-.94534l-6.132818 6.12504c-.098958.0989-.216145.1484-.351562.1484s-.252604-.0495-.351562-.1484c-.0989588-.099-.148438-.2162-.148438-.3516s.0494792-.2526.148438-.3516l6.125002-6.13278c-.41146-.5-.72656-1.04687-.94532-1.64062-.21874-.59896-.32812-1.22396-.32812-1.875 0-.50521.0651-.99219.19531-1.46094s.31511-.90625.55469-1.3125.52604-.77604.85938-1.10937c.33854-.33854.71093-.627607 1.11718-.86719s.84375-.424479 1.3125-.554688c.46875-.1302078.95573-.195312 1.46094-.195312zm0 10c.6198 0 1.2031-.11719 1.75-.35156.5469-.23959 1.0234-.5625 1.4297-.96875.4062-.40625.7265-.88281.9609-1.42969.2396-.54688.3594-1.13021.3594-1.75s-.1198-1.20312-.3594-1.75c-.2344-.54688-.5547-1.02344-.9609-1.42969-.4063-.40625-.8828-.72656-1.4297-.96093-.5469-.23959-1.1302-.35938-1.75-.35938-.61979 0-1.20312.11979-1.75.35938-.54688.23437-1.02344.55468-1.42969.96093s-.72916.88281-.96875 1.42969c-.23437.54688-.35156 1.13021-.35156 1.75s.11719 1.20312.35156 1.75c.23959.54688.5625 1.02344.96875 1.42969s.88281.72916 1.42969.96875c.54688.23437 1.13021.35156 1.75.35156z" fill="#fff"></path></svg><span><input id="search-box-top" type="search" placeholder="Search Docs" aria-label="Search the TypeScript site"/></span><input type="submit" style="display:none"/></form></div></div></div></div><div id="site-content"></div></header><main role="main"><div class="tsconfig raised main-content-block markdown button closed"><a href="#" aria-expanded="false" role="button"><h2><svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1L11 11.5L21.5 1" stroke="black"></path></svg>Intro to the TSConfig Reference</h2><div class="preview">A TSConfig file in a directory indicates that the directory is the root of a TypeScript or JavaScript project...</div></a></div><div class="tsconfig main-content-block"><h2>Compiler Options</h2><div class="tsconfig-quick-nav"><div></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Top Level">Top Level</h5><ol aria-labelledby="quick-nav-Top Level"><li><code><a href="#files">files</a><span>, </span></code></li><li><code><a href="#extends">extends</a><span>, </span></code></li><li><code><a href="#include">include</a><span>, </span></code></li><li><code><a href="#exclude">exclude</a><span> and </span></code></li><li><code><a href="#references">references</a></code></li></ol></div></div><div class="tsconfig-quick-nav grouped"><h4><code><a href="#compilerOptions">"<!-- -->compilerOptions<!-- -->"</a></code></h4><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Type_Checking_6248">Type Checking</h5><ol aria-labelledby="quick-nav-Type_Checking_6248"><li><code><a href="#allowUnreachableCode">allowUnreachableCode</a><span>, </span></code></li><li><code><a href="#allowUnusedLabels">allowUnusedLabels</a><span>, </span></code></li><li><code><a href="#alwaysStrict">alwaysStrict</a><span>, </span></code></li><li><code><a href="#exactOptionalPropertyTypes">exactOptionalPropertyTypes</a><span>, </span></code></li><li><code><a href="#noFallthroughCasesInSwitch">noFallthroughCasesInSwitch</a><span>, </span></code></li><li><code><a href="#noImplicitAny">noImplicitAny</a><span>, </span></code></li><li><code><a href="#noImplicitOverride">noImplicitOverride</a><span>, </span></code></li><li><code><a href="#noImplicitReturns">noImplicitReturns</a><span>, </span></code></li><li><code><a href="#noImplicitThis">noImplicitThis</a><span>, </span></code></li><li><code><a href="#noPropertyAccessFromIndexSignature">noPropertyAccessFromIndexSignature</a><span>, </span></code></li><li><code><a href="#noUncheckedIndexedAccess">noUncheckedIndexedAccess</a><span>, </span></code></li><li><code><a href="#noUnusedLocals">noUnusedLocals</a><span>, </span></code></li><li><code><a href="#noUnusedParameters">noUnusedParameters</a><span>, </span></code></li><li><code><a href="#strict">strict</a><span>, </span></code></li><li><code><a href="#strictBindCallApply">strictBindCallApply</a><span>, </span></code></li><li><code><a href="#strictBuiltinIteratorReturn">strictBuiltinIteratorReturn</a><span>, </span></code></li><li><code><a href="#strictFunctionTypes">strictFunctionTypes</a><span>, </span></code></li><li><code><a href="#strictNullChecks">strictNullChecks</a><span>, </span></code></li><li><code><a href="#strictPropertyInitialization">strictPropertyInitialization</a><span> and </span></code></li><li><code><a href="#useUnknownInCatchVariables">useUnknownInCatchVariables</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Modules_6244">Modules</h5><ol aria-labelledby="quick-nav-Modules_6244"><li><code><a href="#allowArbitraryExtensions">allowArbitraryExtensions</a><span>, </span></code></li><li><code><a href="#allowImportingTsExtensions">allowImportingTsExtensions</a><span>, </span></code></li><li><code><a href="#allowUmdGlobalAccess">allowUmdGlobalAccess</a><span>, </span></code></li><li><code><a href="#baseUrl">baseUrl</a><span>, </span></code></li><li><code><a href="#customConditions">customConditions</a><span>, </span></code></li><li><code><a href="#module">module</a><span>, </span></code></li><li><code><a href="#moduleResolution">moduleResolution</a><span>, </span></code></li><li><code><a href="#moduleSuffixes">moduleSuffixes</a><span>, </span></code></li><li><code><a href="#noResolve">noResolve</a><span>, </span></code></li><li><code><a href="#noUncheckedSideEffectImports">noUncheckedSideEffectImports</a><span>, </span></code></li><li><code><a href="#paths">paths</a><span>, </span></code></li><li><code><a href="#resolveJsonModule">resolveJsonModule</a><span>, </span></code></li><li><code><a href="#resolvePackageJsonExports">resolvePackageJsonExports</a><span>, </span></code></li><li><code><a href="#resolvePackageJsonImports">resolvePackageJsonImports</a><span>, </span></code></li><li><code><a href="#rootDir">rootDir</a><span>, </span></code></li><li><code><a href="#rootDirs">rootDirs</a><span>, </span></code></li><li><code><a href="#typeRoots">typeRoots</a><span> and </span></code></li><li><code><a href="#types">types</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Emit_6246">Emit</h5><ol aria-labelledby="quick-nav-Emit_6246"><li><code><a href="#declaration">declaration</a><span>, </span></code></li><li><code><a href="#declarationDir">declarationDir</a><span>, </span></code></li><li><code><a href="#declarationMap">declarationMap</a><span>, </span></code></li><li><code><a href="#downlevelIteration">downlevelIteration</a><span>, </span></code></li><li><code><a href="#emitBOM">emitBOM</a><span>, </span></code></li><li><code><a href="#emitDeclarationOnly">emitDeclarationOnly</a><span>, </span></code></li><li><code><a href="#importHelpers">importHelpers</a><span>, </span></code></li><li><code><a href="#inlineSourceMap">inlineSourceMap</a><span>, </span></code></li><li><code><a href="#inlineSources">inlineSources</a><span>, </span></code></li><li><code><a href="#mapRoot">mapRoot</a><span>, </span></code></li><li><code><a href="#newLine">newLine</a><span>, </span></code></li><li><code><a href="#noEmit">noEmit</a><span>, </span></code></li><li><code><a href="#noEmitHelpers">noEmitHelpers</a><span>, </span></code></li><li><code><a href="#noEmitOnError">noEmitOnError</a><span>, </span></code></li><li><code><a href="#outDir">outDir</a><span>, </span></code></li><li><code><a href="#outFile">outFile</a><span>, </span></code></li><li><code><a href="#preserveConstEnums">preserveConstEnums</a><span>, </span></code></li><li><code><a href="#removeComments">removeComments</a><span>, </span></code></li><li><code><a href="#sourceMap">sourceMap</a><span>, </span></code></li><li><code><a href="#sourceRoot">sourceRoot</a><span> and </span></code></li><li><code><a href="#stripInternal">stripInternal</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-JavaScript_Support_6247">JavaScript Support</h5><ol aria-labelledby="quick-nav-JavaScript_Support_6247"><li><code><a href="#allowJs">allowJs</a><span>, </span></code></li><li><code><a href="#checkJs">checkJs</a><span> and </span></code></li><li><code><a href="#maxNodeModuleJsDepth">maxNodeModuleJsDepth</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Editor_Support_6249">Editor Support</h5><ol aria-labelledby="quick-nav-Editor_Support_6249"><li><code><a href="#disableSizeLimit">disableSizeLimit</a><span> and </span></code></li><li><code><a href="#plugins">plugins</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Interop_Constraints_6252">Interop Constraints</h5><ol aria-labelledby="quick-nav-Interop_Constraints_6252"><li><code><a href="#allowSyntheticDefaultImports">allowSyntheticDefaultImports</a><span>, </span></code></li><li><code><a href="#esModuleInterop">esModuleInterop</a><span>, </span></code></li><li><code><a href="#forceConsistentCasingInFileNames">forceConsistentCasingInFileNames</a><span>, </span></code></li><li><code><a href="#isolatedDeclarations">isolatedDeclarations</a><span>, </span></code></li><li><code><a href="#isolatedModules">isolatedModules</a><span>, </span></code></li><li><code><a href="#preserveSymlinks">preserveSymlinks</a><span> and </span></code></li><li><code><a href="#verbatimModuleSyntax">verbatimModuleSyntax</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Backwards_Compatibility_6253">Backwards Compatibility</h5><ol aria-labelledby="quick-nav-Backwards_Compatibility_6253"><li><code><a href="#charset">charset</a><span>, </span></code></li><li><code><a href="#importsNotUsedAsValues">importsNotUsedAsValues</a><span>, </span></code></li><li><code><a href="#keyofStringsOnly">keyofStringsOnly</a><span>, </span></code></li><li><code><a href="#noImplicitUseStrict">noImplicitUseStrict</a><span>, </span></code></li><li><code><a href="#noStrictGenericChecks">noStrictGenericChecks</a><span>, </span></code></li><li><code><a href="#out">out</a><span>, </span></code></li><li><code><a href="#preserveValueImports">preserveValueImports</a><span>, </span></code></li><li><code><a href="#suppressExcessPropertyErrors">suppressExcessPropertyErrors</a><span> and </span></code></li><li><code><a href="#suppressImplicitAnyIndexErrors">suppressImplicitAnyIndexErrors</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Language_and_Environment_6254">Language and Environment</h5><ol aria-labelledby="quick-nav-Language_and_Environment_6254"><li><code><a href="#emitDecoratorMetadata">emitDecoratorMetadata</a><span>, </span></code></li><li><code><a href="#experimentalDecorators">experimentalDecorators</a><span>, </span></code></li><li><code><a href="#jsx">jsx</a><span>, </span></code></li><li><code><a href="#jsxFactory">jsxFactory</a><span>, </span></code></li><li><code><a href="#jsxFragmentFactory">jsxFragmentFactory</a><span>, </span></code></li><li><code><a href="#jsxImportSource">jsxImportSource</a><span>, </span></code></li><li><code><a href="#lib">lib</a><span>, </span></code></li><li><code><a href="#moduleDetection">moduleDetection</a><span>, </span></code></li><li><code><a href="#noLib">noLib</a><span>, </span></code></li><li><code><a href="#reactNamespace">reactNamespace</a><span>, </span></code></li><li><code><a href="#target">target</a><span> and </span></code></li><li><code><a href="#useDefineForClassFields">useDefineForClassFields</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Compiler_Diagnostics_6251">Compiler Diagnostics</h5><ol aria-labelledby="quick-nav-Compiler_Diagnostics_6251"><li><code><a href="#diagnostics">diagnostics</a><span>, </span></code></li><li><code><a href="#explainFiles">explainFiles</a><span>, </span></code></li><li><code><a href="#extendedDiagnostics">extendedDiagnostics</a><span>, </span></code></li><li><code><a href="#generateCpuProfile">generateCpuProfile</a><span>, </span></code></li><li><code><a href="#generateTrace">generateTrace</a><span>, </span></code></li><li><code><a href="#listEmittedFiles">listEmittedFiles</a><span>, </span></code></li><li><code><a href="#listFiles">listFiles</a><span>, </span></code></li><li><code><a href="#noCheck">noCheck</a><span> and </span></code></li><li><code><a href="#traceResolution">traceResolution</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Projects_6255">Projects</h5><ol aria-labelledby="quick-nav-Projects_6255"><li><code><a href="#composite">composite</a><span>, </span></code></li><li><code><a href="#disableReferencedProjectLoad">disableReferencedProjectLoad</a><span>, </span></code></li><li><code><a href="#disableSolutionSearching">disableSolutionSearching</a><span>, </span></code></li><li><code><a href="#disableSourceOfProjectReferenceRedirect">disableSourceOfProjectReferenceRedirect</a><span>, </span></code></li><li><code><a href="#incremental">incremental</a><span> and </span></code></li><li><code><a href="#tsBuildInfoFile">tsBuildInfoFile</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Output_Formatting_6256">Output Formatting</h5><ol aria-labelledby="quick-nav-Output_Formatting_6256"><li><code><a href="#noErrorTruncation">noErrorTruncation</a><span>, </span></code></li><li><code><a href="#preserveWatchOutput">preserveWatchOutput</a><span> and </span></code></li><li><code><a href="#pretty">pretty</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Completeness_6257">Completeness</h5><ol aria-labelledby="quick-nav-Completeness_6257"><li><code><a href="#skipDefaultLibCheck">skipDefaultLibCheck</a><span> and </span></code></li><li><code><a href="#skipLibCheck">skipLibCheck</a></code></li></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Command_line_Options_6171">Command Line</h5><ol aria-labelledby="quick-nav-Command_line_Options_6171"></ol></div><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-Watch_and_Build_Modes_6250">Watch Options</h5><ol aria-labelledby="quick-nav-Watch_and_Build_Modes_6250"><li><code><a href="#assumeChangesOnlyAffectDirectDependencies">assumeChangesOnlyAffectDirectDependencies</a></code></li></ol></div></div><div class="tsconfig-quick-nav grouped"><h4><code><a href="#watchOptions">"<!-- -->watchOptions<!-- -->"</a></code></h4><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-watchOptions">watchOptions</h5><ol aria-labelledby="quick-nav-watchOptions"><li><code><a href="#watch-watchFile">watchFile</a><span>, </span></code></li><li><code><a href="#watch-watchDirectory">watchDirectory</a><span>, </span></code></li><li><code><a href="#watch-fallbackPolling">fallbackPolling</a><span>, </span></code></li><li><code><a href="#watch-synchronousWatchDirectory">synchronousWatchDirectory</a><span>, </span></code></li><li><code><a href="#watch-excludeDirectories">excludeDirectories</a><span> and </span></code></li><li><code><a href="#watch-excludeFiles">excludeFiles</a></code></li></ol></div></div><div class="tsconfig-quick-nav grouped"><h4><code><a href="#typeAcquisition">"<!-- -->typeAcquisition<!-- -->"</a></code></h4><div class="tsconfig-quick-nav-category"><h5 id="quick-nav-typeAcquisition">typeAcquisition</h5><ol aria-labelledby="quick-nav-typeAcquisition"><li><code><a href="#type-enable">enable</a><span>, </span></code></li><li><code><a href="#type-include">include</a><span>, </span></code></li><li><code><a href="#type-exclude">exclude</a><span> and </span></code></li><li><code><a href="#type-disableFilenameBasedTypeAcquisition">disableFilenameBasedTypeAcquisition</a></code></li></ol></div></div></div><div><div class="tsconfig raised main-content-block markdown"><article id='Top Level'> <h3 id="root-fields" style="position:relative;"><a href="#root-fields" aria-label="root fields permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Root Fields</h3> <p>Starting up are the root options in the TSConfig - these options relate to how your TypeScript or JavaScript project is set up.</p> <div> <section class='compiler-option'> <h3 id='files-config'><a aria-label="Link to the compiler option: files" id='files' href='#files' name='files' aria-labelledby="files-config">#</a> Files - <code>files</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specifies an allowlist of files to include in the program. An error occurs if any of the files can’t be found.</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {},</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#files'><data-lsp lsp="Include a list of files. This does not support glob patterns, as opposed to [`include`](#include).">files</data-lsp></a>"</span><span style="color: #000000">: [</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"core.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"sys.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"types.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"scanner.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"parser.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"utilities.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"binder.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"checker.ts"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"tsc.ts"</span></div><div class='line'><span style="color: #000000"> ]</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>This is useful when you only have a small number of files and don’t need to use a glob to reference many files. If you need that then use <a href="#include"><code>include</code></a>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>false</code></p> </li> <li><span>Related:</span><ul><li><p><a href='#include' aria-label="Jump to compiler option info for include" ><code>include</code></a></p> </li><li><p><a href='#exclude' aria-label="Jump to compiler option info for exclude" ><code>exclude</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='extends-config'><a aria-label="Link to the compiler option: extends" id='extends' href='#extends' name='extends' aria-labelledby="extends-config">#</a> Extends - <code>extends</code></h3> <div class='compiler-content'> <div class='markdown'> <p>The value of <code>extends</code> is a string which contains a path to another configuration file to inherit from. The path may use Node.js style resolution.</p> <p>The configuration from the base file are loaded first, then overridden by those in the inheriting config file. All relative paths found in the configuration file will be resolved relative to the configuration file they originated in.</p> <p>It’s worth noting that <a href="#files"><code>files</code></a>, <a href="#include"><code>include</code></a>, and <a href="#exclude"><code>exclude</code></a> from the inheriting config file <em>overwrite</em> those from the base config file, and that circularity between configuration files is not allowed.</p> <p>Currently, the only top-level property that is excluded from inheritance is <a href="#references"><code>references</code></a>.</p> <h5 id="example" style="position:relative;"><a href="#example" aria-label="example permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h5> <p><code>configs/base.json</code>:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#noImplicitAny'><data-lsp lsp="Enable error reporting for expressions and declarations with an implied `any` type.">noImplicitAny</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#strictNullChecks'><data-lsp lsp="When type checking, take into account `null` and `undefined`.">strictNullChecks</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p><code>tsconfig.json</code>:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#extends'><data-lsp lsp="Specify one or more path or node module references to base configuration files from which settings are inherited.">extends</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"./configs/base"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#files'><data-lsp lsp="Include a list of files. This does not support glob patterns, as opposed to [`include`](#include).">files</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"main.ts"</span><span style="color: #000000">, </span><span style="color: #A31515">"supplemental.ts"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p><code>tsconfig.nostrictnull.json</code>:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#extends'><data-lsp lsp="Specify one or more path or node module references to base configuration files from which settings are inherited.">extends</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"./tsconfig"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#strictNullChecks'><data-lsp lsp="When type checking, take into account `null` and `undefined`.">strictNullChecks</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">false</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Properties with relative paths found in the configuration file, which aren’t excluded from inheritance, will be resolved relative to the configuration file they originated in.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>false</code></p> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.1" href="/docs/handbook/release-notes/typescript-2-1.html">2.1</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='include-config'><a aria-label="Link to the compiler option: include" id='include' href='#include' name='include' aria-labelledby="include-config">#</a> Include - <code>include</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specifies an array of filenames or patterns to include in the program. These filenames are resolved relative to the directory containing the <code>tsconfig.json</code> file.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">json</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"include"</span><span style="color: #000000">: [</span><span style="color: #A31515">"src/**/*"</span><span style="color: #000000">, </span><span style="color: #A31515">"tests/**/*"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Which would include:</p> <!-- TODO: #135 ```diff . - ├── scripts - │ ├── lint.ts - │ ├── update_deps.ts - │ └── utils.ts + ├── src + │ ├── client + │ │ ├── index.ts + │ │ └── utils.ts + │ ├── server + │ │ └── index.ts + ├── tests + │ ├── app.test.ts + │ ├── utils.ts + │ └── tests.d.ts - ├── package.json - ├── tsconfig.json - └── yarn.lock ``` --> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">.</span></div><div class='line'><span style="color: undefined">├── scripts ⨯</span></div><div class='line'><span style="color: undefined">│ ├── lint.ts ⨯</span></div><div class='line'><span style="color: undefined">│ ├── update_deps.ts ⨯</span></div><div class='line'><span style="color: undefined">│ └── utils.ts ⨯</span></div><div class='line'><span style="color: undefined">├── src ✓</span></div><div class='line'><span style="color: undefined">│ ├── client ✓</span></div><div class='line'><span style="color: undefined">│ │ ├── index.ts ✓</span></div><div class='line'><span style="color: undefined">│ │ └── utils.ts ✓</span></div><div class='line'><span style="color: undefined">│ ├── server ✓</span></div><div class='line'><span style="color: undefined">│ │ └── index.ts ✓</span></div><div class='line'><span style="color: undefined">├── tests ✓</span></div><div class='line'><span style="color: undefined">│ ├── app.test.ts ✓</span></div><div class='line'><span style="color: undefined">│ ├── utils.ts ✓</span></div><div class='line'><span style="color: undefined">│ └── tests.d.ts ✓</span></div><div class='line'><span style="color: undefined">├── package.json</span></div><div class='line'><span style="color: undefined">├── tsconfig.json</span></div><div class='line'><span style="color: undefined">└── yarn.lock</span></div></code></div></pre> <p><code>include</code> and <code>exclude</code> support wildcard characters to make glob patterns:</p> <ul> <li><code>*</code> matches zero or more characters (excluding directory separators)</li> <li><code>?</code> matches any one character (excluding directory separators)</li> <li><code>**/</code> matches any directory nested to any level</li> </ul> <p>If the last path segment in a pattern does not contain a file extension or wildcard character, then it is treated as a directory, and files with supported extensions inside that directory are included (e.g. <code>.ts</code>, <code>.tsx</code>, and <code>.d.ts</code> by default, with <code>.js</code> and <code>.jsx</code> if <a href="#allowJs"><code>allowJs</code></a> is set to true).</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>[]</code> if <a href="#files"><code>files</code></a> is specified; <code>**/*</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#files' aria-label="Jump to compiler option info for files" ><code>files</code></a></p> </li><li><p><a href='#exclude' aria-label="Jump to compiler option info for exclude" ><code>exclude</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='exclude-config'><a aria-label="Link to the compiler option: exclude" id='exclude' href='#exclude' name='exclude' aria-labelledby="exclude-config">#</a> Exclude - <code>exclude</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specifies an array of filenames or patterns that should be skipped when resolving <a href="#include"><code>include</code></a>.</p> <p><strong>Important</strong>: <code>exclude</code> <em>only</em> changes which files are included as a result of the <a href="#include"><code>include</code></a> setting. A file specified by <code>exclude</code> can still become part of your codebase due to an <code>import</code> statement in your code, a <code>types</code> inclusion, a <code>/// <reference</code> directive, or being specified in the <a href="#files"><code>files</code></a> list.</p> <p>It is not a mechanism that <strong>prevents</strong> a file from being included in the codebase - it simply changes what the <a href="#include"><code>include</code></a> setting finds.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p>node_modules bower_components jspm_packages <a href="#outDir"><code>outDir</code></a></p> </li> <li><span>Related:</span><ul><li><p><a href='#include' aria-label="Jump to compiler option info for include" ><code>include</code></a></p> </li><li><p><a href='#files' aria-label="Jump to compiler option info for files" ><code>files</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='references-config'><a aria-label="Link to the compiler option: references" id='references' href='#references' name='references' aria-labelledby="references-config">#</a> References - <code>references</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Project references are a way to structure your TypeScript programs into smaller pieces. Using Project References can greatly improve build and editor interaction times, enforce logical separation between components, and organize your code in new and improved ways.</p> <p>You can read more about how references works in the <a href="/docs/handbook/project-references.html">Project References</a> section of the handbook</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>false</code></p> </li></ul> </div></section> </div> </article></div> <div class="tsconfig raised main-content-block markdown"><article id='compilerOptions'> <h3 id="compiler-options" style="position:relative;"><a href="#compiler-options" aria-label="compiler options permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Compiler Options</h3> <p>These options make up the bulk of TypeScript’s configuration and it covers how the language should work.</p> <nav id="sticky" aria-label="Compiler options"><ul> <li><a href="#Type_Checking_6248">Type Checking</a></li> <li><a href="#Modules_6244">Modules</a></li> <li><a href="#Emit_6246">Emit</a></li> <li><a href="#JavaScript_Support_6247">JavaScript Support</a></li> <li><a href="#Editor_Support_6249">Editor Support</a></li> <li><a href="#Interop_Constraints_6252">Interop Constraints</a></li> <li><a href="#Backwards_Compatibility_6253">Backwards Compatibility</a></li> <li><a href="#Language_and_Environment_6254">Language and Environment</a></li> <li><a href="#Compiler_Diagnostics_6251">Compiler Diagnostics</a></li> <li><a href="#Projects_6255">Projects</a></li> <li><a href="#Output_Formatting_6256">Output Formatting</a></li> <li><a href="#Completeness_6257">Completeness</a></li> <li><a href="#Command_line_Options_6171">Command Line</a></li> <li><a href="#Watch_and_Build_Modes_6250">Watch Options</a></li> </ul></nav> <div> <div class='category'> <h2 id='Type_Checking_6248' ><a href='#Type_Checking_6248' name='Type_Checking_6248' aria-label="Link to the section Type Checking" aria-labelledby='Type_Checking_6248'>#</a>Type Checking</h2> </div> <section class='compiler-option'> <h3 id='allowUnreachableCode-config'><a aria-label="Link to the compiler option: allowUnreachableCode" id='allowUnreachableCode' href='#allowUnreachableCode' name='allowUnreachableCode' aria-labelledby="allowUnreachableCode-config">#</a> Allow Unreachable Code - <code>allowUnreachableCode</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When:</p> <ul> <li><code>undefined</code> (default) provide suggestions as warnings to editors</li> <li><code>true</code> unreachable code is ignored</li> <li><code>false</code> raises compiler errors about unreachable code</li> </ul> <p>These warnings are only about code which is provably unreachable due to the use of JavaScript syntax, for example:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">fn</span><span style="color: #000000">(</span><span style="color: #001080">n</span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">n</span><span style="color: #000000"> > </span><span style="color: #098658">5</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">false</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>With <code>"allowUnreachableCode": false</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(n: number): boolean' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) n: number' >n</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) n: number' >n</data-lsp></span><span style="color: #000000"> > </span><span style="color: #098658">5</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">false</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000">;</span></div><span class="error"><span>Unreachable code detected.</span><span class="code">7027</span></span><span class="error-behind">Unreachable code detected.</span><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygOwAYBMaBQIIBDAG2LgHcBVAO2kkIGMALQgI2MgGE4ATSVAGYlEkXAICu1BgBcAlnGqgB1ABTVU1cQFtWMAJSgA3rlChZA0GtAA+UAFYDx06brTx0RdOjjIAbhOgAL6gkMQiRgEukG4eSsJ+AYEBru6e3gmBQA'>Try</a></div></pre> <p>This does not affect errors on the basis of code which <em>appears</em> to be unreachable due to type analysis.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.8" href="/docs/handbook/release-notes/typescript-1-8.html">1.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='allowUnusedLabels-config'><a aria-label="Link to the compiler option: allowUnusedLabels" id='allowUnusedLabels' href='#allowUnusedLabels' name='allowUnusedLabels' aria-labelledby="allowUnusedLabels-config">#</a> Allow Unused Labels - <code>allowUnusedLabels</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When:</p> <ul> <li><code>undefined</code> (default) provide suggestions as warnings to editors</li> <li><code>true</code> unused labels are ignored</li> <li><code>false</code> raises compiler errors about unused labels</li> </ul> <p>Labels are very rare in JavaScript and typically indicate an attempt to write an object literal:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verifyAge(age: number): void' >verifyAge</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) age: number' >age</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Forgot 'return' statement</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) age: number' >age</data-lsp></span><span style="color: #000000"> > </span><span style="color: #098658">18</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> <data-err>verified</data-err>: </span><span style="color: #0000FF">true</span><span style="color: #000000">;</span></div><span class="error"><span>Unused label.</span><span class="code">7028</span></span><span class="error-behind">Unused label.</span><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygOwAYBMAOAUCBAIYA2JcA7gKoB2AropACYAyRARpCSqAGamM8vOjQDGAFwCWcGqABuMSbwCeAQQDmkABRFNqegFtO0AJSgA3nlChCAMQTq440AHJokcXWg0XoROKJxSANIGnErUCVQHU1QAD5QAEYcM0trawVoJUlmVHFoOkgAbgiAXzxSoA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.8" href="/docs/handbook/release-notes/typescript-1-8.html">1.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='alwaysStrict-config'><a aria-label="Link to the compiler option: alwaysStrict" id='alwaysStrict' href='#alwaysStrict' name='alwaysStrict' aria-labelledby="alwaysStrict-config">#</a> Always Strict - <code>alwaysStrict</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Ensures that your files are parsed in the ECMAScript strict mode, and emit “use strict” for each source file.</p> <p><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode">ECMAScript strict</a> mode was introduced in ES5 and provides behavior tweaks to the runtime of the JavaScript engine to improve performance, and makes a set of errors throw instead of silently ignoring them.</p> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.1" href="/docs/handbook/release-notes/typescript-2-1.html">2.1</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='exactOptionalPropertyTypes-config'><a aria-label="Link to the compiler option: exactOptionalPropertyTypes" id='exactOptionalPropertyTypes' href='#exactOptionalPropertyTypes' name='exactOptionalPropertyTypes' aria-labelledby="exactOptionalPropertyTypes-config">#</a> Exact Optional Property Types - <code>exactOptionalPropertyTypes</code></h3> <div class='compiler-content'> <div class='markdown'> <p>With exactOptionalPropertyTypes enabled, TypeScript applies stricter rules around how it handles properties on <code>type</code> or <code>interfaces</code> which have a <code>?</code> prefix.</p> <p>For example, this interface declares that there is a property which can be one of two strings: ‘dark’ or ‘light’ or it should not be in the object.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">interface</span><span style="color: #000000"> </span><span style="color: #1C6277">UserDefaults</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// The absence of a value represents 'system'</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">colorThemeOverride</span><span style="color: #000000">?: </span><span style="color: #A31515">"dark"</span><span style="color: #000000"> | </span><span style="color: #A31515">"light"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Without this flag enabled, there are three values which you can set <code>colorThemeOverride</code> to be: “dark”, “light” and <code>undefined</code>.</p> <p>Setting the value to <code>undefined</code> will allow most JavaScript runtime checks for the existence to fail, which is effectively falsy. However, this isn’t quite accurate; <code>colorThemeOverride: undefined</code> is not the same as <code>colorThemeOverride</code> not being defined. For example, <code>"colorThemeOverride" in settings</code> would have different behavior with <code>undefined</code> as the key compared to not being defined.</p> <p><code>exactOptionalPropertyTypes</code> makes TypeScript truly enforce the definition provided as an optional property:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const settings: UserDefaults' >settings</data-lsp></span><span style="color: #000000"> = </span><span style="color: #795E26"><data-lsp lsp='function getUserSettings(): UserDefaults' >getUserSettings</data-lsp></span><span style="color: #000000">();</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: UserDefaults' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) UserDefaults.colorThemeOverride?: "dark" | "light"' >colorThemeOverride</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"dark"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: UserDefaults' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) UserDefaults.colorThemeOverride?: "dark" | "light"' >colorThemeOverride</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"light"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// But not:</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: UserDefaults' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) UserDefaults.colorThemeOverride?: "dark" | "light"' >colorThemeOverride</data-lsp></span><span style="color: #000000"> = </span><span style="color: #0000FF"><data-lsp lsp='var undefined' >undefined</data-lsp></span><span style="color: #000000">;</span></div><span class="error"><span>Type 'undefined' is not assignable to type '"dark" | "light"' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target.</span><span class="code">2412</span></span><span class="error-behind">Type 'undefined' is not assignable to type '"dark" | "light"' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMA8EMGMAuB5ADoglgewHawDYAKATlqpMYgJ4AqV5AzgFAgQWnEMBcoATAMy9efACwBGXkww5EFAGYJIoAKoMKAEUgKArvkQNQAbyahQ8LPizEaAC0gBbSMgBu7DABNIAfh4Aid7DEANa+oAA+oL74GADmNoi+ANxMAL5MnvD4gUpy2jhI2DigMZCIqhQAyqWYODEMABQAlDzlxJo6egzJrAC0ffDaiH09TOY4DIigaog1daAAvMWlrVUz0nVNydOzDAB05pbWdo4ubp4LkQHBSUzb63sHVrYOTq7ExB5Ki1Gx8TcsYAAQoNQDgsIguLdqvd9hYnsdXmcvqA8p45NJIO5EkA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.4" href="/docs/handbook/release-notes/typescript-4-4.html">4.4</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noFallthroughCasesInSwitch-config'><a aria-label="Link to the compiler option: noFallthroughCasesInSwitch" id='noFallthroughCasesInSwitch' href='#noFallthroughCasesInSwitch' name='noFallthroughCasesInSwitch' aria-labelledby="noFallthroughCasesInSwitch-config">#</a> No Fallthrough Cases In Switch - <code>noFallthroughCasesInSwitch</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Report errors for fallthrough cases in switch statements. Ensures that any non-empty case inside a switch statement includes either <code>break</code>, <code>return</code>, or <code>throw</code>. This means you won’t accidentally ship a case fallthrough bug.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const a: number' >a</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000"> = </span><span style="color: #098658">6</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #AF00DB">switch</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='const a: number' >a</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">:</span></div><span class="error"><span>Fallthrough case in switch.</span><span class="code">7029</span></span><span class="error-behind">Fallthrough case in switch.</span><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"even"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #098658">1</span><span style="color: #000000">:</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"odd"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">break</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsDEEMA2iAuALATtArgczQMLwDOApsQJKQDKA7gJYoDGaAUCBKRlhsQFygA7AAYATAE5WTaJGIpQ8AZGwBbAEZdQAXlAA2ANytWxBszSgAFPACUoAN6tQoJiVKhhfR0+czi0RKQAdIjQuBYARKQAbqSQ4daGTi5koACMnt4+sv5BIWHh0AAmhfGJ3moYpPAA1oYAvkA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.8" href="/docs/handbook/release-notes/typescript-1-8.html">1.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noImplicitAny-config'><a aria-label="Link to the compiler option: noImplicitAny" id='noImplicitAny' href='#noImplicitAny' name='noImplicitAny' aria-labelledby="noImplicitAny-config">#</a> No Implicit Any - <code>noImplicitAny</code></h3> <div class='compiler-content'> <div class='markdown'> <p>In some cases where no type annotations are present, TypeScript will fall back to a type of <code>any</code> for a variable when it cannot infer the type.</p> <p>This can cause some errors to be missed, for example:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(s: any): void' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) s: any' >s</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// No error?</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) s: any' >s</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='any' >subtr</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">3</span><span style="color: #000000">));</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #795E26"><data-lsp lsp='function fn(s: any): void' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">42</span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsEkFsAOAbAlgY1QFwIKQJ4BcoAZgIbIDOApgFAkCuk6Wq0kpkAFJQJSgBvWqFAhQAOWihqAJxnQZAfmGh07StGTUAdMmgBzHtsoMARlhlcAzL14BuWgF963ACwAme0A'>Try</a></div></pre> <p>Turning on <code>noImplicitAny</code> however TypeScript will issue an error whenever it would have inferred <code>any</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(s: any): void' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-err><data-lsp lsp='(parameter) s: any' >s</data-lsp></data-err></span><span style="color: #000000">) {</span></div><span class="error"><span>Parameter 's' implicitly has an 'any' type.</span><span class="code">7006</span></span><span class="error-behind">Parameter 's' implicitly has an 'any' type.</span><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) s: any' >s</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='any' >subtr</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">3</span><span style="color: #000000">));</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygOwAYMDYBQAzAVwDsBjAFwEs5jR9iAKRASlAG9dRRSbE4AbSADp+cAOZMhiQgCNy0BgGZmzANy4AvkA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='noImplicitOverride-config'><a aria-label="Link to the compiler option: noImplicitOverride" id='noImplicitOverride' href='#noImplicitOverride' name='noImplicitOverride' aria-labelledby="noImplicitOverride-config">#</a> No Implicit Override - <code>noImplicitOverride</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When working with classes which use inheritance, it’s possible for a sub-class to get “out of sync” with the functions it overloads when they are renamed in the base class.</p> <p>For example, imagine you are modeling a music album syncing system:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) Album.download(): void' >download</data-lsp></span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Default behavior</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class SharedAlbum' >SharedAlbum</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) SharedAlbum.download(): void' >download</data-lsp></span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Override to get info from many sources</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/MYGwhgzhAECCICMCuBbaBvAUNaATA9gO4B2I+YuAFAJQbY7QD0j0AIgKYBmYSIALtATsAFmABuAS3wAnegF9MCzKEgwAyqOntc8ZGnYAPPu2K4Yu1HRwESZCjSsNm0APJj206RNztoffNAA5uwCEsScAZzS+GgoYMQAntAQ+EjSwOwQ8opAA'>Try</a></div></pre> <p>Then when you add support for machine-learning generated playlists, you refactor the <code>Album</code> class to have a ‘setup’ function instead:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) Album.setup(): void' >setup</data-lsp></span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Default behavior</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class MLAlbum' >MLAlbum</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) MLAlbum.setup(): void' >setup</data-lsp></span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Override to get info from algorithm</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class SharedAlbum' >SharedAlbum</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) SharedAlbum.download(): void' >download</data-lsp></span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Override to get info from many sources</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/MYGwhgzhAECCICMCuBbaBvAUNaECmALkgA4AUAlBtjtAPS3QAieAZmEiAdAngBZgA3AJYB7AE7UAvpmmZQkGAFkAMvGRo8ADwJ4AdgBMYa1FRz4iZSlhp0GAeQF4xYofrzQCI6AHNC0IbosXixiImhgIN7iQgS8KFIymHLgUNAAyvxiePrGGtp6hnCIJtbQ+iIA7rogImD6FKY09NAOTi5uHl6+XAFB0CFh0ChgugCeuCJIYsB4EAmSQA'>Try</a></div></pre> <p>In this case, TypeScript has provided no warning that <code>download</code> on <code>SharedAlbum</code> <em>expected</em> to override a function in the base class.</p> <p>Using <code>noImplicitOverride</code> you can ensure that the sub-classes never go out of sync, by ensuring that functions which override include the keyword <code>override</code>.</p> <p>The following example has <code>noImplicitOverride</code> enabled, and you can see the error received when <code>override</code> is missing:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) Album.setup(): void' >setup</data-lsp></span><span style="color: #000000">() {}</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class MLAlbum' >MLAlbum</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">override</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) MLAlbum.setup(): void' >setup</data-lsp></span><span style="color: #000000">() {}</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class SharedAlbum' >SharedAlbum</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-err><data-lsp lsp='(method) SharedAlbum.setup(): void' >setup</data-lsp></data-err></span><span style="color: #000000">() {}</span></div><span class="error"><span>This member must have an 'override' modifier because it overrides a member in the base class 'Album'.</span><span class="code">4114</span></span><span class="error-behind">This member must have an 'override' modifier because it overrides a member in the base class 'Album'.</span><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsEkFsAOAbAlgY1QFwPIDcBTAJyNQBMCAoECYo6IgZwC5QAWARg7cvWQENGjUAEFkAIwCu8UAG9KoUIwJZJiABQBKOQF9Ke3gKGgAsgBkxUmQQAeWApDLDL0uQtDRCJcgSUq1Wrr6lIaCwgDKABb8RARkLtZ2Dk6iEq7yisqqGtqyejpAA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.3" href="/docs/handbook/release-notes/typescript-4-3.html">4.3</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noImplicitReturns-config'><a aria-label="Link to the compiler option: noImplicitReturns" id='noImplicitReturns' href='#noImplicitReturns' name='noImplicitReturns' aria-labelledby="noImplicitReturns-config">#</a> No Implicit Returns - <code>noImplicitReturns</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When enabled, TypeScript will check all code paths in a function to ensure they return a value.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function lookupHeadphonesManufacturer(color: "blue" | "black"): string' >lookupHeadphonesManufacturer</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) color: "blue" | "black"' >color</data-lsp></span><span style="color: #000000">: </span><span style="color: #A31515">"blue"</span><span style="color: #000000"> | </span><span style="color: #A31515">"black"</span><span style="color: #000000">): </span><span style="color: #1C6277"><data-err>string</data-err></span><span style="color: #000000"> {</span></div><span class="error"><span>Function lacks ending return statement and return type does not include 'undefined'.</span><span class="code">2366</span></span><span class="error-behind">Function lacks ending return statement and return type does not include 'undefined'.</span><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) color: "blue" | "black"' >color</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"blue"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #A31515">"beats"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> (</span><span style="color: #A31515">"bose"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYBsX0bWgFABmArgHYDGALgJZzmgA2ccA1qQA4ASkAhgBNOACwaREAWT7lSxPjVLQYACkpwW0VACIARk1KQtoAD6hdTeWy0BKVImrRa5AOagA3oVChaxUKvUIoAC8IWZ6Bjbunl6gStSKjLr81IhaANzRAL6gkEyIkFExfrpw+TYZXpmEmUA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.8" href="/docs/handbook/release-notes/typescript-1-8.html">1.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noImplicitThis-config'><a aria-label="Link to the compiler option: noImplicitThis" id='noImplicitThis' href='#noImplicitThis' name='noImplicitThis' aria-labelledby="noImplicitThis-config">#</a> No Implicit This - <code>noImplicitThis</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Raise error on ‘this’ expressions with an implied ‘any’ type.</p> <p>For example, the class below returns a function which tries to access <code>this.width</code> and <code>this.height</code> – but the context for <code>this</code> inside the function inside <code>getAreaFunction</code> is not the instance of the Rectangle.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Rectangle' >Rectangle</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Rectangle.width: number' >width</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Rectangle.height: number' >height</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">constructor</span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) width: number' >width</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(parameter) height: number' >height</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) Rectangle.width: number' >width</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(parameter) width: number' >width</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) Rectangle.height: number' >height</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(parameter) height: number' >height</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'> </div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) Rectangle.getAreaFunction(): () => number' >getAreaFunction</data-lsp></span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> () {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF"><data-err>this</data-err></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >width</data-lsp></span><span style="color: #000000"> * </span><span style="color: #0000FF"><data-err>this</data-err></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >height</data-lsp></span><span style="color: #000000">;</span></div><span class="error"><span>'this' implicitly has type 'any' because it does not have a type annotation.</br>'this' implicitly has type 'any' because it does not have a type annotation.</span><span class="code">2683<br/>2683</span></span><span class="error-behind">'this' implicitly has type 'any' because it does not have a type annotation.</br>'this' implicitly has type 'any' because it does not have a type annotation.</span><div class='line'><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwDYAcBmAUAMYA2AhooqAEqQEAuJAdgOZGSgDeeooA7gJYATWgAtUDAK4BbAEYwA3F1DDIfJsNpips6AsUE4DRLWji6CABT8ho0BJkwANEpVqNtrTACUHRdxF9EADorEVAAXl5BEQVuP2EAwOVVdXDnZNoY0ABfPEUmSFoAQWhIEgAxcQY6PgNzb05Y0BLacWgGUAAzSuqDUDqfRu5m1vb-IJDhUAAqUDHEl3VM7izMnKygA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noPropertyAccessFromIndexSignature-config'><a aria-label="Link to the compiler option: noPropertyAccessFromIndexSignature" id='noPropertyAccessFromIndexSignature' href='#noPropertyAccessFromIndexSignature' name='noPropertyAccessFromIndexSignature' aria-labelledby="noPropertyAccessFromIndexSignature-config">#</a> No Property Access From Index Signature - <code>noPropertyAccessFromIndexSignature</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This setting ensures consistency between accessing a field via the “dot” (<code>obj.key</code>) syntax, and “indexed” (<code>obj["key"]</code>) and the way which the property is declared in the type.</p> <p>Without this flag, TypeScript will allow you to use the dot syntax to access fields which are not defined:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">interface</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='interface GameSettings' >GameSettings</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Known up-front properties</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) GameSettings.speed: "fast" | "medium" | "slow"' >speed</data-lsp></span><span style="color: #000000">: </span><span style="color: #A31515">"fast"</span><span style="color: #000000"> | </span><span style="color: #A31515">"medium"</span><span style="color: #000000"> | </span><span style="color: #A31515">"slow"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) GameSettings.quality: "high" | "low"' >quality</data-lsp></span><span style="color: #000000">: </span><span style="color: #A31515">"high"</span><span style="color: #000000"> | </span><span style="color: #A31515">"low"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Assume anything unknown to the interface</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// is a string.</span></div><div class='line'><span style="color: #000000"> [</span><span style="color: #001080"><data-lsp lsp='(parameter) key: string' >key</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">]: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000"> = </span><span style="color: #795E26"><data-lsp lsp='function getSettings(): GameSettings' >getSettings</data-lsp></span><span style="color: #000000">();</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) GameSettings.speed: "fast" | "medium" | "slow"' style='border-bottom: solid 2px lightgrey;'>speed</data-lsp></span><span style="color: #000000">;</span></div><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>(property) GameSettings.speed: "fast" | "medium" | "slow"</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) GameSettings.quality: "high" | "low"' style='border-bottom: solid 2px lightgrey;'>quality</data-lsp></span><span style="color: #000000">;</span></div><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>(property) GameSettings.quality: "high" | "low"</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Unknown key accessors are allowed on</span></div><div class='line'><span style="color: #008000">// this object, and are `string`</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(index) GameSettings[string]: string' style='border-bottom: solid 2px lightgrey;'>username</data-lsp></span><span style="color: #000000">;</span></div><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>(index) GameSettings[string]: string</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygCwEYsCgAmkBjAGwENpJQAzAVwDsCAXASzltAHNIGBlL529ogAUASlQBxEgFtIvBv0EBubCFABaDQWoMNa7E1oMYlEgQqSZchYlABvbKFCqA0rTgB3NtQAOayvENQb3hvGGZIRAdQRFDIXFQAIhNEBgTQAB9QBJlcJmopNMyExCIPBOVHAEdqEiImBgBPRIALJnZmwqzS93LsKNUAQUREfIoSWgaGVoFQOgBrN09QBjhl5ooDI2gTM36wJhsSaIZoA3YAOiiAbTnIJuPTgQBdVBTH9mUAXz6CVhTovhnGwAXg4XCsQNEykQgIEiHOMUgcWUqkcaNAAD0APzYGHyIHnaq1eoNFFgdGObF9VQAVVoCw8bFuDVApjMwwQh3IrKI3TioFYKjAUwOAoARgArQgMAA0rNouFZ3IABm8zsrcbDBOdqDDoLRpJAyRTKVigA'>Try</a></div></pre> <p>Turning the flag on will raise an error because the unknown field uses dot syntax instead of indexed syntax.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000"> = </span><span style="color: #795E26"><data-lsp lsp='function getSettings(): GameSettings' >getSettings</data-lsp></span><span style="color: #000000">();</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) GameSettings.speed: "fast" | "medium" | "slow"' >speed</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) GameSettings.quality: "high" | "low"' >quality</data-lsp></span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// This would need to be settings["username"];</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const settings: GameSettings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-err><data-lsp lsp='(index) GameSettings[string]: string' style='border-bottom: solid 2px lightgrey;'>username</data-lsp></data-err></span><span style="color: #000000">;</span></div><span class="error"><span>Property 'username' comes from an index signature, so it must be accessed with ['username'].</span><span class="code">4111</span></span><span class="error-behind">Property 'username' comes from an index signature, so it must be accessed with ['username'].</span><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>(index) GameSettings[string]: string</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygCwEYsCgQQHZwAK8ADjAC4CeAggMZ2SKIBi8AtgJL4AmkAHgGUAlgHN8AQwoBXaJGx86AGwlzQAM2n46FYXHyhRkCoOO78oxAAoAlKgDiE9pFMVzlgNzZh+CjHUSjKCOzq7uiKAA3tigoIjkkDyoAEQBiBTJoAA+oMnOPMLS7Jk5yYhKcADuyV6xAI7SEkrC1CkAFmJtJbkV1bWgANoA1pBUqOnQPqIAuuMUkxZeAL64YAC0G3TSFBtr2HT66XFmUxEAvIbGYae2XognFogAdPGQiXcPlk8NTS1UXqtQAAVDoRSpwaRKHigfBvaEUOCgABGkGOblOA2S0nu0EkzmS0w+6MeT2xMDxkC8eFiNNAAD0APxAA'>Try</a></div></pre> <p>The goal of this flag is to signal intent in your calling syntax about how certain you are this property exists.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.2" href="/docs/handbook/release-notes/typescript-4-2.html">4.2</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noUncheckedIndexedAccess-config'><a aria-label="Link to the compiler option: noUncheckedIndexedAccess" id='noUncheckedIndexedAccess' href='#noUncheckedIndexedAccess' name='noUncheckedIndexedAccess' aria-labelledby="noUncheckedIndexedAccess-config">#</a> No Unchecked Indexed Access - <code>noUncheckedIndexedAccess</code></h3> <div class='compiler-content'> <div class='markdown'> <p>TypeScript has a way to describe objects which have unknown keys but known values on an object, via index signatures.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">interface</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='interface EnvironmentVars' >EnvironmentVars</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) EnvironmentVars.NAME: string' >NAME</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) EnvironmentVars.OS: string' >OS</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Unknown properties are covered by this index signature.</span></div><div class='line'><span style="color: #000000"> [</span><span style="color: #001080"><data-lsp lsp='(parameter) propName: string' >propName</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">]: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='interface EnvironmentVars' >EnvironmentVars</data-lsp></span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Declared as existing</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const sysName: string' >sysName</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">.</span><span style="color: #0070C1"><data-lsp lsp='(property) EnvironmentVars.NAME: string' >NAME</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const os: string' style='border-bottom: solid 2px lightgrey;'>os</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">.</span><span style="color: #0070C1"><data-lsp lsp='(property) EnvironmentVars.OS: string' >OS</data-lsp></span><span style="color: #000000">;</span></div><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>const os: string</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Not declared, but because of the index</span></div><div class='line'><span style="color: #008000">// signature, then it is considered a string</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const nodeEnv: string' style='border-bottom: solid 2px lightgrey;'>nodeEnv</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">.</span><span style="color: #0070C1"><data-lsp lsp='(index) EnvironmentVars[string]: string' >NODE_ENV</data-lsp></span><span style="color: #000000">;</span></div><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>const nodeEnv: string</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgKIgG7CgexAWwnADU4oBnZAbwChlkA5AQQFlUAuZcsKUAcwDcdZAHkAyp268QgmsID085AFUQAaxA4A7iGQAHXHuhhgESmRQIcGaBAAmyAEYBPZGAAWwSqDsQAHlzAfCBwYACuUBAAdMIA2gY4egxwhJI8-AC6adKyAL5yvggANhbIViDcyEQYnOhYuAREYKQUQjSKyAAiEMUWDnCU-l4mMjTlleTO5MmEyAC8VZhRzGxC42DIOJQL1VHiQh30yAB6APxyHQw4G4UlkXYANE5hG449cGHkKDgwbu4oPn87SU5CCIXCkSeHiIyGAGy8ZTwoN892QcC46VG62Qml8dXmiwwyxEnVQAH1UAxiAclEczkA'>Try</a></div></pre> <p>Turning on <code>noUncheckedIndexedAccess</code> will add <code>undefined</code> to any un-declared field in the type.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='interface EnvironmentVars' >EnvironmentVars</data-lsp></span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Declared as existing</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const sysName: string' >sysName</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">.</span><span style="color: #0070C1"><data-lsp lsp='(property) EnvironmentVars.NAME: string' >NAME</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const os: string' style='border-bottom: solid 2px lightgrey;'>os</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">.</span><span style="color: #0070C1"><data-lsp lsp='(property) EnvironmentVars.OS: string' >OS</data-lsp></span><span style="color: #000000">;</span></div><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>const os: string</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Not declared, but because of the index</span></div><div class='line'><span style="color: #008000">// signature, then it is considered a string</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const nodeEnv: string | undefined' style='border-bottom: solid 2px lightgrey;'>nodeEnv</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const env: EnvironmentVars' >env</data-lsp></span><span style="color: #000000">.</span><span style="color: #0070C1"><data-lsp lsp='(index) EnvironmentVars[string]: string | undefined' >NODE_ENV</data-lsp></span><span style="color: #000000">;</span></div><div class='meta-line'><span class='popover-prefix'> </span><span class='popover'><div class='arrow'></div>const nodeEnv: string | undefined</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgKIgG7CgexAWwnADU4oBnZAbwChlkA5AQQFlUAuZcsKUAcwDcdZAHkAyp268QgmsID085AFUQAaxA4A7iGQAHXHuhhgESmRQIcGaBAAmyAEYBPZGAAWwSqDsQAHlzAfCBwYACuUBAAdMIA2gY4egxwhJI8-AC6adKyAL40isgAApqqCO4QCGr2AJIgvn72TAhI5OQFSgC03QhhYN2dNL4IADYWyFYg3MhEGJzoWLgERGCkFEIdyAAilWORDnCU-l4mMjST0+TO5MmEyAC8M5hRzGxCF2DIOJSPs1HiQkK9GQAD0APxyQoMHCfYZ7ewAGicfSclTgYXIKBwMDcFWQPn8m3IQRC4UiSI8RHxny8EzwxN8+2QcC46TOH2Qml8CweTwwLxEW1QAH1UAxiIClMDwUA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.1" href="/docs/handbook/release-notes/typescript-4-1.html">4.1</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noUnusedLocals-config'><a aria-label="Link to the compiler option: noUnusedLocals" id='noUnusedLocals' href='#noUnusedLocals' name='noUnusedLocals' aria-labelledby="noUnusedLocals-config">#</a> No Unused Locals - <code>noUnusedLocals</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Report errors on unused local variables.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const createKeyboard: (modelID: number) => { type: string; modelID: number; }' >createKeyboard</data-lsp></span><span style="color: #000000"> = (</span><span style="color: #001080"><data-lsp lsp='(parameter) modelID: number' >modelID</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-err><data-lsp lsp='const defaultModelID: 23' >defaultModelID</data-lsp></data-err></span><span style="color: #000000"> = </span><span style="color: #098658">23</span><span style="color: #000000">;</span></div><span class="error"><span>'defaultModelID' is declared but its value is never read.</span><span class="code">6133</span></span><span class="error-behind">'defaultModelID' is declared but its value is never read.</span><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(property) type: string' >type</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #A31515">"keyboard"</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(property) modelID: number' >modelID</data-lsp></span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000">};</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsFVIK4GcCmATAMtAxgQwDZIBQIEKATudOUgFygBsAjAMwtHbSRIAuo25FLh4oA0igCeAI2i5yaUAF5QACgC20NCnwBJACL1EaqRQCUSgHygA3kVD8uvUFoBmuBPh4BZTdv1LQACYWAG47UEEeBHJIG1AeCQAHFHoAIgBrSRk5NFSAGlANLV09UABfMIqgA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noUnusedParameters-config'><a aria-label="Link to the compiler option: noUnusedParameters" id='noUnusedParameters' href='#noUnusedParameters' name='noUnusedParameters' aria-labelledby="noUnusedParameters-config">#</a> No Unused Parameters - <code>noUnusedParameters</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Report errors on unused parameters in functions.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const createDefaultKeyboard: (modelID: number) => { type: string; modelID: number; }' >createDefaultKeyboard</data-lsp></span><span style="color: #000000"> = (</span><span style="color: #001080"><data-err><data-lsp lsp='(parameter) modelID: number' >modelID</data-lsp></data-err></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> {</span></div><span class="error"><span>'modelID' is declared but its value is never read.</span><span class="code">6133</span></span><span class="error-behind">'modelID' is declared but its value is never read.</span><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const defaultModelID: 23' >defaultModelID</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">23</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(property) type: string' >type</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #A31515">"keyboard"</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(property) modelID: number' >modelID</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='const defaultModelID: 23' >defaultModelID</data-lsp></span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000">};</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsFVIK4GcCmATACgQwE5YLYoAuKOSAUCBKTtGQFygBsAjAMxvkDG0kSRoLjhRYSAERQAzLAgA2RANIoAngCNouNKAC8oABT5oaFLICSYxonyrSASh0A+UAG9yoQb36hj0uUQCyRibmOqAATGwA3G6gwkQIOJAuoETKAA4ojABEANYq6ppZADSghsZmFt5SMvKB5SEAvtFNQA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='strict-config'><a aria-label="Link to the compiler option: strict" id='strict' href='#strict' name='strict' aria-labelledby="strict-config">#</a> Strict - <code>strict</code></h3> <div class='compiler-content'> <div class='markdown'> <p>The <code>strict</code> flag enables a wide range of type checking behavior that results in stronger guarantees of program correctness. Turning this on is equivalent to enabling all of the <em>strict mode family</em> options, which are outlined below. You can then turn off individual strict mode family checks as needed.</p> <p>Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior.</p> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Related:</span><ul><li><p><a href='#alwaysStrict' aria-label="Jump to compiler option info for alwaysStrict" ><code>alwaysStrict</code></a></p> </li><li><p><a href='#strictNullChecks' aria-label="Jump to compiler option info for strictNullChecks" ><code>strictNullChecks</code></a></p> </li><li><p><a href='#strictBindCallApply' aria-label="Jump to compiler option info for strictBindCallApply" ><code>strictBindCallApply</code></a></p> </li><li><p><a href='#strictFunctionTypes' aria-label="Jump to compiler option info for strictFunctionTypes" ><code>strictFunctionTypes</code></a></p> </li><li><p><a href='#strictPropertyInitialization' aria-label="Jump to compiler option info for strictPropertyInitialization" ><code>strictPropertyInitialization</code></a></p> </li><li><p><a href='#noImplicitAny' aria-label="Jump to compiler option info for noImplicitAny" ><code>noImplicitAny</code></a></p> </li><li><p><a href='#noImplicitThis' aria-label="Jump to compiler option info for noImplicitThis" ><code>noImplicitThis</code></a></p> </li><li><p><a href='#useUnknownInCatchVariables' aria-label="Jump to compiler option info for useUnknownInCatchVariables" ><code>useUnknownInCatchVariables</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.3" href="/docs/handbook/release-notes/typescript-2-3.html">2.3</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='strictBindCallApply-config'><a aria-label="Link to the compiler option: strictBindCallApply" id='strictBindCallApply' href='#strictBindCallApply' name='strictBindCallApply' aria-labelledby="strictBindCallApply-config">#</a> Strict Bind Call Apply - <code>strictBindCallApply</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When set, TypeScript will check that the built-in methods of functions <code>call</code>, <code>bind</code>, and <code>apply</code> are invoked with correct argument for the underlying function:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// With strictBindCallApply on</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(x: string): number' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function parseInt(string: string, radix?: number): number' >parseInt</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const n1: number' >n1</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='function fn(x: string): number' >fn</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) CallableFunction.call<undefined, [string], number>(this: (this: undefined, args_0: string) => number, thisArg: undefined, args_0: string): number' >call</data-lsp></span><span style="color: #000000">(</span><span style="color: #0000FF"><data-lsp lsp='var undefined' >undefined</data-lsp></span><span style="color: #000000">, </span><span style="color: #A31515">"10"</span><span style="color: #000000">);</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const n2: number' >n2</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='function fn(x: string): number' >fn</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) CallableFunction.call<undefined, [x: string], number>(this: (this: undefined, x: string) => number, thisArg: undefined, x: string): number' >call</data-lsp></span><span style="color: #000000">(</span><span style="color: #0000FF"><data-lsp lsp='var undefined' >undefined</data-lsp></span><span style="color: #000000">, </span><span style="color: #0000FF"><data-err>false</data-err></span><span style="color: #000000">);</span></div><span class="error"><span>Argument of type 'boolean' is not assignable to parameter of type 'string'.</span><span class="code">2345</span></span><span class="error-behind">Argument of type 'boolean' is not assignable to parameter of type 'string'.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcBcCcEsDG0BC8B2ATAwgQwDb4CCADifgJ4BcocArgKYBQIEDssA9rJDQEwBmACwBWJizAB1eNAAWoGAmRoseQqXIVQndEwBmddMng7Qe9AAoAHjUUYA5gEpQAbyahQsBtDqx0oElweBgBJdGhrRwBuJgBfcUQdGFB0AEZQAF4zdAA6RAJ8C0NMBj0MBkwAGlAAIlSABhrohKToFL5M7LyCoqxS8qqzAkgGaKA'>Try</a></div></pre> <p>Otherwise, these functions accept any arguments and will return <code>any</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// With strictBindCallApply off</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(x: string): number' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function parseInt(string: string, radix?: number): number' >parseInt</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Note: No error; return type is 'any'</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const n: any' >n</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='function fn(x: string): number' >fn</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Function.call(this: Function, thisArg: any, ...argArray: any[]): any' >call</data-lsp></span><span style="color: #000000">(</span><span style="color: #0000FF"><data-lsp lsp='var undefined' >undefined</data-lsp></span><span style="color: #000000">, </span><span style="color: #0000FF">false</span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcBcCcEsDG0BC8B2ATAwgQwDb4CCADifgJ4BcoAZgZAKYBQzIoA6vNABagwJkaLHkKlyFUAHtatZrQCu6ZPCno66ABQAPGgIwBzAJSgA3s1ChYjaAtjqSuWEwCS6aDqMBuZgF9W7AByUtCMNMGgjLCwUrBeVjZ26tAUJIyg8JCgAOS46BTZzIhqMKDqALwaAHSIBPiaSpiMtBiMmAA0dAyM3kA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.2" href="/docs/handbook/release-notes/typescript-3-2.html">3.2</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='strictBuiltinIteratorReturn-config'><a aria-label="Link to the compiler option: strictBuiltinIteratorReturn" id='strictBuiltinIteratorReturn' href='#strictBuiltinIteratorReturn' name='strictBuiltinIteratorReturn' aria-labelledby="strictBuiltinIteratorReturn-config">#</a> strictBuiltinIteratorReturn - <code>strictBuiltinIteratorReturn</code></h3> <div class='compiler-content'> <div class='markdown'> Built-in iterators are instantiated with a `TReturn` type of undefined instead of `any`. </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>false</code>, unless <code>strict</code> is set</p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='strictFunctionTypes-config'><a aria-label="Link to the compiler option: strictFunctionTypes" id='strictFunctionTypes' href='#strictFunctionTypes' name='strictFunctionTypes' aria-labelledby="strictFunctionTypes-config">#</a> Strict Function Types - <code>strictFunctionTypes</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When enabled, this flag causes functions parameters to be checked more correctly.</p> <p>Here’s a basic example with <code>strictFunctionTypes</code> off:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(x: string): void' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Hello, "</span><span style="color: #000000"> + </span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) String.toLowerCase(): string' >toLowerCase</data-lsp></span><span style="color: #000000">());</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='type StringOrNumberFunc = (ns: string | number) => void' >StringOrNumberFunc</data-lsp></span><span style="color: #000000"> = (</span><span style="color: #001080"><data-lsp lsp='(parameter) ns: string | number' >ns</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000"> | </span><span style="color: #1C6277">number</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #1C6277">void</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Unsafe assignment</span></div><div class='line'><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='let func: StringOrNumberFunc' >func</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='type StringOrNumberFunc = (ns: string | number) => void' >StringOrNumberFunc</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='function fn(x: string): void' >fn</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #008000">// Unsafe call - will crash</span></div><div class='line'><span style="color: #795E26"><data-lsp lsp='let func: (ns: string | number) => void' >func</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">10</span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcBcCcEsDG0BiBXAds+B7DAVATwAcBTSALlADMBDAG0lIChrNs8aMAKADypgIMAcwCUoAN7NQoRHkg56pAHT0cw7gCIAEqXpqANKE2gA1KF7LoOADI4A7qVgBhWk26jRAbmYBfZszQJKSgAMpw8CIA8rAAcmgAtgBGTuhYoAC8oNwYlKCCkcKgAD6gGIkpsOIZAHygAG448AAmPswgoACqubTUIW6Q8MIYCaQY0MxK0DTsVOFCwjHxyansmVw+Hd2QvSGIDPSgALSg9vD6srBuABas7NwAjAAM3kA'>Try</a></div></pre> <p>With <code>strictFunctionTypes</code> <em>on</em>, the error is correctly detected:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(x: string): void' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Hello, "</span><span style="color: #000000"> + </span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) String.toLowerCase(): string' >toLowerCase</data-lsp></span><span style="color: #000000">());</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='type StringOrNumberFunc = (ns: string | number) => void' >StringOrNumberFunc</data-lsp></span><span style="color: #000000"> = (</span><span style="color: #001080"><data-lsp lsp='(parameter) ns: string | number' >ns</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000"> | </span><span style="color: #1C6277">number</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #1C6277">void</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Unsafe assignment is prevented</span></div><div class='line'><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080"><data-err><data-lsp lsp='let func: StringOrNumberFunc' >func</data-lsp></data-err></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='type StringOrNumberFunc = (ns: string | number) => void' >StringOrNumberFunc</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='function fn(x: string): void' >fn</data-lsp></span><span style="color: #000000">;</span></div><span class="error"><span>Type '(x: string) => void' is not assignable to type 'StringOrNumberFunc'. Types of parameters 'x' and 'ns' are incompatible. Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.</span><span class="code">2322</span></span><span class="error-behind">Type '(x: string) => void' is not assignable to type 'StringOrNumberFunc'. Types of parameters 'x' and 'ns' are incompatible. Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGY1oFADMBXAOwGMAXASziNDyIAoAPVRM6CogcwEpQBvHKFAlqiOABtIAOnFxO9AEQAJSONkAaUAtABqUIylk4AGTgB3GAGEAhokj1u3ANw4AvjhxkAngAdIoAGU2Dk4AeWgAOQIAWwAjGAAxYhJQAF5QeiIUUFZ2LlAAH1AiGPjoXlSAPlAANzgKABMXHBBQAFUs6zx-W0QKTiJoyCIyUApEUB9oSBrhskgGnElRwlJUILywyNLE5LTaIicgA'>Try</a></div></pre> <p>During development of this feature, we discovered a large number of inherently unsafe class hierarchies, including some in the DOM. Because of this, the setting only applies to functions written in <em>function</em> syntax, not to those in <em>method</em> syntax:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='type Methodish = { func(x: string | number): void; }' >Methodish</data-lsp></span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) func(x: string | number): void' >func</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string | number' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000"> | </span><span style="color: #1C6277">number</span><span style="color: #000000">): </span><span style="color: #1C6277">void</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function fn(x: string): void' >fn</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Hello, "</span><span style="color: #000000"> + </span><span style="color: #001080"><data-lsp lsp='(parameter) x: string' >x</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) String.toLowerCase(): string' >toLowerCase</data-lsp></span><span style="color: #000000">());</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// Ultimately an unsafe assignment, but not detected</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const m: Methodish' >m</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='type Methodish = { func(x: string | number): void; }' >Methodish</data-lsp></span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(method) func(x: string | number): void' >func</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='function fn(x: string): void' >fn</data-lsp></span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='const m: Methodish' >m</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) func(x: string | number): void' >func</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">10</span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/C4TwDgpgBAshwAsD2ATAlgZwVAvFA3gFBRQBmArgHYDGAFAB4BcUGwATmpQOZQA+UlcgFsARhDYBKZgDckaFAG5CAXyWEKNYGiSUylBs1YduEgsSjUdGJABsIAOhtIutAEQAJCDacAaKK6gAaih6e2AkABkkAHdxAGEAQwwIWgkJJWVCQgB6bKgAVRstIQTgLxAoBN0qDATSaCSMNC5KIQhKYD8RcmABJF6UeAhqMpRCS0pWKCFmOERUTGw8IhINamZSSh8VJSF7NdoARgAGdKA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.6" href="/docs/handbook/release-notes/typescript-2-6.html">2.6</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='strictNullChecks-config'><a aria-label="Link to the compiler option: strictNullChecks" id='strictNullChecks' href='#strictNullChecks' name='strictNullChecks' aria-labelledby="strictNullChecks-config">#</a> Strict Null Checks - <code>strictNullChecks</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When <code>strictNullChecks</code> is <code>false</code>, <code>null</code> and <code>undefined</code> are effectively ignored by the language. This can lead to unexpected errors at runtime.</p> <p>When <code>strictNullChecks</code> is <code>true</code>, <code>null</code> and <code>undefined</code> have their own distinct types and you’ll get a type error if you try to use them where a concrete value is expected.</p> <p>For example with this TypeScript code, <code>users.find</code> has no guarantee that it will actually find a user, but you can write code as though it will:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const loggedInUsername: string' >loggedInUsername</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const users: { name: string; age: number; }[]' >users</data-lsp></span><span style="color: #000000"> = [</span></div><div class='line'><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(property) name: string' >name</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #A31515">"Oby"</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(property) age: number' >age</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">12</span><span style="color: #000000"> },</span></div><div class='line'><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(property) name: string' >name</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #A31515">"Heera"</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(property) age: number' >age</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">32</span><span style="color: #000000"> },</span></div><div class='line'><span style="color: #000000">];</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const loggedInUser: { name: string; age: number; }' >loggedInUser</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const users: { name: string; age: number; }[]' >users</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Array<{ name: string; age: number; }>.find(predicate: (value: { name: string; age: number; }, index: number, obj: { name: string; age: number; }[]) => unknown, thisArg?: any): { name: string; age: number; } (+1 overload)' >find</data-lsp></span><span style="color: #000000">((</span><span style="color: #001080"><data-lsp lsp='(parameter) u: { name: string; age: number; }' >u</data-lsp></span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) u: { name: string; age: number; }' >u</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) name: string' >name</data-lsp></span><span style="color: #000000"> === </span><span style="color: #001080"><data-lsp lsp='const loggedInUsername: string' >loggedInUsername</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='const loggedInUser: { name: string; age: number; }' >loggedInUser</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) age: number' >age</data-lsp></span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcBcCcEsDG0ByBXANhgwgCwKaIDWkAXKAGYCGGk+AUCBNFbAOb7TkCiAygEwAGAIwBWegBNCGVvlCIA9gDsYoDArYcJASSUBVOrCVUAtvnIwEStgG569RSuig0hyKAC8oANr1QoAG9QYzNyACIAeQAjAE8wgBpQKg5yYX5QAF94v0Dg03NQMIAJfHxYKgSklNAAZnSs+gBdOwdlVXVNfB19Q08XNwA6CnglCQAKMbQASk8APhcBkLkPFbUNLV0DMqWpu0dIBQx8AY6xjo2esoHk-F2gA'>Try</a></div></pre> <p>Setting <code>strictNullChecks</code> to <code>true</code> will raise an error that you have not made a guarantee that the <code>loggedInUser</code> exists before trying to use it.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const loggedInUsername: string' >loggedInUsername</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const users: { name: string; age: number; }[]' >users</data-lsp></span><span style="color: #000000"> = [</span></div><div class='line'><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(property) name: string' >name</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #A31515">"Oby"</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(property) age: number' >age</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">12</span><span style="color: #000000"> },</span></div><div class='line'><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(property) name: string' >name</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #A31515">"Heera"</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(property) age: number' >age</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">32</span><span style="color: #000000"> },</span></div><div class='line'><span style="color: #000000">];</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const loggedInUser: { name: string; age: number; } | undefined' >loggedInUser</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const users: { name: string; age: number; }[]' >users</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Array<{ name: string; age: number; }>.find(predicate: (value: { name: string; age: number; }, index: number, obj: { name: string; age: number; }[]) => unknown, thisArg?: any): { name: string; age: number; } | undefined (+1 overload)' >find</data-lsp></span><span style="color: #000000">((</span><span style="color: #001080"><data-lsp lsp='(parameter) u: { name: string; age: number; }' >u</data-lsp></span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) u: { name: string; age: number; }' >u</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) name: string' >name</data-lsp></span><span style="color: #000000"> === </span><span style="color: #001080"><data-lsp lsp='const loggedInUsername: string' >loggedInUsername</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-err><data-lsp lsp='const loggedInUser: { name: string; age: number; } | undefined' >loggedInUser</data-lsp></data-err></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) age: number' >age</data-lsp></span><span style="color: #000000">);</span></div><span class="error"><span>'loggedInUser' is possibly 'undefined'.</span><span class="code">18048</span></span><span class="error-behind">'loggedInUser' is possibly 'undefined'.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYME50FYM1QBGADgAYAWUgKBAgBcBDaAc0gdQFEBlNc-nTDhEDaAEsAxgwByAVwA2CgMIALSJIDWiGgBMNClpFCS4AO1GgFcVu10BJMwFVEMM0wC2kVKIlnWANw0NKYWDKByrkigALygANo0oKAA3qDuXqgARADyAEYAnlkANKBM7KjERAC+xUmp6Z7eoFkAEpAwTCVlFaCEoLU0ALpBIeaW1raQDs5RsRFRiAB0AGbiZroAFJtyAJSxAHwRSxnGMedWNnaOLm5Nu0GhiHAKkEuTm5PXszBL5ZAPIA'>Try</a></div></pre> <p>The second example failed because the array’s <code>find</code> function looks a bit like this simplification:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// When strictNullChecks: true</span></div><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277">Array</span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">find</span><span style="color: #000000">(</span><span style="color: #795E26">predicate</span><span style="color: #000000">: (</span><span style="color: #001080">value</span><span style="color: #000000">: </span><span style="color: #1C6277">any</span><span style="color: #000000">, </span><span style="color: #001080">index</span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #1C6277">boolean</span><span style="color: #000000">): </span><span style="color: #1C6277">S</span><span style="color: #000000"> | </span><span style="color: #1C6277">undefined</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'></div><div class='line'><span style="color: #008000">// When strictNullChecks: false the undefined is removed from the type system,</span></div><div class='line'><span style="color: #008000">// allowing you to write code which assumes it always found a result</span></div><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277">Array</span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">find</span><span style="color: #000000">(</span><span style="color: #795E26">predicate</span><span style="color: #000000">: (</span><span style="color: #001080">value</span><span style="color: #000000">: </span><span style="color: #1C6277">any</span><span style="color: #000000">, </span><span style="color: #001080">index</span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #1C6277">boolean</span><span style="color: #000000">): </span><span style="color: #1C6277">S</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div></code></div></pre> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='strictPropertyInitialization-config'><a aria-label="Link to the compiler option: strictPropertyInitialization" id='strictPropertyInitialization' href='#strictPropertyInitialization' name='strictPropertyInitialization' aria-labelledby="strictPropertyInitialization-config">#</a> Strict Property Initialization - <code>strictPropertyInitialization</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When set to true, TypeScript will raise an error when a class property was declared but not set in the constructor.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class UserAccount' >UserAccount</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) UserAccount.name: string' >name</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) UserAccount.accountType: string' >accountType</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"user"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-err><data-lsp lsp='(property) UserAccount.email: string' >email</data-lsp></data-err></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><span class="error"><span>Property 'email' has no initializer and is not definitely assigned in the constructor.</span><span class="code">2564</span></span><span class="error-behind">Property 'email' has no initializer and is not definitely assigned in the constructor.</span><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) UserAccount.address: string | undefined' >address</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000"> | </span><span style="color: #1C6277">undefined</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">constructor</span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) name: string' >name</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) UserAccount.name: string' >name</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(parameter) name: string' >name</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Note that this.email is not set</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwFYBsAWAUAMYA2AhooqAKqIwCCBBcArgHYAuoA3nqKCyQFtIqRG2gBLFgHMA3D1AkGzdgBUAngAdIoALygARExrR9c+ZAElxREWMmz5JACZPokcrYnTQAH1CsnSAAzSUgnM15GFlFoJgI2BAAKfiFPewBKLnleNgALcUQAOhTtPRK5Xl4QUAA5ODZtPJIOPILCiysiUAK+etAaNnkAXzwhoA'>Try</a></div></pre> <p>In the above case:</p> <ul> <li><code>this.name</code> is set specifically.</li> <li><code>this.accountType</code> is set by default.</li> <li><code>this.email</code> is not set and raises an error.</li> <li><code>this.address</code> is declared as potentially <code>undefined</code> which means it does not have to be set.</li> </ul> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.7" href="/docs/handbook/release-notes/typescript-2-7.html">2.7</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='useUnknownInCatchVariables-config'><a aria-label="Link to the compiler option: useUnknownInCatchVariables" id='useUnknownInCatchVariables' href='#useUnknownInCatchVariables' name='useUnknownInCatchVariables' aria-labelledby="useUnknownInCatchVariables-config">#</a> Use Unknown In Catch Variables - <code>useUnknownInCatchVariables</code></h3> <div class='compiler-content'> <div class='markdown'> <p>In TypeScript 4.0, support was added to allow changing the type of the variable in a catch clause from <code>any</code> to <code>unknown</code>. Allowing for code like:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// ...</span></div><div class='line'><span style="color: #000000">} </span><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='var err: unknown' >err</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">unknown</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// We have to verify err is an</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// error before using it as one.</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='var err: unknown' >err</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">instanceof</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='var Error: ErrorConstructor' >Error</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='var err: Error' >err</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) Error.message: string' >message</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFcGcFMFUB2BrRB7A7ogkogwgIYAuAxgBYBqBATgJYEBGANrNAFBHUCeoA3m6FAhQAOjFsAvqBLFyoABSxq1AFyhIKdFgCUfAULAB1WKDIEAbiaJpQlugDMeS6qFrRQBRPuHO0LhrD2fiYwtIgA5q5EHu5oiLAi+rT2Cs6uiNBEniSwaCkAosp+uvyCgiRx0GgsIkxo4YrKIgC2rNAE4bDaANz6EpJAA'>Try</a></div></pre> <p>This pattern ensures that error handling code becomes more comprehensive because you cannot guarantee that the object being thrown <em>is</em> a Error subclass ahead of time. With the flag <code>useUnknownInCatchVariables</code> enabled, then you do not need the additional syntax (<code>: unknown</code>) nor a linter rule to try enforce this behavior.</p> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#strict"><code>strict</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#strict' aria-label="Jump to compiler option info for strict" ><code>strict</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.4" href="/docs/handbook/release-notes/typescript-4-4.html">4.4</a></p> </li></ul> </div></section> <div class='category'> <h2 id='Modules_6244' ><a href='#Modules_6244' name='Modules_6244' aria-label="Link to the section Modules" aria-labelledby='Modules_6244'>#</a>Modules</h2> </div> <section class='compiler-option'> <h3 id='allowArbitraryExtensions-config'><a aria-label="Link to the compiler option: allowArbitraryExtensions" id='allowArbitraryExtensions' href='#allowArbitraryExtensions' name='allowArbitraryExtensions' aria-labelledby="allowArbitraryExtensions-config">#</a> Allow Arbitrary Extensions - <code>allowArbitraryExtensions</code></h3> <div class='compiler-content'> <div class='markdown'> <p>In TypeScript 5.0, when an import path ends in an extension that isn’t a known JavaScript or TypeScript file extension, the compiler will look for a declaration file for that path in the form of <code>{file basename}.d.{extension}.ts</code>. For example, if you are using a CSS loader in a bundler project, you might want to write (or generate) declaration files for those stylesheets:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">css</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/* app.css */</span></div><div class='line'><span style="color: #800000">.cookie-banner</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #E50000">display</span><span style="color: #000000">: </span><span style="color: #0451A5">none</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// app.d.css.ts</span></div><div class='line'><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">css</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">cookieBanner</span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000"> </span><span style="color: #001080">css</span><span style="color: #000000">;</span></div></code></div></pre> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// App.tsx</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">styles</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./app.css"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #001080">styles</span><span style="color: #000000">.</span><span style="color: #001080">cookieBanner</span><span style="color: #000000">; </span><span style="color: #008000">// string</span></div></code></div></pre> <p>By default, this import will raise an error to let you know that TypeScript doesn’t understand this file type and your runtime might not support importing it. But if you’ve configured your runtime or bundler to handle it, you can suppress the error with the new <code>--allowArbitraryExtensions</code> compiler option.</p> <p>Note that historically, a similar effect has often been achievable by adding a declaration file named <code>app.css.d.ts</code> instead of <code>app.d.css.ts</code> - however, this just worked through Node’s <code>require</code> resolution rules for CommonJS. Strictly speaking, the former is interpreted as a declaration file for a JavaScript file named <code>app.css.js</code>. Because relative files imports need to include extensions in Node’s ESM support, TypeScript would error on our example in an ESM file under <code>--moduleResolution node16</code> or <code>nodenext</code>.</p> <p>For more information, read up <a href="https://github.com/microsoft/TypeScript/issues/50133">the proposal for this feature</a> and <a href="https://github.com/microsoft/TypeScript/pull/51435">its corresponding pull request</a>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='allowImportingTsExtensions-config'><a aria-label="Link to the compiler option: allowImportingTsExtensions" id='allowImportingTsExtensions' href='#allowImportingTsExtensions' name='allowImportingTsExtensions' aria-labelledby="allowImportingTsExtensions-config">#</a> Allow Importing TS Extensions - <code>allowImportingTsExtensions</code></h3> <div class='compiler-content'> <div class='markdown'> <p><code>--allowImportingTsExtensions</code> allows TypeScript files to import each other with a TypeScript-specific extension like <code>.ts</code>, <code>.mts</code>, or <code>.tsx</code>.</p> <p>This flag is only allowed when <code>--noEmit</code> or <code>--emitDeclarationOnly</code> is enabled, since these import paths would not be resolvable at runtime in JavaScript output files. The expectation here is that your resolver (e.g. your bundler, a runtime, or some other tool) is going to make these imports between <code>.ts</code> files work.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='allowUmdGlobalAccess-config'><a aria-label="Link to the compiler option: allowUmdGlobalAccess" id='allowUmdGlobalAccess' href='#allowUmdGlobalAccess' name='allowUmdGlobalAccess' aria-labelledby="allowUmdGlobalAccess-config">#</a> Allow Umd Global Access - <code>allowUmdGlobalAccess</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When set to true, <code>allowUmdGlobalAccess</code> lets you access UMD exports as globals from inside module files. A module file is a file that has imports and/or exports. Without this flag, using an export from a UMD module requires an import declaration.</p> <p>An example use case for this flag would be a web project where you know the particular library (like jQuery or Lodash) will always be available at runtime, but you can’t access it with an import.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.5" href="/docs/handbook/release-notes/typescript-3-5.html">3.5</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='baseUrl-config'><a aria-label="Link to the compiler option: baseUrl" id='baseUrl' href='#baseUrl' name='baseUrl' aria-labelledby="baseUrl-config">#</a> Base URL - <code>baseUrl</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Sets a base directory from which to resolve bare specifier module names. For example, in the directory structure:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">project</span></div><div class='line'><span style="color: undefined">├── ex.ts</span></div><div class='line'><span style="color: undefined">├── hello</span></div><div class='line'><span style="color: undefined">│ └── world.ts</span></div><div class='line'><span style="color: undefined">└── tsconfig.json</span></div></code></div></pre> <p>With <code>"baseUrl": "./"</code>, TypeScript will look for files starting at the same folder as the <code>tsconfig.json</code>:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">helloWorld</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"hello/world"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">helloWorld</span><span style="color: #000000">);</span></div></code></div></pre> <p>This resolution has higher priority than lookups from <code>node_modules</code>.</p> <p>This feature was designed for use in conjunction with AMD module loaders in the browser, and is not recommended in any other context. As of TypeScript 4.1, <code>baseUrl</code> is no longer required to be set when using <a href="#paths"><code>paths</code></a>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='customConditions-config'><a aria-label="Link to the compiler option: customConditions" id='customConditions' href='#customConditions' name='customConditions' aria-labelledby="customConditions-config">#</a> Custom Conditions - <code>customConditions</code></h3> <div class='compiler-content'> <div class='markdown'> <p><code>--customConditions</code> takes a list of additional <a href="https://nodejs.org/api/packages.html#nested-conditions">conditions</a> that should succeed when TypeScript resolves from an <a href="https://nodejs.org/api/packages.html#exports"><code>exports</code></a> or <a href="https://nodejs.org/api/packages.html#imports"><code>imports</code></a> field of a <code>package.json</code>. These conditions are added to whatever existing conditions a resolver will use by default.</p> <p>For example, when this field is set in a <code>tsconfig.json</code> as so:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">jsonc</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"compilerOptions"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"target"</span><span style="color: #000000">: </span><span style="color: #A31515">"es2022"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"moduleResolution"</span><span style="color: #000000">: </span><span style="color: #A31515">"bundler"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"customConditions"</span><span style="color: #000000">: [</span><span style="color: #A31515">"my-condition"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Any time an <code>exports</code> or <code>imports</code> field is referenced in <code>package.json</code>, TypeScript will consider conditions called <code>my-condition</code>.</p> <p>So when importing from a package with the following <code>package.json</code></p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">jsonc</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// ...</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"exports"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"."</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"my-condition"</span><span style="color: #000000">: </span><span style="color: #A31515">"./foo.mjs"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"node"</span><span style="color: #000000">: </span><span style="color: #A31515">"./bar.mjs"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"import"</span><span style="color: #000000">: </span><span style="color: #A31515">"./baz.mjs"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"require"</span><span style="color: #000000">: </span><span style="color: #A31515">"./biz.mjs"</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>TypeScript will try to look for files corresponding to <code>foo.mjs</code>.</p> <p>This field is only valid under the <code>node16</code>, <code>nodenext</code>, and <code>bundler</code> options for <a href="#moduleResolution"><code>--moduleResolution</code></a>.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#moduleResolution' aria-label="Jump to compiler option info for moduleResolution" ><code>moduleResolution</code></a></p> </li><li><p><a href='#resolvePackageJsonExports' aria-label="Jump to compiler option info for resolvePackageJsonExports" ><code>resolvePackageJsonExports</code></a></p> </li><li><p><a href='#resolvePackageJsonImports' aria-label="Jump to compiler option info for resolvePackageJsonImports" ><code>resolvePackageJsonImports</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='module-config'><a aria-label="Link to the compiler option: module" id='module' href='#module' name='module' aria-labelledby="module-config">#</a> Module - <code>module</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Sets the module system for the program. See the <a href="/docs/handbook/modules/theory.html#the-module-output-format">theory behind TypeScript’s <code>module</code> option</a> and <a href="/docs/handbook/modules/reference.html#the-module-compiler-option">its reference page</a> for more information. You very likely want <code>"nodenext"</code> for modern Node.js projects and <code>preserve</code> or <code>esnext</code> for code that will be bundled.</p> <p>Changing <code>module</code> affects <a href="#moduleResolution"><code>moduleResolution</code></a> which <a href="/docs/handbook/modules/reference.html#the-moduleresolution-compiler-option">also has a reference page</a>.</p> <p>Here’s some example output for this file:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(alias) const valueOfPi: 3.142 import valueOfPi' >valueOfPi</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const twoPi: number' >twoPi</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(alias) const valueOfPi: 3.142 import valueOfPi' >valueOfPi</data-lsp></span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDMEsBsFMB2BDAtvAXKAxge0QM4AuyiRBAdOQFDwAeADrgE5E77GgBuysArvADykAArRQAXlABmCgEYALACYA3NRCgAtNux8i2zerBQ4SNJlDREAE3pUC1aKiatQAb268BwsaAC+oJDMuKigAEQUwHiEJGQEYWq0jCxs0ZxEAO64vlI8-EKi4gBUoKpAA'>Try</a></div></pre> <h4 id="commonjs" style="position:relative;"><a href="#commonjs" aria-label="commonjs permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>CommonJS</code></h4> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">constants_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"./constants"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #001080">constants_1</span><span style="color: #000000">.</span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlAGNZk8A7AK0mzHHtkQCcvYuXUyAA590oAN6gAbgENihUgHkAZgAVUoAL6hlvZKABEAOmA16kdDPrpIBgNyZMpAB4iuYsxdDp4sdaABeaTkFFX8AKlAAJjsgA'>Try</a></div></pre> <h4 id="umd" style="position:relative;"><a href="#umd" aria-label="umd permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>UMD</code></h4> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">(</span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">factory</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">module</span><span style="color: #000000"> === </span><span style="color: #A31515">"object"</span><span style="color: #000000"> && </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">module</span><span style="color: #000000">.</span><span style="color: #1C6277">exports</span><span style="color: #000000"> === </span><span style="color: #A31515">"object"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">v</span><span style="color: #000000"> = </span><span style="color: #795E26">factory</span><span style="color: #000000">(</span><span style="color: #001080">require</span><span style="color: #000000">, </span><span style="color: #1C6277">exports</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">v</span><span style="color: #000000"> !== </span><span style="color: #0000FF">undefined</span><span style="color: #000000">) </span><span style="color: #1C6277">module</span><span style="color: #000000">.</span><span style="color: #1C6277">exports</span><span style="color: #000000"> = </span><span style="color: #001080">v</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">else</span><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #001080">define</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000"> && </span><span style="color: #001080">define</span><span style="color: #000000">.</span><span style="color: #001080">amd</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">define</span><span style="color: #000000">([</span><span style="color: #A31515">"require"</span><span style="color: #000000">, </span><span style="color: #A31515">"exports"</span><span style="color: #000000">, </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">], </span><span style="color: #001080">factory</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">})(</span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">require</span><span style="color: #000000">, </span><span style="color: #001080">exports</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">constants_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"./constants"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #001080">constants_1</span><span style="color: #000000">.</span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">});</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlEOX2zHADtZEAnF2FyTVZABw-SgA3qABuAQ2KFSAeQBmABVSgAvqDntkoAEQA6YAGNYDSOnEN0kbQG5MmUgA9+LQUZOD08WEtABeMZLS8j4AVKAATNZAA'>Try</a></div></pre> <h4 id="amd" style="position:relative;"><a href="#amd" aria-label="amd permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>AMD</code></h4> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #795E26">define</span><span style="color: #000000">([</span><span style="color: #A31515">"require"</span><span style="color: #000000">, </span><span style="color: #A31515">"exports"</span><span style="color: #000000">, </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">], </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">require</span><span style="color: #000000">, </span><span style="color: #001080">exports</span><span style="color: #000000">, </span><span style="color: #001080">constants_1</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #001080">constants_1</span><span style="color: #000000">.</span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">});</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlAENl9sxwA7WRAJ1dlck1WQAdO6UAG9QANyrFCpAPIAzAAqpQAX1ByOyUACIAdMADGsRpHRVG6SNoDcmTKQAeA1kKMmh6eLCWgAvOMlpeR8AKlAAJmsgA'>Try</a></div></pre> <h4 id="system" style="position:relative;"><a href="#system" aria-label="system permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>System</code></h4> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #001080">System</span><span style="color: #000000">.</span><span style="color: #795E26">register</span><span style="color: #000000">([</span><span style="color: #A31515">"./constants"</span><span style="color: #000000">], </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">exports_1</span><span style="color: #000000">, </span><span style="color: #001080">context_1</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">constants_1</span><span style="color: #000000">, </span><span style="color: #001080">twoPi</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__moduleName</span><span style="color: #000000"> = </span><span style="color: #001080">context_1</span><span style="color: #000000"> && </span><span style="color: #001080">context_1</span><span style="color: #000000">.</span><span style="color: #001080">id</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">setters:</span><span style="color: #000000"> [</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">constants_1_1</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">constants_1</span><span style="color: #000000"> = </span><span style="color: #001080">constants_1_1</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> ],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">execute</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> () {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">exports_1</span><span style="color: #000000">(</span><span style="color: #A31515">"twoPi"</span><span style="color: #000000">, </span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #001080">constants_1</span><span style="color: #000000">.</span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000">});</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlEgE9J1TlsxwA7WRAJw9g8k1WQAHHulABvUADcAhsUKkA8gDMACqlABfUEu7JQAIgB0wAMawWdaS3SR9AbkyZSAD2EdRZi6PTxYa0AC8UrLyyv4AVKAATHZAA'>Try</a></div></pre> <h4 id="esnext" style="position:relative;"><a href="#esnext" aria-label="esnext permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ESNext</code></h4> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">twoPi</span><span style="color: #000000"> = </span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlFMgDtSAPLHcG2RAJ3dnck1WQAO3dKADeoAG4BDYoVIB5AGYAFVKAC+oRV2SgARADpgAY1g1I6KTXSQ9AbkyYGQ9iNPmR6eLFWgAvJIyckq+AFSgAEx2QA'>Try</a></div></pre> <h4 id="es2015es6es2020es2022" style="position:relative;"><a href="#es2015es6es2020es2022" aria-label="es2015es6es2020es2022 permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ES2015</code>/<code>ES6</code>/<code>ES2020</code>/<code>ES2022</code></h4> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">twoPi</span><span style="color: #000000"> = </span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlFMgCYAGARgFZsxwA7WRAJ29m8iZUyAA790oAN6gAbgENihUgHkAZgAVUoAL6hVfZKABEAOmABjWO0jo57dJCMBuTJlIAPMdwmXrE9PCwmqAAvLIKSmrBAFSgNE5AA'>Try</a></div></pre> <p>In addition to the base functionality of <code>ES2015</code>/<code>ES6</code>, <code>ES2020</code> adds support for <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import">dynamic <code>import</code>s</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta"><code>import.meta</code></a> while <code>ES2022</code> further adds support for <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await">top level <code>await</code></a>.</p> <h4 id="node16nodenext" style="position:relative;"><a href="#node16nodenext" aria-label="node16nodenext permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>node16</code>/<code>nodenext</code></h4> <p>Available from 4.7+, the <code>node16</code> and <code>nodenext</code> modes integrate with Node’s <a href="https://nodejs.org/api/esm.html">native ECMAScript Module support</a>. The emitted JavaScript uses either <code>CommonJS</code> or <code>ES2020</code> output depending on the file extension and the value of the <code>type</code> setting in the nearest <code>package.json</code>. Module resolution also works differently. You can learn more in the <a href="/docs/handbook/esm-node.html">handbook</a> and <a href="/docs/handbook/modules/reference.html#node16-nodenext">Modules Reference</a>.</p> <h4 id="preserve" style="position:relative;"><a href="#preserve" aria-label="preserve permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>preserve</code></h4> <p>In <code>--module preserve</code> (<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-4.html#support-for-require-calls-in---moduleresolution-bundler-and---module-preserve">added</a> in TypeScript 5.4), ECMAScript imports and exports written in input files are preserved in the output, and CommonJS-style <code>import x = require("...")</code> and <code>export = ...</code> statements are emitted as CommonJS <code>require</code> and <code>module.exports</code>. In other words, the format of each individual import or export statement is preserved, rather than being coerced into a single format for the whole compilation (or even a whole file).</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">constants</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"./constants"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">piSquared</span><span style="color: #000000"> = </span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #001080">constants</span><span style="color: #000000">.</span><span style="color: #001080">valueOfPi</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlAAcAnUyUmgN1OzHADtZEabYbImVMir90oAN6gmAQ2KFSAeQBmABVSgAvqGV9koAEQA6YAGNYHSOhkd0kAwG4hIsaHOXrtyKAC8oOgCOhKh0ABTGZhZWNnYGAJROmKQAHqI04u5W1KgAykEydPi+0nIKKuqgAFRuUZ52RrLySmqoDkA'>Try</a></div></pre> <p>While it’s rare to need to mix imports and require calls in the same file, this <code>module</code> mode best reflects the capabilities of most modern bundlers, as well as the Bun runtime.</p> <blockquote> <p>Why care about TypeScript’s <code>module</code> emit with a bundler or with Bun, where you’re likely also setting <code>noEmit</code>? TypeScript’s type checking and module resolution behavior are affected by the module format that it <em>would</em> emit. Setting <code>module</code> gives TypeScript information about how your bundler or runtime will process imports and exports, which ensures that the types you see on imported values accurately reflect what will happen at runtime or after bundling.</p> </blockquote> <h4 id="none" style="position:relative;"><a href="#none" aria-label="none permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>None</code></h4> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">constants_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"./constants"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">twoPi</span><span style="color: #000000"> = </span><span style="color: #001080">constants_1</span><span style="color: #000000">.</span><span style="color: #001080">valueOfPi</span><span style="color: #000000"> * </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgs2ATAVwBsBTALlADtYrTsxwbEAnF2FyTVZABw-SgA3qABuAQ2KFSAeQBmABVSgAvqDntkoAEQA6YAGNakdOKrpI2gNyZMpAB78Wgo1ROh08WEtABeMZLS8j4AVKAATFZAA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>CommonJS</code> if <a href="#target"><code>target</code></a> is <code>ES5</code>; <code>ES6</code>/<code>ES2015</code> otherwise.</p> </li> <li><span>Allowed:</span><ul><li><p><code>none</code></p> </li><li><p><code>commonjs</code></p> </li><li><p><code>amd</code></p> </li><li><p><code>umd</code></p> </li><li><p><code>system</code></p> </li><li><p><code>es6</code>/<code>es2015</code></p> </li><li><p><code>es2020</code></p> </li><li><p><code>es2022</code></p> </li><li><p><code>esnext</code></p> </li><li><p><code>node16</code></p> </li><li><p><code>nodenext</code></p> </li><li><p><code>preserve</code></p> </li></ul></li> <li><span>Related:</span><ul><li><p><a href='#moduleResolution' aria-label="Jump to compiler option info for moduleResolution" ><code>moduleResolution</code></a></p> </li><li><p><a href='#esModuleInterop' aria-label="Jump to compiler option info for esModuleInterop" ><code>esModuleInterop</code></a></p> </li><li><p><a href='#allowImportingTsExtensions' aria-label="Jump to compiler option info for allowImportingTsExtensions" ><code>allowImportingTsExtensions</code></a></p> </li><li><p><a href='#allowArbitraryExtensions' aria-label="Jump to compiler option info for allowArbitraryExtensions" ><code>allowArbitraryExtensions</code></a></p> </li><li><p><a href='#resolveJsonModule' aria-label="Jump to compiler option info for resolveJsonModule" ><code>resolveJsonModule</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.0" href="/docs/handbook/release-notes/typescript-1-0.html">1.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='moduleResolution-config'><a aria-label="Link to the compiler option: moduleResolution" id='moduleResolution' href='#moduleResolution' name='moduleResolution' aria-labelledby="moduleResolution-config">#</a> Module Resolution - <code>moduleResolution</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specify the module resolution strategy:</p> <ul> <li><code>'node16'</code> or <code>'nodenext'</code> for modern versions of Node.js. Node.js v12 and later supports both ECMAScript imports and CommonJS <code>require</code>, which resolve using different algorithms. These <code>moduleResolution</code> values, when combined with the corresponding <a href="#module"><code>module</code></a> values, picks the right algorithm for each resolution based on whether Node.js will see an <code>import</code> or <code>require</code> in the output JavaScript code.</li> <li><code>'node10'</code> (previously called <code>'node'</code>) for Node.js versions older than v10, which only support CommonJS <code>require</code>. You probably won’t need to use <code>node10</code> in modern code.</li> <li><code>'bundler'</code> for use with bundlers. Like <code>node16</code> and <code>nodenext</code>, this mode supports package.json <code>"imports"</code> and <code>"exports"</code>, but unlike the Node.js resolution modes, <code>bundler</code> never requires file extensions on relative paths in imports.</li> <li><code>'classic'</code> was used in TypeScript before the release of 1.6. <code>classic</code> should not be used.</li> </ul> <p>There are reference pages explaining the <a href="https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution">theory behind TypeScript’s module resolution</a> and the <a href="/docs/handbook/modules/reference.html#the-moduleresolution-compiler-option">details of each option</a>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>Classic</code> if <a href="#module"><code>module</code></a> is <code>AMD</code>, <code>UMD</code>, <code>System</code>, or <code>ES6</code>/<code>ES2015</code>; Matches if <a href="#module"><code>module</code></a> is <code>node16</code> or <code>nodenext</code>; <code>Node</code> otherwise.</p> </li> <li><span>Allowed:</span><ul><li><p><code>classic</code></p> </li><li><p><code>node10</code>/<code>node</code></p> </li><li><p><code>node16</code></p> </li><li><p><code>nodenext</code></p> </li><li><p><code>bundler</code></p> </li></ul></li> <li><span>Related:</span><ul><li><p><a href='#module' aria-label="Jump to compiler option info for module" ><code>module</code></a></p> </li><li><p><a href='#paths' aria-label="Jump to compiler option info for paths" ><code>paths</code></a></p> </li><li><p><a href='#baseUrl' aria-label="Jump to compiler option info for baseUrl" ><code>baseUrl</code></a></p> </li><li><p><a href='#rootDirs' aria-label="Jump to compiler option info for rootDirs" ><code>rootDirs</code></a></p> </li><li><p><a href='#moduleSuffixes' aria-label="Jump to compiler option info for moduleSuffixes" ><code>moduleSuffixes</code></a></p> </li><li><p><a href='#customConditions' aria-label="Jump to compiler option info for customConditions" ><code>customConditions</code></a></p> </li><li><p><a href='#resolvePackageJsonExports' aria-label="Jump to compiler option info for resolvePackageJsonExports" ><code>resolvePackageJsonExports</code></a></p> </li><li><p><a href='#resolvePackageJsonImports' aria-label="Jump to compiler option info for resolvePackageJsonImports" ><code>resolvePackageJsonImports</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='moduleSuffixes-config'><a aria-label="Link to the compiler option: moduleSuffixes" id='moduleSuffixes' href='#moduleSuffixes' name='moduleSuffixes' aria-labelledby="moduleSuffixes-config">#</a> Module Suffixes - <code>moduleSuffixes</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Provides a way to override the default list of file name suffixes to search when resolving a module.</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#moduleSuffixes'><data-lsp lsp="List of file name suffixes to search when resolving a module.">moduleSuffixes</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">".ios"</span><span style="color: #000000">, </span><span style="color: #A31515">".native"</span><span style="color: #000000">, </span><span style="color: #A31515">""</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Given the above configuration, an import like the following:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">foo</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./foo"</span><span style="color: #000000">;</span></div></code></div></pre> <p>TypeScript will look for the relative files <code>./foo.ios.ts</code>, <code>./foo.native.ts</code>, and finally <code>./foo.ts</code>.</p> <p>Note the empty string <code>""</code> in <a href="#moduleSuffixes"><code>moduleSuffixes</code></a> which is necessary for TypeScript to also look-up <code>./foo.ts</code>.</p> <p>This feature can be useful for React Native projects where each target platform can use a separate tsconfig.json with differing <code>moduleSuffixes</code>.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.7" href="/docs/handbook/release-notes/typescript-4-7.html">4.7</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noResolve-config'><a aria-label="Link to the compiler option: noResolve" id='noResolve' href='#noResolve' name='noResolve' aria-labelledby="noResolve-config">#</a> No Resolve - <code>noResolve</code></h3> <div class='compiler-content'> <div class='markdown'> <p>By default, TypeScript will examine the initial set of files for <code>import</code> and <code><reference</code> directives and add these resolved files to your program.</p> <p>If <code>noResolve</code> is set, this process doesn’t happen. However, <code>import</code> statements are still checked to see if they resolve to a valid module, so you’ll need to make sure this is satisfied by some other means.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='noUncheckedSideEffectImports-config'><a aria-label="Link to the compiler option: noUncheckedSideEffectImports" id='noUncheckedSideEffectImports' href='#noUncheckedSideEffectImports' name='noUncheckedSideEffectImports' aria-labelledby="noUncheckedSideEffectImports-config">#</a> noUncheckedSideEffectImports - <code>noUncheckedSideEffectImports</code></h3> <div class='compiler-content'> <div class='markdown'> <p>In JavaScript it’s possible to <code>import</code> a module without actually importing any values from it.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #A31515">"some-module"</span><span style="color: #000000">;</span></div></code></div></pre> <p>These imports are often called <em>side effect imports</em> because the only useful behavior they can provide is by executing some side effect (like registering a global variable, or adding a polyfill to a prototype).</p> <p>By default, TypeScript will not check these imports for validity. If the import resolves to a valid source file, TypeScript will load and check the file. If no source file is found, TypeScript will silently ignore the import.</p> <p>This is surprising behavior, but it partially stems from modeling patterns in the JavaScript ecosystem. For example, this syntax has also been used with special loaders in bundlers to load CSS or other assets. Your bundler might be configured in such a way where you can include specific <code>.css</code> files by writing something like the following:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #A31515">"./button-component.css"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">Button</span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// ...</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Still, this masks potential typos on side effect imports.</p> <p>When <code>--noUncheckedSideEffectImports</code> is enabled, TypeScript will error if it can’t find a source file for a side effect import.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #A31515">"oops-this-module-does-not-exist"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #008000">// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</span></div><div class='line'><span style="color: #008000">// error: Cannot find module 'oops-this-module-does-not-exist' or its corresponding</span></div><div class='line'><span style="color: #008000">// type declarations.</span></div></code></div></pre> <p>When enabling this option, some working code may now receive an error, like in the CSS example above. To work around this, users who want to just write side effect <code>import</code>s for assets might be better served by writing what’s called an <em>ambient module declaration</em> with a wildcard specifier. It would go in a global file and look something like the following:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// ./src/globals.d.ts</span></div><div class='line'></div><div class='line'><span style="color: #008000">// Recognize all CSS files as module imports.</span></div><div class='line'><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">module</span><span style="color: #000000"> </span><span style="color: #A31515">"*.css"</span><span style="color: #000000"> {}</span></div></code></div></pre> <p>In fact, you might already have a file like this in your project! For example, running something like <code>vite init</code> might create a similar <code>vite-env.d.ts</code>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='paths-config'><a aria-label="Link to the compiler option: paths" id='paths' href='#paths' name='paths' aria-labelledby="paths-config">#</a> Paths - <code>paths</code></h3> <div class='compiler-content'> <div class='markdown'> <p>A series of entries which re-map imports to lookup locations relative to the <a href="#baseUrl"><code>baseUrl</code></a> if set, or to the tsconfig file itself otherwise. There is a larger coverage of <code>paths</code> in <a href="/docs/handbook/modules/reference.html#paths">the <code>moduleResolution</code> reference page</a>.</p> <p><code>paths</code> lets you declare how TypeScript should resolve an import in your <code>require</code>/<code>import</code>s.</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#paths'><data-lsp lsp="Specify a set of entries that re-map imports to additional lookup locations.">paths</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"jquery"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./vendor/jquery/dist/jquery"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>This would allow you to be able to write <code>import "jquery"</code>, and get all of the correct typing locally.</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#paths'><data-lsp lsp="Specify a set of entries that re-map imports to additional lookup locations.">paths</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"app/*"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./src/app/*"</span><span style="color: #000000">],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"config/*"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./src/app/_config/*"</span><span style="color: #000000">],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"environment/*"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./src/environments/*"</span><span style="color: #000000">],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"shared/*"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./src/app/_shared/*"</span><span style="color: #000000">],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"helpers/*"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./src/helpers/*"</span><span style="color: #000000">],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"tests/*"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./src/tests/*"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> },</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>In this case, you can tell the TypeScript file resolver to support a number of custom prefixes to find code.</p> <p>Note that this feature does not change how import paths are emitted by <code>tsc</code>, so <code>paths</code> should only be used to inform TypeScript that another tool has this mapping and will use it at runtime or when bundling.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='resolveJsonModule-config'><a aria-label="Link to the compiler option: resolveJsonModule" id='resolveJsonModule' href='#resolveJsonModule' name='resolveJsonModule' aria-labelledby="resolveJsonModule-config">#</a> Resolve JSON Module - <code>resolveJsonModule</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Allows importing modules with a <code>.json</code> extension, which is a common practice in node projects. This includes generating a type for the <code>import</code> based on the static JSON shape.</p> <p>TypeScript does not support resolving JSON files by default:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: settings.json</span></div><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"repo"</span><span style="color: #000000">: </span><span style="color: #A31515">"TypeScript"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"dry"</span><span style="color: #000000">: </span><span style="color: #0000FF">false</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"debug"</span><span style="color: #000000">: </span><span style="color: #0000FF">false</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='import settings' >settings</data-lsp></span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515"><data-err>"./settings.json"</data-err></span><span style="color: #000000">;</span></div><span class="error"><span>Cannot find module './settings.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.</span><span class="code">2732</span></span><span class="error-behind">Cannot find module './settings.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.</span><div class='line'> </div><div class='line'><span style="color: #001080"><data-lsp lsp='import settings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >debug</data-lsp></span><span style="color: #000000"> === </span><span style="color: #0000FF">true</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='import settings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >dry</data-lsp></span><span style="color: #000000"> === </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwHYDMaBQIIAzASwBtIA7AQwFtJVFIAXJ4igc0QDoArROCrgDeuUGNAAiaJAAOcCagkAVAJ4zIAZQDG0YjKYSANKPESAJtBULQhKqUbHxks5ABGAV3bXb9yLgC++GDgJOTUdKhsLgAeXEyIuMQ0ctBMoIwsbJw28DSSXMAZrBzcfAISANy4uEVZ3C4e7KAAvK2gTNDukFW1JVwWKi1taBVAA'>Try</a></div></pre> <p>Enabling the option allows importing JSON, and validating the types in that JSON file.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: settings.json</span></div><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"repo"</span><span style="color: #000000">: </span><span style="color: #A31515">"TypeScript"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"dry"</span><span style="color: #000000">: </span><span style="color: #0000FF">false</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #A31515">"debug"</span><span style="color: #000000">: </span><span style="color: #0000FF">false</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='import settings' >settings</data-lsp></span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./settings.json"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #001080"><data-lsp lsp='import settings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) "debug": boolean' >debug</data-lsp></span><span style="color: #000000"> === </span><span style="color: #0000FF">true</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='import settings' >settings</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) "dry": boolean' >dry</data-lsp></span><span style="color: #000000"> === </span><span style="color: #098658">2</span><span style="color: #000000">;</span></div><span class="error"><span>This comparison appears to be unintentional because the types 'boolean' and 'number' have no overlap.</span><span class="code">2367</span></span><span class="error-behind">This comparison appears to be unintentional because the types 'boolean' and 'number' have no overlap.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYBsB2AUCBNJInADYBukAUqQHYCycAJgK5mQFjgC2L7kVAGM4PPnQBWiLhD5sOAJRLlWAFwCWcOqjotOhcADN1HOgEMeg0IkiqNdAOaIAdFK14A3nlA-QAImIABzg-VD8AFQBPQMgAZSFodUDVPwAab18-ZmhI0NBDMzIbdN9-ZkgAI1YHPIKizgBfGSMTSHNLVHU6coAPZ1VpdR5g6FVrW3snfPgef2dgGzsup1d6PwBuPDxFyZdyqodQAF4T0FVoVkhNneW9nOPTtHWgA'>Try</a></div></pre> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='resolvePackageJsonExports-config'><a aria-label="Link to the compiler option: resolvePackageJsonExports" id='resolvePackageJsonExports' href='#resolvePackageJsonExports' name='resolvePackageJsonExports' aria-labelledby="resolvePackageJsonExports-config">#</a> Resolve package.json Exports - <code>resolvePackageJsonExports</code></h3> <div class='compiler-content'> <div class='markdown'> <p><code>--resolvePackageJsonExports</code> forces TypeScript to consult <a href="https://nodejs.org/api/packages.html#exports">the <code>exports</code> field of <code>package.json</code> files</a> if it ever reads from a package in <code>node_modules</code>.</p> <p>This option defaults to <code>true</code> under the <code>node16</code>, <code>nodenext</code>, and <code>bundler</code> options for <a href="#moduleResolution"><code>--moduleResolution</code></a>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> when <a href="#moduleResolution"><code>moduleResolution</code></a> is <code>node16</code>, <code>nodenext</code>, or <code>bundler</code>; otherwise <code>false</code></p> </li> <li><span>Related:</span><ul><li><p><a href='#moduleResolution' aria-label="Jump to compiler option info for moduleResolution" ><code>moduleResolution</code></a></p> </li><li><p><a href='#customConditions' aria-label="Jump to compiler option info for customConditions" ><code>customConditions</code></a></p> </li><li><p><a href='#resolvePackageJsonImports' aria-label="Jump to compiler option info for resolvePackageJsonImports" ><code>resolvePackageJsonImports</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='resolvePackageJsonImports-config'><a aria-label="Link to the compiler option: resolvePackageJsonImports" id='resolvePackageJsonImports' href='#resolvePackageJsonImports' name='resolvePackageJsonImports' aria-labelledby="resolvePackageJsonImports-config">#</a> Resolve package.json Imports - <code>resolvePackageJsonImports</code></h3> <div class='compiler-content'> <div class='markdown'> <p><code>--resolvePackageJsonImports</code> forces TypeScript to consult <a href="https://nodejs.org/api/packages.html#imports">the <code>imports</code> field of <code>package.json</code> files</a> when performing a lookup that starts with <code>#</code> from a file whose ancestor directory contains a <code>package.json</code>.</p> <p>This option defaults to <code>true</code> under the <code>node16</code>, <code>nodenext</code>, and <code>bundler</code> options for <a href="#moduleResolution"><code>--moduleResolution</code></a>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> when <a href="#moduleResolution"><code>moduleResolution</code></a> is <code>node16</code>, <code>nodenext</code>, or <code>bundler</code>; otherwise <code>false</code></p> </li> <li><span>Related:</span><ul><li><p><a href='#moduleResolution' aria-label="Jump to compiler option info for moduleResolution" ><code>moduleResolution</code></a></p> </li><li><p><a href='#customConditions' aria-label="Jump to compiler option info for customConditions" ><code>customConditions</code></a></p> </li><li><p><a href='#resolvePackageJsonExports' aria-label="Jump to compiler option info for resolvePackageJsonExports" ><code>resolvePackageJsonExports</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='rootDir-config'><a aria-label="Link to the compiler option: rootDir" id='rootDir' href='#rootDir' name='rootDir' aria-labelledby="rootDir-config">#</a> Root Dir - <code>rootDir</code></h3> <div class='compiler-content'> <div class='markdown'> <p><strong>Default</strong>: The longest common path of all non-declaration input files. If <a href="#composite"><code>composite</code></a> is set, the default is instead the directory containing the <code>tsconfig.json</code> file.</p> <p>When TypeScript compiles files, it keeps the same directory structure in the output directory as exists in the input directory.</p> <p>For example, let’s say you have some input files:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">MyProj</span></div><div class='line'><span style="color: undefined">├── tsconfig.json</span></div><div class='line'><span style="color: undefined">├── core</span></div><div class='line'><span style="color: undefined">│ ├── a.ts</span></div><div class='line'><span style="color: undefined">│ ├── b.ts</span></div><div class='line'><span style="color: undefined">│ ├── sub</span></div><div class='line'><span style="color: undefined">│ │ ├── c.ts</span></div><div class='line'><span style="color: undefined">├── types.d.ts</span></div></code></div></pre> <p>The inferred value for <code>rootDir</code> is the longest common path of all non-declaration input files, which in this case is <code>core/</code>.</p> <p>If your <a href="#outDir"><code>outDir</code></a> was <code>dist</code>, TypeScript would write this tree:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">MyProj</span></div><div class='line'><span style="color: undefined">├── dist</span></div><div class='line'><span style="color: undefined">│ ├── a.js</span></div><div class='line'><span style="color: undefined">│ ├── b.js</span></div><div class='line'><span style="color: undefined">│ ├── sub</span></div><div class='line'><span style="color: undefined">│ │ ├── c.js</span></div></code></div></pre> <p>However, you may have intended for <code>core</code> to be part of the output directory structure. By setting <code>rootDir: "."</code> in <code>tsconfig.json</code>, TypeScript would write this tree:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">MyProj</span></div><div class='line'><span style="color: undefined">├── dist</span></div><div class='line'><span style="color: undefined">│ ├── core</span></div><div class='line'><span style="color: undefined">│ │ ├── a.js</span></div><div class='line'><span style="color: undefined">│ │ ├── b.js</span></div><div class='line'><span style="color: undefined">│ │ ├── sub</span></div><div class='line'><span style="color: undefined">│ │ │ ├── c.js</span></div></code></div></pre> <p>Importantly, <code>rootDir</code> <strong>does not affect which files become part of the compilation</strong>. It has no interaction with the <a href="#include"><code>include</code></a>, <a href="#exclude"><code>exclude</code></a>, or <a href="#files"><code>files</code></a> <code>tsconfig.json</code> settings.</p> <p>Note that TypeScript will never write an output file to a directory outside of <a href="#outDir"><code>outDir</code></a>, and will never skip emitting a file. For this reason, <code>rootDir</code> also enforces that all files which need to be emitted are underneath the <code>rootDir</code> path.</p> <p>For example, let’s say you had this tree:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">MyProj</span></div><div class='line'><span style="color: undefined">├── tsconfig.json</span></div><div class='line'><span style="color: undefined">├── core</span></div><div class='line'><span style="color: undefined">│ ├── a.ts</span></div><div class='line'><span style="color: undefined">│ ├── b.ts</span></div><div class='line'><span style="color: undefined">├── helpers.ts</span></div></code></div></pre> <p>It would be an error to specify <code>rootDir</code> as <code>core</code> <em>and</em> <a href="#include"><code>include</code></a> as <code>*</code> because it creates a file (<code>helpers.ts</code>) that would need to be emitted <em>outside</em> the <a href="#outDir"><code>outDir</code></a> (i.e. <code>../helpers.js</code>).</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p>Computed from the list of input files.</p> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.5" href="/docs/handbook/release-notes/typescript-1-5.html">1.5</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='rootDirs-config'><a aria-label="Link to the compiler option: rootDirs" id='rootDirs' href='#rootDirs' name='rootDirs' aria-labelledby="rootDirs-config">#</a> Root Dirs - <code>rootDirs</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Using <code>rootDirs</code>, you can inform the compiler that there are many “virtual” directories acting as a single root. This allows the compiler to resolve relative module imports within these “virtual” directories, as if they were merged in to one directory.</p> <p>For example:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined"> src</span></div><div class='line'><span style="color: undefined"> └── views</span></div><div class='line'><span style="color: undefined"> └── view1.ts (can import "./template1", "./view2`)</span></div><div class='line'><span style="color: undefined"> └── view2.ts (can import "./template1", "./view1`)</span></div><div class='line'><span style="color: undefined"></span></div><div class='line'><span style="color: undefined"> generated</span></div><div class='line'><span style="color: undefined"> └── templates</span></div><div class='line'><span style="color: undefined"> └── views</span></div><div class='line'><span style="color: undefined"> └── template1.ts (can import "./view1", "./view2")</span></div></code></div></pre> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#rootDirs'><data-lsp lsp="Allow multiple folders to be treated as one when resolving modules.">rootDirs</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"src/views"</span><span style="color: #000000">, </span><span style="color: #A31515">"generated/templates/views"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>This does not affect how TypeScript emits JavaScript, it only emulates the assumption that they will be able to work via those relative paths at runtime.</p> <p><code>rootDirs</code> can be used to provide a separate “type layer” to files that are not TypeScript or JavaScript by providing a home for generated <code>.d.ts</code> files in another folder. This technique is useful for bundled applications where you use <code>import</code> of files that aren’t necessarily code:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">sh</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000"> src</span></div><div class='line'><span style="color: #000000"> └── index.ts</span></div><div class='line'><span style="color: #000000"> └── css</span></div><div class='line'><span style="color: #000000"> └── main.css</span></div><div class='line'><span style="color: #000000"> └── navigation.css</span></div><div class='line'></div><div class='line'><span style="color: #000000"> generated</span></div><div class='line'><span style="color: #000000"> └── css</span></div><div class='line'><span style="color: #000000"> └── main.css.d.ts</span></div><div class='line'><span style="color: #000000"> └── navigation.css.d.ts</span></div></code></div></pre> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#rootDirs'><data-lsp lsp="Allow multiple folders to be treated as one when resolving modules.">rootDirs</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"src"</span><span style="color: #000000">, </span><span style="color: #A31515">"generated"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>This technique lets you generate types ahead of time for the non-code source files. Imports then work naturally based off the source file’s location. For example <code>./src/index.ts</code> can import the file <code>./src/css/main.css</code> and TypeScript will be aware of the bundler’s behavior for that filetype via the corresponding generated declaration file.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(alias) const appClass: "mainClassF3EC2" import appClass' >appClass</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./main.css"</span><span style="color: #000000">;</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDMEsBsFMB2BDAtvAXKVzqIHQDGAzsfgCb4AuxAUPAB4AOA9gE5WiEuLGfJMmAYVjJSoALygARDjwixxAGIBmAKJCATNIDctEKAC0xwgFcqxw-rBQ4SNJlB5yjanWipWHUAG9QA4VFxAF9QSDYWVBl8YDkCEmJdIA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Default:</span><p>Computed from the list of input files.</p> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='typeRoots-config'><a aria-label="Link to the compiler option: typeRoots" id='typeRoots' href='#typeRoots' name='typeRoots' aria-labelledby="typeRoots-config">#</a> Type Roots - <code>typeRoots</code></h3> <div class='compiler-content'> <div class='markdown'> <p>By default all <em>visible</em> ”<code>@types</code>” packages are included in your compilation. Packages in <code>node_modules/@types</code> of any enclosing folder are considered <em>visible</em>. For example, that means packages within <code>./node_modules/@types/</code>, <code>../node_modules/@types/</code>, <code>../../node_modules/@types/</code>, and so on.</p> <p>If <code>typeRoots</code> is specified, <em>only</em> packages under <code>typeRoots</code> will be included. For example:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#typeRoots'><data-lsp lsp="Specify multiple folders that act like `./node_modules/@types`.">typeRoots</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"./typings"</span><span style="color: #000000">, </span><span style="color: #A31515">"./vendor/types"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>This config file will include <em>all</em> packages under <code>./typings</code> and <code>./vendor/types</code>, and no packages from <code>./node_modules/@types</code>. All paths are relative to the <code>tsconfig.json</code>.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#types' aria-label="Jump to compiler option info for types" ><code>types</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='types-config'><a aria-label="Link to the compiler option: types" id='types' href='#types' name='types' aria-labelledby="types-config">#</a> Types - <code>types</code></h3> <div class='compiler-content'> <div class='markdown'> <p>By default all <em>visible</em> ”<code>@types</code>” packages are included in your compilation. Packages in <code>node_modules/@types</code> of any enclosing folder are considered <em>visible</em>. For example, that means packages within <code>./node_modules/@types/</code>, <code>../node_modules/@types/</code>, <code>../../node_modules/@types/</code>, and so on.</p> <p>If <code>types</code> is specified, only packages listed will be included in the global scope. For instance:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#types'><data-lsp lsp="Specify type package names to be included without being referenced in a source file.">types</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"node"</span><span style="color: #000000">, </span><span style="color: #A31515">"jest"</span><span style="color: #000000">, </span><span style="color: #A31515">"express"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>This <code>tsconfig.json</code> file will <em>only</em> include <code>./node_modules/@types/node</code>, <code>./node_modules/@types/jest</code> and <code>./node_modules/@types/express</code>. Other packages under <code>node_modules/@types/*</code> will not be included.</p> <h3 id="what-does-this-affect" style="position:relative;"><a href="#what-does-this-affect" aria-label="what does this affect permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What does this affect?</h3> <p>This option does not affect how <code>@types/*</code> are included in your application code, for example if you had the above <code>compilerOptions</code> example with code like:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">moment</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"moment"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #795E26">moment</span><span style="color: #000000">().</span><span style="color: #795E26">format</span><span style="color: #000000">(</span><span style="color: #A31515">"MMMM Do YYYY, h:mm:ss a"</span><span style="color: #000000">);</span></div></code></div></pre> <p>The <code>moment</code> import would be fully typed.</p> <p>When you have this option set, by not including a module in the <code>types</code> array it:</p> <ul> <li>Will not add globals to your project (e.g <code>process</code> in node, or <code>expect</code> in Jest)</li> <li>Will not have exports appear as auto-import recommendations</li> </ul> <p>This feature differs from <a href="#typeRoots"><code>typeRoots</code></a> in that it is about specifying only the exact types you want included, whereas <a href="#typeRoots"><code>typeRoots</code></a> supports saying you want particular folders.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#typeRoots' aria-label="Jump to compiler option info for typeRoots" ><code>typeRoots</code></a></p> </li></ul></li></ul> </div></section> <div class='category'> <h2 id='Emit_6246' ><a href='#Emit_6246' name='Emit_6246' aria-label="Link to the section Emit" aria-labelledby='Emit_6246'>#</a>Emit</h2> </div> <section class='compiler-option'> <h3 id='declaration-config'><a aria-label="Link to the compiler option: declaration" id='declaration' href='#declaration' name='declaration' aria-labelledby="declaration-config">#</a> Declaration - <code>declaration</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Generate <code>.d.ts</code> files for every TypeScript or JavaScript file inside your project. These <code>.d.ts</code> files are type definition files which describe the external API of your module. With <code>.d.ts</code> files, tools like TypeScript can provide intellisense and accurate types for un-typed code.</p> <p>When <code>declaration</code> is set to <code>true</code>, running the compiler with this TypeScript code:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='let helloWorld: string' >helloWorld</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/KYDwDg9gTgLgBAG2PAFsBCIHVoICZwC8cARCgJYkDcQA'>Try</a></div></pre> <p>Will generate an <code>index.js</code> file like this:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAFMAeAHWAJ3VABttTpsyzYB1YsgE1AF5QAiaVTgbiA'>Try</a></div></pre> <p>With a corresponding <code>helloWorld.d.ts</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080">helloWorld</span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgF3QUwCYDFUAbLALlFQDscsAPAOhzvUgCgQIYEUM2xxqAxoQCGAJ2HpUsCi1oAHWKPShiy6FkKFYAdUWEcoALygARNFQmA3EA'>Try</a></div></pre> <p>When working with <code>.d.ts</code> files for JavaScript files you may want to use <a href="#emitDeclarationOnly"><code>emitDeclarationOnly</code></a> or use <a href="#outDir"><code>outDir</code></a> to ensure that the JavaScript files are not overwritten.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> if <a href="#composite"><code>composite</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#declarationDir' aria-label="Jump to compiler option info for declarationDir" ><code>declarationDir</code></a></p> </li><li><p><a href='#emitDeclarationOnly' aria-label="Jump to compiler option info for emitDeclarationOnly" ><code>emitDeclarationOnly</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.0" href="/docs/handbook/release-notes/typescript-1-0.html">1.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='declarationDir-config'><a aria-label="Link to the compiler option: declarationDir" id='declarationDir' href='#declarationDir' name='declarationDir' aria-labelledby="declarationDir-config">#</a> Declaration Dir - <code>declarationDir</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Offers a way to configure the root directory for where declaration files are emitted.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">example</span></div><div class='line'><span style="color: undefined">├── index.ts</span></div><div class='line'><span style="color: undefined">├── package.json</span></div><div class='line'><span style="color: undefined">└── tsconfig.json</span></div></code></div></pre> <p>with this <code>tsconfig.json</code>:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#declaration'><data-lsp lsp="Generate .d.ts files from TypeScript and JavaScript files in your project.">declaration</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#declarationDir'><data-lsp lsp="Specify the output directory for generated declaration files.">declarationDir</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"./types"</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Would place the d.ts for the <code>index.ts</code> in a <code>types</code> folder:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">example</span></div><div class='line'><span style="color: undefined">├── index.js</span></div><div class='line'><span style="color: undefined">├── index.ts</span></div><div class='line'><span style="color: undefined">├── package.json</span></div><div class='line'><span style="color: undefined">├── tsconfig.json</span></div><div class='line'><span style="color: undefined">└── types</span></div><div class='line'><span style="color: undefined"> └── index.d.ts</span></div></code></div></pre> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#declaration' aria-label="Jump to compiler option info for declaration" ><code>declaration</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='declarationMap-config'><a aria-label="Link to the compiler option: declarationMap" id='declarationMap' href='#declarationMap' name='declarationMap' aria-labelledby="declarationMap-config">#</a> Declaration Map - <code>declarationMap</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Generates a source map for <code>.d.ts</code> files which map back to the original <code>.ts</code> source file. This will allow editors such as VS Code to go to the original <code>.ts</code> file when using features like <em>Go to Definition</em>.</p> <p>You should strongly consider turning this on if you’re using project references.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.9" href="/docs/handbook/release-notes/typescript-2-9.html">2.9</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='downlevelIteration-config'><a aria-label="Link to the compiler option: downlevelIteration" id='downlevelIteration' href='#downlevelIteration' name='downlevelIteration' aria-labelledby="downlevelIteration-config">#</a> Downlevel Iteration - <code>downlevelIteration</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Downleveling is TypeScript’s term for transpiling to an older version of JavaScript. This flag is to enable support for a more accurate implementation of how modern JavaScript iterates through new concepts in older JavaScript runtimes.</p> <p>ECMAScript 6 added several new iteration primitives: the <code>for / of</code> loop (<code>for (el of arr)</code>), Array spread (<code>[a, ...b]</code>), argument spread (<code>fn(...args)</code>), and <code>Symbol.iterator</code>. <code>downlevelIteration</code> allows for these iteration primitives to be used more accurately in ES5 environments if a <code>Symbol.iterator</code> implementation is present.</p> <h4 id="example-effects-on-for--of" style="position:relative;"><a href="#example-effects-on-for--of" aria-label="example effects on for of permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example: Effects on <code>for / of</code></h4> <p>With this TypeScript code:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const str: "Hello!"' >str</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"Hello!"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const s: string' >s</data-lsp></span><span style="color: #000000"> </span><span style="color: #0000FF">of</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='const str: "Hello!"' >str</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='const s: string' >s</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/MYewdgzgLgBNBOMC8MBEAJApgG2yAhKgNwBQAZiIgBSiSwQwhlxTwCUMA3iTDLRCGyYAdHgDmVCG1IBfIA'>Try</a></div></pre> <p>Without <code>downlevelIteration</code> enabled, a <code>for / of</code> loop on any object is downleveled to a traditional <code>for</code> loop:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">str</span><span style="color: #000000"> = </span><span style="color: #A31515">"Hello!"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">_i</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">str_1</span><span style="color: #000000"> = </span><span style="color: #001080">str</span><span style="color: #000000">; </span><span style="color: #001080">_i</span><span style="color: #000000"> < </span><span style="color: #001080">str_1</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000">; </span><span style="color: #001080">_i</span><span style="color: #000000">++) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">s</span><span style="color: #000000"> = </span><span style="color: #001080">str_1</span><span style="color: #000000">[</span><span style="color: #001080">_i</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">s</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEBcEMCcHMCmkBcoCiBlArAKBBAM4AWA9gO7oC2AlpLgMakB2hkobsoAvKAEQAJRABthpAIR8A3LgBmpLgAomrdoVClZHSLACUoAN65QoFYVLDEAOjHxFhXTIC+QA'>Try</a></div></pre> <p>This is often what people expect, but it’s not 100% compliant with ECMAScript iteration protocol. Certain strings, such as emoji (😜), have a <code>.length</code> of 2 (or even more!), but should iterate as 1 unit in a <code>for-of</code> loop. See <a href="https://blog.jonnew.com/posts/poo-dot-length-equals-two">this blog post by Jonathan New</a> for a longer explanation.</p> <p>When <code>downlevelIteration</code> is enabled, TypeScript will use a helper function that checks for a <code>Symbol.iterator</code> implementation (either native or polyfill). If this implementation is missing, you’ll fall back to index-based iteration.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__values</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__values</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">s</span><span style="color: #000000"> = </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Symbol</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000"> && </span><span style="color: #1C6277">Symbol</span><span style="color: #000000">.</span><span style="color: #001080">iterator</span><span style="color: #000000">, </span><span style="color: #001080">m</span><span style="color: #000000"> = </span><span style="color: #001080">s</span><span style="color: #000000"> && </span><span style="color: #001080">o</span><span style="color: #000000">[</span><span style="color: #001080">s</span><span style="color: #000000">], </span><span style="color: #001080">i</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">m</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">m</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">o</span><span style="color: #000000"> && </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #001080">o</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000"> === </span><span style="color: #A31515">"number"</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">next</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> () {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">o</span><span style="color: #000000"> && </span><span style="color: #001080">i</span><span style="color: #000000"> >= </span><span style="color: #001080">o</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000">) </span><span style="color: #001080">o</span><span style="color: #000000"> = </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #001080">o</span><span style="color: #000000"> && </span><span style="color: #001080">o</span><span style="color: #000000">[</span><span style="color: #001080">i</span><span style="color: #000000">++], </span><span style="color: #001080">done:</span><span style="color: #000000"> !</span><span style="color: #001080">o</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #1C6277">TypeError</span><span style="color: #000000">(</span><span style="color: #001080">s</span><span style="color: #000000"> ? </span><span style="color: #A31515">"Object is not iterable."</span><span style="color: #000000"> : </span><span style="color: #A31515">"Symbol.iterator is not defined."</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">e_1</span><span style="color: #000000">, </span><span style="color: #001080">_a</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">str</span><span style="color: #000000"> = </span><span style="color: #A31515">"Hello!"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">str_1</span><span style="color: #000000"> = </span><span style="color: #795E26">__values</span><span style="color: #000000">(</span><span style="color: #001080">str</span><span style="color: #000000">), </span><span style="color: #001080">str_1_1</span><span style="color: #000000"> = </span><span style="color: #001080">str_1</span><span style="color: #000000">.</span><span style="color: #795E26">next</span><span style="color: #000000">(); !</span><span style="color: #001080">str_1_1</span><span style="color: #000000">.</span><span style="color: #001080">done</span><span style="color: #000000">; </span><span style="color: #001080">str_1_1</span><span style="color: #000000"> = </span><span style="color: #001080">str_1</span><span style="color: #000000">.</span><span style="color: #795E26">next</span><span style="color: #000000">()) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">s</span><span style="color: #000000"> = </span><span style="color: #001080">str_1_1</span><span style="color: #000000">.</span><span style="color: #001080">value</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">s</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080">e_1_1</span><span style="color: #000000">) { </span><span style="color: #001080">e_1</span><span style="color: #000000"> = { </span><span style="color: #001080">error:</span><span style="color: #000000"> </span><span style="color: #001080">e_1_1</span><span style="color: #000000"> }; }</span></div><div class='line'><span style="color: #AF00DB">finally</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">str_1_1</span><span style="color: #000000"> && !</span><span style="color: #001080">str_1_1</span><span style="color: #000000">.</span><span style="color: #001080">done</span><span style="color: #000000"> && (</span><span style="color: #001080">_a</span><span style="color: #000000"> = </span><span style="color: #001080">str_1</span><span style="color: #000000">.</span><span style="color: #001080">return</span><span style="color: #000000">)) </span><span style="color: #001080">_a</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">str_1</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">finally</span><span style="color: #000000"> { </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">e_1</span><span style="color: #000000">) </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #001080">e_1</span><span style="color: #000000">.</span><span style="color: #001080">error</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEBcEMCcHMCmkBcoCiBlArAKBBACYD2A7gHYA2iAbopQJKSKzSQCWx5+Y4AzgAsy6ALbtIuAMZc+kULNigAvKABEACXqViAQlUBuXADNiigBTTys+aGJH5kWAEpQAb1yhQlvsWoA6bXgzPidDAF8gA'>Try</a></div></pre> <p>You can use <a href="https://www.npmjs.com/package/tslib">tslib</a> via <a href="#importHelpers"><code>importHelpers</code></a> to reduce the amount of inline JavaScript too:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__values</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__values</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">s</span><span style="color: #000000"> = </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Symbol</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000"> && </span><span style="color: #1C6277">Symbol</span><span style="color: #000000">.</span><span style="color: #001080">iterator</span><span style="color: #000000">, </span><span style="color: #001080">m</span><span style="color: #000000"> = </span><span style="color: #001080">s</span><span style="color: #000000"> && </span><span style="color: #001080">o</span><span style="color: #000000">[</span><span style="color: #001080">s</span><span style="color: #000000">], </span><span style="color: #001080">i</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">m</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">m</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">o</span><span style="color: #000000"> && </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #001080">o</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000"> === </span><span style="color: #A31515">"number"</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">next</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> () {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">o</span><span style="color: #000000"> && </span><span style="color: #001080">i</span><span style="color: #000000"> >= </span><span style="color: #001080">o</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000">) </span><span style="color: #001080">o</span><span style="color: #000000"> = </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #001080">o</span><span style="color: #000000"> && </span><span style="color: #001080">o</span><span style="color: #000000">[</span><span style="color: #001080">i</span><span style="color: #000000">++], </span><span style="color: #001080">done:</span><span style="color: #000000"> !</span><span style="color: #001080">o</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #1C6277">TypeError</span><span style="color: #000000">(</span><span style="color: #001080">s</span><span style="color: #000000"> ? </span><span style="color: #A31515">"Object is not iterable."</span><span style="color: #000000"> : </span><span style="color: #A31515">"Symbol.iterator is not defined."</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">e_1</span><span style="color: #000000">, </span><span style="color: #001080">_a</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">str</span><span style="color: #000000"> = </span><span style="color: #A31515">"Hello!"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">str_1</span><span style="color: #000000"> = </span><span style="color: #795E26">__values</span><span style="color: #000000">(</span><span style="color: #001080">str</span><span style="color: #000000">), </span><span style="color: #001080">str_1_1</span><span style="color: #000000"> = </span><span style="color: #001080">str_1</span><span style="color: #000000">.</span><span style="color: #795E26">next</span><span style="color: #000000">(); !</span><span style="color: #001080">str_1_1</span><span style="color: #000000">.</span><span style="color: #001080">done</span><span style="color: #000000">; </span><span style="color: #001080">str_1_1</span><span style="color: #000000"> = </span><span style="color: #001080">str_1</span><span style="color: #000000">.</span><span style="color: #795E26">next</span><span style="color: #000000">()) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">s</span><span style="color: #000000"> = </span><span style="color: #001080">str_1_1</span><span style="color: #000000">.</span><span style="color: #001080">value</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">s</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080">e_1_1</span><span style="color: #000000">) { </span><span style="color: #001080">e_1</span><span style="color: #000000"> = { </span><span style="color: #001080">error:</span><span style="color: #000000"> </span><span style="color: #001080">e_1_1</span><span style="color: #000000"> }; }</span></div><div class='line'><span style="color: #AF00DB">finally</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">str_1_1</span><span style="color: #000000"> && !</span><span style="color: #001080">str_1_1</span><span style="color: #000000">.</span><span style="color: #001080">done</span><span style="color: #000000"> && (</span><span style="color: #001080">_a</span><span style="color: #000000"> = </span><span style="color: #001080">str_1</span><span style="color: #000000">.</span><span style="color: #001080">return</span><span style="color: #000000">)) </span><span style="color: #001080">_a</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">str_1</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">finally</span><span style="color: #000000"> { </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">e_1</span><span style="color: #000000">) </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #001080">e_1</span><span style="color: #000000">.</span><span style="color: #001080">error</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEBcEMCcHMCmkBcoCiBlArAKBBACYD2A7gHYA2iAbopQJKSKzSQCWx5+Y47AtgAdisSAAl6glgGceEaQAsy6fu0i4Axl2mRQO2KAC8oAEQTKlYgEITAblwAzEaAAUW8jr2hiDvZFgAlKAA3rigoO7SxNQAdJbwLtIB9gC+QA'>Try</a></div></pre> <p><strong>Note:</strong> enabling <code>downlevelIteration</code> does not improve compliance if <code>Symbol.iterator</code> is not present in the runtime.</p> <h4 id="example-effects-on-array-spreads" style="position:relative;"><a href="#example-effects-on-array-spreads" aria-label="example effects on array spreads permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example: Effects on Array Spreads</h4> <p>This is an array spread:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// Make a new array whose elements are 1 followed by the elements of arr2</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">arr</span><span style="color: #000000"> = [</span><span style="color: #098658">1</span><span style="color: #000000">, ...</span><span style="color: #001080">arr2</span><span style="color: #000000">];</span></div></code></div></pre> <p>Based on the description, it sounds easy to downlevel to ES5:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// The same, right?</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">arr</span><span style="color: #000000"> = [</span><span style="color: #098658">1</span><span style="color: #000000">].</span><span style="color: #795E26">concat</span><span style="color: #000000">(</span><span style="color: #001080">arr2</span><span style="color: #000000">);</span></div></code></div></pre> <p>However, this is observably different in certain rare cases.</p> <p>For example, if a source array is missing one or more items (contains a hole), the spread syntax will replace each empty item with <code>undefined</code>, whereas <code>.concat</code> will leave them intact.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// Make an array where the element at index 1 is missing</span></div><div class='line'><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080">arrayWithHole</span><span style="color: #000000"> = [</span><span style="color: #A31515">"a"</span><span style="color: #000000">, , </span><span style="color: #A31515">"c"</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080">spread</span><span style="color: #000000"> = [...</span><span style="color: #001080">arrayWithHole</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #0000FF">let</span><span style="color: #000000"> </span><span style="color: #001080">concatenated</span><span style="color: #000000"> = [].</span><span style="color: #795E26">concat</span><span style="color: #000000">(</span><span style="color: #001080">arrayWithHole</span><span style="color: #000000">);</span></div><div class='line'></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">arrayWithHole</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #008000">// [ 'a', <1 empty item>, 'c' ]</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">spread</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #008000">// [ 'a', undefined, 'c' ]</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">concatenated</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #008000">// [ 'a', <1 empty item>, 'c' ]</span></div></code></div></pre> <p>Just as with <code>for / of</code>, <code>downlevelIteration</code> will use <code>Symbol.iterator</code> (if present) to more accurately emulate ES 6 behavior.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#importHelpers' aria-label="Jump to compiler option info for importHelpers" ><code>importHelpers</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.3" href="/docs/handbook/release-notes/typescript-2-3.html">2.3</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='emitBOM-config'><a aria-label="Link to the compiler option: emitBOM" id='emitBOM' href='#emitBOM' name='emitBOM' aria-labelledby="emitBOM-config">#</a> Emit BOM - <code>emitBOM</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Controls whether TypeScript will emit a <a href="https://wikipedia.org/wiki/Byte_order_mark">byte order mark (BOM)</a> when writing output files. Some runtime environments require a BOM to correctly interpret a JavaScript files; others require that it is not present. The default value of <code>false</code> is generally best unless you have a reason to change it.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='emitDeclarationOnly-config'><a aria-label="Link to the compiler option: emitDeclarationOnly" id='emitDeclarationOnly' href='#emitDeclarationOnly' name='emitDeclarationOnly' aria-labelledby="emitDeclarationOnly-config">#</a> Emit Declaration Only - <code>emitDeclarationOnly</code></h3> <div class='compiler-content'> <div class='markdown'> <p><em>Only</em> emit <code>.d.ts</code> files; do not emit <code>.js</code> files.</p> <p>This setting is useful in two cases:</p> <ul> <li>You are using a transpiler other than TypeScript to generate your JavaScript.</li> <li>You are using TypeScript to only generate <code>d.ts</code> files for your consumers.</li> </ul> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#declaration' aria-label="Jump to compiler option info for declaration" ><code>declaration</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.8" href="/docs/handbook/release-notes/typescript-2-8.html">2.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='importHelpers-config'><a aria-label="Link to the compiler option: importHelpers" id='importHelpers' href='#importHelpers' name='importHelpers' aria-labelledby="importHelpers-config">#</a> Import Helpers - <code>importHelpers</code></h3> <div class='compiler-content'> <div class='markdown'> <p>For certain downleveling operations, TypeScript uses some helper code for operations like extending class, spreading arrays or objects, and async operations. By default, these helpers are inserted into files which use them. This can result in code duplication if the same helper is used in many different modules.</p> <p>If the <code>importHelpers</code> flag is on, these helper functions are instead imported from the <a href="https://www.npmjs.com/package/tslib">tslib</a> module. You will need to ensure that the <code>tslib</code> module is able to be imported at runtime. This only affects modules; global script files will not attempt to import modules.</p> <p>For example, with this TypeScript:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">fn</span><span style="color: #000000">(</span><span style="color: #001080">arr</span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">[]) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">arr2</span><span style="color: #000000"> = [</span><span style="color: #098658">1</span><span style="color: #000000">, ...</span><span style="color: #001080">arr</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Turning on <a href="#downlevelIteration"><code>downlevelIteration</code></a> and <code>importHelpers</code> is still false:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__read</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__read</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">o</span><span style="color: #000000">, </span><span style="color: #001080">n</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">m</span><span style="color: #000000"> = </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Symbol</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000"> && </span><span style="color: #001080">o</span><span style="color: #000000">[</span><span style="color: #1C6277">Symbol</span><span style="color: #000000">.</span><span style="color: #001080">iterator</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (!</span><span style="color: #001080">m</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">o</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">i</span><span style="color: #000000"> = </span><span style="color: #001080">m</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">), </span><span style="color: #001080">r</span><span style="color: #000000">, </span><span style="color: #001080">ar</span><span style="color: #000000"> = [], </span><span style="color: #001080">e</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">while</span><span style="color: #000000"> ((</span><span style="color: #001080">n</span><span style="color: #000000"> === </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000"> || </span><span style="color: #001080">n</span><span style="color: #000000">-- > </span><span style="color: #098658">0</span><span style="color: #000000">) && !(</span><span style="color: #001080">r</span><span style="color: #000000"> = </span><span style="color: #001080">i</span><span style="color: #000000">.</span><span style="color: #795E26">next</span><span style="color: #000000">()).</span><span style="color: #001080">done</span><span style="color: #000000">) </span><span style="color: #001080">ar</span><span style="color: #000000">.</span><span style="color: #795E26">push</span><span style="color: #000000">(</span><span style="color: #001080">r</span><span style="color: #000000">.</span><span style="color: #001080">value</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080">error</span><span style="color: #000000">) { </span><span style="color: #001080">e</span><span style="color: #000000"> = { </span><span style="color: #001080">error:</span><span style="color: #000000"> </span><span style="color: #001080">error</span><span style="color: #000000"> }; }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">finally</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">r</span><span style="color: #000000"> && !</span><span style="color: #001080">r</span><span style="color: #000000">.</span><span style="color: #001080">done</span><span style="color: #000000"> && (</span><span style="color: #001080">m</span><span style="color: #000000"> = </span><span style="color: #001080">i</span><span style="color: #000000">[</span><span style="color: #A31515">"return"</span><span style="color: #000000">])) </span><span style="color: #001080">m</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">i</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">finally</span><span style="color: #000000"> { </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">e</span><span style="color: #000000">) </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #001080">e</span><span style="color: #000000">.</span><span style="color: #001080">error</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">ar</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__spreadArray</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__spreadArray</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">to</span><span style="color: #000000">, </span><span style="color: #001080">from</span><span style="color: #000000">, </span><span style="color: #001080">pack</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">pack</span><span style="color: #000000"> || </span><span style="color: #0000FF">arguments</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000"> === </span><span style="color: #098658">2</span><span style="color: #000000">) </span><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">i</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">l</span><span style="color: #000000"> = </span><span style="color: #001080">from</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000">, </span><span style="color: #001080">ar</span><span style="color: #000000">; </span><span style="color: #001080">i</span><span style="color: #000000"> < </span><span style="color: #001080">l</span><span style="color: #000000">; </span><span style="color: #001080">i</span><span style="color: #000000">++) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">ar</span><span style="color: #000000"> || !(</span><span style="color: #001080">i</span><span style="color: #000000"> </span><span style="color: #0000FF">in</span><span style="color: #000000"> </span><span style="color: #001080">from</span><span style="color: #000000">)) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (!</span><span style="color: #001080">ar</span><span style="color: #000000">) </span><span style="color: #001080">ar</span><span style="color: #000000"> = </span><span style="color: #1C6277">Array</span><span style="color: #000000">.</span><span style="color: #001080">prototype</span><span style="color: #000000">.</span><span style="color: #001080">slice</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">from</span><span style="color: #000000">, </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">i</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">ar</span><span style="color: #000000">[</span><span style="color: #001080">i</span><span style="color: #000000">] = </span><span style="color: #001080">from</span><span style="color: #000000">[</span><span style="color: #001080">i</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">to</span><span style="color: #000000">.</span><span style="color: #795E26">concat</span><span style="color: #000000">(</span><span style="color: #001080">ar</span><span style="color: #000000"> || </span><span style="color: #1C6277">Array</span><span style="color: #000000">.</span><span style="color: #001080">prototype</span><span style="color: #000000">.</span><span style="color: #001080">slice</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">from</span><span style="color: #000000">));</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">fn</span><span style="color: #000000">(</span><span style="color: #001080">arr</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">arr2</span><span style="color: #000000"> = </span><span style="color: #795E26">__spreadArray</span><span style="color: #000000">([</span><span style="color: #098658">1</span><span style="color: #000000">], </span><span style="color: #795E26">__read</span><span style="color: #000000">(</span><span style="color: #001080">arr</span><span style="color: #000000">), </span><span style="color: #0000FF">false</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgughgE4DmApugFyiIDKArNmOACYIB2ANiQG4nsYkE86VLFaYSADwAOsAulAAzAK6sAxsNGLWACkIFKrJcgBGAgNoBdAJSgA3plChVoyPL0AmUAF5QZgIwANKAAdKF6FgDcmAC+QA'>Try</a></div></pre> <p>Then turning on both <a href="#downlevelIteration"><code>downlevelIteration</code></a> and <code>importHelpers</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">__read</span><span style="color: #000000">, </span><span style="color: #001080">__spreadArray</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"tslib"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">fn</span><span style="color: #000000">(</span><span style="color: #001080">arr</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">arr2</span><span style="color: #000000"> = </span><span style="color: #795E26">__spreadArray</span><span style="color: #000000">([</span><span style="color: #098658">1</span><span style="color: #000000">], </span><span style="color: #795E26">__read</span><span style="color: #000000">(</span><span style="color: #001080">arr</span><span style="color: #000000">), </span><span style="color: #0000FF">false</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgughgE4DmApugFyiIDKArNmOACYIB2ANiQG4nsYkE86VLFYMIqZAAdYBdNF5SBkceFaxEBArJUkAHjLmgAZgFdWAY2GiTrABSEClVqeQAjAQG0AugEpQAN6YoKAWopDooI4ATKAAvKCeAIwANKAAdJmO3gDcmAC+QA'>Try</a></div></pre> <p>You can use <a href="#noEmitHelpers"><code>noEmitHelpers</code></a> when you provide your own implementations of these functions.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#noEmitHelpers' aria-label="Jump to compiler option info for noEmitHelpers" ><code>noEmitHelpers</code></a></p> </li><li><p><a href='#downlevelIteration' aria-label="Jump to compiler option info for downlevelIteration" ><code>downlevelIteration</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='inlineSourceMap-config'><a aria-label="Link to the compiler option: inlineSourceMap" id='inlineSourceMap' href='#inlineSourceMap' name='inlineSourceMap' aria-labelledby="inlineSourceMap-config">#</a> Inline Source Map - <code>inlineSourceMap</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When set, instead of writing out a <code>.js.map</code> file to provide source maps, TypeScript will embed the source map content in the <code>.js</code> files. Although this results in larger JS files, it can be convenient in some scenarios. For example, you might want to debug JS files on a webserver that doesn’t allow <code>.map</code> files to be served.</p> <p>Mutually exclusive with <a href="#sourceMap"><code>sourceMap</code></a>.</p> <p>For example, with this TypeScript:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">helloWorld</span><span style="color: #000000">);</span></div></code></div></pre> <p>Converts to this JavaScript:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">helloWorld</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAGNYDtJ1RoBTAGzNgHVYAnMgE1AF5QAiaVNgbh30lhkSAOkoBzABSkK1OowCU3IA'>Try</a></div></pre> <p>Then enable building it with <code>inlineSourceMap</code> enabled there is a comment at the bottom of the file which includes a source-map for the file.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">helloWorld</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #008000">//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMifQ==</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEEsDsBsYKYGUD2BXATgYwQWQIYAOAUCBAM4AWKA7gKIC2kALsVitOc6JQrLCgDqKDLAAmoALygARJUgyA3Gw7kUsBADoBAcwAUvfkJHiAlIqA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.5" href="/docs/handbook/release-notes/typescript-1-5.html">1.5</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='inlineSources-config'><a aria-label="Link to the compiler option: inlineSources" id='inlineSources' href='#inlineSources' name='inlineSources' aria-labelledby="inlineSources-config">#</a> Inline Sources - <code>inlineSources</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When set, TypeScript will include the original content of the <code>.ts</code> file as an embedded string in the source map (using the source map’s <code>sourcesContent</code> property). This is often useful in the same cases as <a href="#inlineSourceMap"><code>inlineSourceMap</code></a>.</p> <p>Requires either <a href="#sourceMap"><code>sourceMap</code></a> or <a href="#inlineSourceMap"><code>inlineSourceMap</code></a> to be set.</p> <p>For example, with this TypeScript:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const helloWorld: "hi"' >helloWorld</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='const helloWorld: "hi"' >helloWorld</data-lsp></span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/MYewdgzgLgBAFgUwDZJAdRAJyQExgXhgCI4BLIgbgChRIQkEA6VAcwApEV0tcBKCoA'>Try</a></div></pre> <p>By default converts to this JavaScript:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">helloWorld</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAGNYDtJ1RoBTAGzNgHVYAnMgE1AF5QAiaVNgbh30lhkSAOkoBzABSkK1OowCU3IA'>Try</a></div></pre> <p>Then enable building it with <code>inlineSources</code> and <a href="#inlineSourceMap"><code>inlineSourceMap</code></a> enabled there is a comment at the bottom of the file which includes a source-map for the file. Note that the end is different from the example in <a href="#inlineSourceMap"><code>inlineSourceMap</code></a> because the source-map now contains the original source code also.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">helloWorld</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #008000">//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBoZWxsb1dvcmxkID0gXCJoaVwiO1xuY29uc29sZS5sb2coaGVsbG9Xb3JsZCk7Il19</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEEsDsBsYKYGUD2BXATgYwQZwFAgQzzTLrYICyAhgA6Fji4AWKA7gKIC2kALviwpouPqBYJYsFAHUUGWABNQAXlAAiFpHUBuQcNwpYCAHTSA5gAoJU2fKUBKHUA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.5" href="/docs/handbook/release-notes/typescript-1-5.html">1.5</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='mapRoot-config'><a aria-label="Link to the compiler option: mapRoot" id='mapRoot' href='#mapRoot' name='mapRoot' aria-labelledby="mapRoot-config">#</a> Map Root - <code>mapRoot</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specify the location where debugger should locate map files instead of generated locations. This string is treated verbatim inside the source-map, for example:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#sourceMap'><data-lsp lsp="Create source map files for emitted JavaScript files.">sourceMap</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#mapRoot'><data-lsp lsp="Specify the location where debugger should locate map files instead of generated locations.">mapRoot</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"https://my-website.com/debug/sourcemaps/"</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Would declare that <code>index.js</code> will have sourcemaps at <code>https://my-website.com/debug/sourcemaps/index.js.map</code>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='newLine-config'><a aria-label="Link to the compiler option: newLine" id='newLine' href='#newLine' name='newLine' aria-labelledby="newLine-config">#</a> New Line - <code>newLine</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specify the end of line sequence to be used when emitting files: ‘CRLF’ (dos) or ‘LF’ (unix).</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>lf</code></p> </li> <li><span>Allowed:</span><ul><li><p><code>crlf</code></p> </li><li><p><code>lf</code></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.5" href="/docs/handbook/release-notes/typescript-1-5.html">1.5</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noEmit-config'><a aria-label="Link to the compiler option: noEmit" id='noEmit' href='#noEmit' name='noEmit' aria-labelledby="noEmit-config">#</a> No Emit - <code>noEmit</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Do not emit compiler output files like JavaScript source code, source-maps or declarations.</p> <p>This makes room for another tool like <a href="https://babeljs.io">Babel</a>, or <a href="https://github.com/swc-project/swc">swc</a> to handle converting the TypeScript file to a file which can run inside a JavaScript environment.</p> <p>You can then use TypeScript as a tool for providing editor integration, and as a source code type-checker.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='noEmitHelpers-config'><a aria-label="Link to the compiler option: noEmitHelpers" id='noEmitHelpers' href='#noEmitHelpers' name='noEmitHelpers' aria-labelledby="noEmitHelpers-config">#</a> No Emit Helpers - <code>noEmitHelpers</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Instead of importing helpers with <a href="#importHelpers"><code>importHelpers</code></a>, you can provide implementations in the global scope for the helpers you use and completely turn off emitting of helper functions.</p> <p>For example, using this <code>async</code> function in ES5 requires a <code>await</code>-like function and <code>generator</code>-like function to run:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const getAPI: (url: string) => Promise<{}>' >getAPI</data-lsp></span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) url: string' >url</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Get API</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> {};</span></div><div class='line'><span style="color: #000000">};</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/MYewdgzgLgBA5gUygQQAoEkYF4YEMICeYwMAFAK4BOANgFwzSUCWYcAlNgHwwDeAUDBgB6ITADiSGGnQCYlJFTC8AvgG4+aoA'>Try</a></div></pre> <p>Which creates quite a lot of JavaScript:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__awaiter</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__awaiter</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">thisArg</span><span style="color: #000000">, </span><span style="color: #001080">_arguments</span><span style="color: #000000">, </span><span style="color: #001080">P</span><span style="color: #000000">, </span><span style="color: #001080">generator</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">adopt</span><span style="color: #000000">(</span><span style="color: #001080">value</span><span style="color: #000000">) { </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">value</span><span style="color: #000000"> </span><span style="color: #0000FF">instanceof</span><span style="color: #000000"> </span><span style="color: #1C6277">P</span><span style="color: #000000"> ? </span><span style="color: #001080">value</span><span style="color: #000000"> : </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">P</span><span style="color: #000000">(</span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">resolve</span><span style="color: #000000">) { </span><span style="color: #795E26">resolve</span><span style="color: #000000">(</span><span style="color: #001080">value</span><span style="color: #000000">); }); }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> (</span><span style="color: #0070C1">P</span><span style="color: #000000"> || (</span><span style="color: #0070C1">P</span><span style="color: #000000"> = </span><span style="color: #1C6277">Promise</span><span style="color: #000000">))(</span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">resolve</span><span style="color: #000000">, </span><span style="color: #001080">reject</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">fulfilled</span><span style="color: #000000">(</span><span style="color: #001080">value</span><span style="color: #000000">) { </span><span style="color: #AF00DB">try</span><span style="color: #000000"> { </span><span style="color: #795E26">step</span><span style="color: #000000">(</span><span style="color: #001080">generator</span><span style="color: #000000">.</span><span style="color: #795E26">next</span><span style="color: #000000">(</span><span style="color: #001080">value</span><span style="color: #000000">)); } </span><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080">e</span><span style="color: #000000">) { </span><span style="color: #795E26">reject</span><span style="color: #000000">(</span><span style="color: #001080">e</span><span style="color: #000000">); } }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">rejected</span><span style="color: #000000">(</span><span style="color: #001080">value</span><span style="color: #000000">) { </span><span style="color: #AF00DB">try</span><span style="color: #000000"> { </span><span style="color: #795E26">step</span><span style="color: #000000">(</span><span style="color: #001080">generator</span><span style="color: #000000">[</span><span style="color: #A31515">"throw"</span><span style="color: #000000">](</span><span style="color: #001080">value</span><span style="color: #000000">)); } </span><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080">e</span><span style="color: #000000">) { </span><span style="color: #795E26">reject</span><span style="color: #000000">(</span><span style="color: #001080">e</span><span style="color: #000000">); } }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">step</span><span style="color: #000000">(</span><span style="color: #001080">result</span><span style="color: #000000">) { </span><span style="color: #001080">result</span><span style="color: #000000">.</span><span style="color: #001080">done</span><span style="color: #000000"> ? </span><span style="color: #795E26">resolve</span><span style="color: #000000">(</span><span style="color: #001080">result</span><span style="color: #000000">.</span><span style="color: #001080">value</span><span style="color: #000000">) : </span><span style="color: #795E26">adopt</span><span style="color: #000000">(</span><span style="color: #001080">result</span><span style="color: #000000">.</span><span style="color: #001080">value</span><span style="color: #000000">).</span><span style="color: #795E26">then</span><span style="color: #000000">(</span><span style="color: #001080">fulfilled</span><span style="color: #000000">, </span><span style="color: #001080">rejected</span><span style="color: #000000">); }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">step</span><span style="color: #000000">((</span><span style="color: #001080">generator</span><span style="color: #000000"> = </span><span style="color: #001080">generator</span><span style="color: #000000">.</span><span style="color: #795E26">apply</span><span style="color: #000000">(</span><span style="color: #001080">thisArg</span><span style="color: #000000">, </span><span style="color: #001080">_arguments</span><span style="color: #000000"> || [])).</span><span style="color: #795E26">next</span><span style="color: #000000">());</span></div><div class='line'><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__generator</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__generator</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">thisArg</span><span style="color: #000000">, </span><span style="color: #001080">body</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">_</span><span style="color: #000000"> = { </span><span style="color: #001080">label:</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #795E26">sent</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000">() { </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] & </span><span style="color: #098658">1</span><span style="color: #000000">) </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">]; </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">]; }, </span><span style="color: #001080">trys:</span><span style="color: #000000"> [], </span><span style="color: #001080">ops:</span><span style="color: #000000"> [] }, </span><span style="color: #001080">f</span><span style="color: #000000">, </span><span style="color: #001080">y</span><span style="color: #000000">, </span><span style="color: #001080">t</span><span style="color: #000000">, </span><span style="color: #001080">g</span><span style="color: #000000"> = </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">create</span><span style="color: #000000">((</span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #001080">Iterator</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000"> ? </span><span style="color: #001080">Iterator</span><span style="color: #000000"> : </span><span style="color: #1C6277">Object</span><span style="color: #000000">).</span><span style="color: #001080">prototype</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">g</span><span style="color: #000000">.</span><span style="color: #001080">next</span><span style="color: #000000"> = </span><span style="color: #795E26">verb</span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000">), </span><span style="color: #001080">g</span><span style="color: #000000">[</span><span style="color: #A31515">"throw"</span><span style="color: #000000">] = </span><span style="color: #795E26">verb</span><span style="color: #000000">(</span><span style="color: #098658">1</span><span style="color: #000000">), </span><span style="color: #001080">g</span><span style="color: #000000">[</span><span style="color: #A31515">"return"</span><span style="color: #000000">] = </span><span style="color: #795E26">verb</span><span style="color: #000000">(</span><span style="color: #098658">2</span><span style="color: #000000">), </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Symbol</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000"> && (</span><span style="color: #001080">g</span><span style="color: #000000">[</span><span style="color: #1C6277">Symbol</span><span style="color: #000000">.</span><span style="color: #001080">iterator</span><span style="color: #000000">] = </span><span style="color: #0000FF">function</span><span style="color: #000000">() { </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">this</span><span style="color: #000000">; }), </span><span style="color: #001080">g</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">verb</span><span style="color: #000000">(</span><span style="color: #001080">n</span><span style="color: #000000">) { </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">v</span><span style="color: #000000">) { </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26">step</span><span style="color: #000000">([</span><span style="color: #001080">n</span><span style="color: #000000">, </span><span style="color: #001080">v</span><span style="color: #000000">]); }; }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">step</span><span style="color: #000000">(</span><span style="color: #001080">op</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">f</span><span style="color: #000000">) </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #1C6277">TypeError</span><span style="color: #000000">(</span><span style="color: #A31515">"Generator is already executing."</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">while</span><span style="color: #000000"> (</span><span style="color: #001080">g</span><span style="color: #000000"> && (</span><span style="color: #001080">g</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] && (</span><span style="color: #001080">_</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">)), </span><span style="color: #001080">_</span><span style="color: #000000">) </span><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">f</span><span style="color: #000000"> = </span><span style="color: #098658">1</span><span style="color: #000000">, </span><span style="color: #001080">y</span><span style="color: #000000"> && (</span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] & </span><span style="color: #098658">2</span><span style="color: #000000"> ? </span><span style="color: #001080">y</span><span style="color: #000000">[</span><span style="color: #A31515">"return"</span><span style="color: #000000">] : </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] ? </span><span style="color: #001080">y</span><span style="color: #000000">[</span><span style="color: #A31515">"throw"</span><span style="color: #000000">] || ((</span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #001080">y</span><span style="color: #000000">[</span><span style="color: #A31515">"return"</span><span style="color: #000000">]) && </span><span style="color: #001080">t</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">y</span><span style="color: #000000">), </span><span style="color: #098658">0</span><span style="color: #000000">) : </span><span style="color: #001080">y</span><span style="color: #000000">.</span><span style="color: #001080">next</span><span style="color: #000000">) && !(</span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #001080">t</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">y</span><span style="color: #000000">, </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">])).</span><span style="color: #001080">done</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">t</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">y</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">t</span><span style="color: #000000">) </span><span style="color: #001080">op</span><span style="color: #000000"> = [</span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] & </span><span style="color: #098658">2</span><span style="color: #000000">, </span><span style="color: #001080">t</span><span style="color: #000000">.</span><span style="color: #001080">value</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">switch</span><span style="color: #000000"> (</span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">]) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">: </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #098658">1</span><span style="color: #000000">: </span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #001080">op</span><span style="color: #000000">; </span><span style="color: #AF00DB">break</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #098658">4</span><span style="color: #000000">: </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">label</span><span style="color: #000000">++; </span><span style="color: #AF00DB">return</span><span style="color: #000000"> { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">], </span><span style="color: #001080">done:</span><span style="color: #000000"> </span><span style="color: #0000FF">false</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #098658">5</span><span style="color: #000000">: </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">label</span><span style="color: #000000">++; </span><span style="color: #001080">y</span><span style="color: #000000"> = </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">]; </span><span style="color: #001080">op</span><span style="color: #000000"> = [</span><span style="color: #098658">0</span><span style="color: #000000">]; </span><span style="color: #AF00DB">continue</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #098658">7</span><span style="color: #000000">: </span><span style="color: #001080">op</span><span style="color: #000000"> = </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">ops</span><span style="color: #000000">.</span><span style="color: #795E26">pop</span><span style="color: #000000">(); </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">trys</span><span style="color: #000000">.</span><span style="color: #795E26">pop</span><span style="color: #000000">(); </span><span style="color: #AF00DB">continue</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000">:</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (!(</span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">trys</span><span style="color: #000000">, </span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #001080">t</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000"> > </span><span style="color: #098658">0</span><span style="color: #000000"> && </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #001080">t</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000"> - </span><span style="color: #098658">1</span><span style="color: #000000">]) && (</span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] === </span><span style="color: #098658">6</span><span style="color: #000000"> || </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] === </span><span style="color: #098658">2</span><span style="color: #000000">)) { </span><span style="color: #001080">_</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">; </span><span style="color: #AF00DB">continue</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] === </span><span style="color: #098658">3</span><span style="color: #000000"> && (!</span><span style="color: #001080">t</span><span style="color: #000000"> || (</span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">] > </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] && </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">] < </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">3</span><span style="color: #000000">]))) { </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">label</span><span style="color: #000000"> = </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">]; </span><span style="color: #AF00DB">break</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] === </span><span style="color: #098658">6</span><span style="color: #000000"> && </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">label</span><span style="color: #000000"> < </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">]) { </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">label</span><span style="color: #000000"> = </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">]; </span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #001080">op</span><span style="color: #000000">; </span><span style="color: #AF00DB">break</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">t</span><span style="color: #000000"> && </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">label</span><span style="color: #000000"> < </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">2</span><span style="color: #000000">]) { </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">label</span><span style="color: #000000"> = </span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">2</span><span style="color: #000000">]; </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">ops</span><span style="color: #000000">.</span><span style="color: #795E26">push</span><span style="color: #000000">(</span><span style="color: #001080">op</span><span style="color: #000000">); </span><span style="color: #AF00DB">break</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">t</span><span style="color: #000000">[</span><span style="color: #098658">2</span><span style="color: #000000">]) </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">ops</span><span style="color: #000000">.</span><span style="color: #795E26">pop</span><span style="color: #000000">();</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #001080">trys</span><span style="color: #000000">.</span><span style="color: #795E26">pop</span><span style="color: #000000">(); </span><span style="color: #AF00DB">continue</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">op</span><span style="color: #000000"> = </span><span style="color: #001080">body</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">thisArg</span><span style="color: #000000">, </span><span style="color: #001080">_</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080">e</span><span style="color: #000000">) { </span><span style="color: #001080">op</span><span style="color: #000000"> = [</span><span style="color: #098658">6</span><span style="color: #000000">, </span><span style="color: #001080">e</span><span style="color: #000000">]; </span><span style="color: #001080">y</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">; } </span><span style="color: #AF00DB">finally</span><span style="color: #000000"> { </span><span style="color: #001080">f</span><span style="color: #000000"> = </span><span style="color: #001080">t</span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">; }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] & </span><span style="color: #098658">5</span><span style="color: #000000">) </span><span style="color: #AF00DB">throw</span><span style="color: #000000"> </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">]; </span><span style="color: #AF00DB">return</span><span style="color: #000000"> { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">] ? </span><span style="color: #001080">op</span><span style="color: #000000">[</span><span style="color: #098658">1</span><span style="color: #000000">] : </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">done:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #795E26">getAPI</span><span style="color: #000000"> = </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">url</span><span style="color: #000000">) { </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26">__awaiter</span><span style="color: #000000">(</span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #0000FF">function</span><span style="color: #000000"> () {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26">__generator</span><span style="color: #000000">(</span><span style="color: #0000FF">this</span><span style="color: #000000">, </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">_a</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Get API</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> [</span><span style="color: #098658">2</span><span style="color: #000000"> </span><span style="color: #008000">/*return*/</span><span style="color: #000000">, {}];</span></div><div class='line'><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000">}); };</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgughgE4DmApugFyiIDKArJgMawB2k6op6AggAoCSoALyg8kAJ7MGoABQBXAgBtKbAqmZEAlEIB8oAN6ZQoHAHEyoXn0OgCZec30BfANyYXQA'>Try</a></div></pre> <p>Which can be switched out with your own globals via this flag:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #795E26">getAPI</span><span style="color: #000000"> = </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">url</span><span style="color: #000000">) { </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26">__awaiter</span><span style="color: #000000">(</span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #0000FF">function</span><span style="color: #000000"> () {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26">__generator</span><span style="color: #000000">(</span><span style="color: #0000FF">this</span><span style="color: #000000">, </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">_a</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// Get API</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> [</span><span style="color: #098658">2</span><span style="color: #000000"> </span><span style="color: #008000">/*return*/</span><span style="color: #000000">, {}];</span></div><div class='line'><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000">}); };</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAgughgE4DmApugFyiIDKArNmOAHawoYASJANgA4kGRMAY1hNI6UKXQBBAAoBJUAF5QeSAE8mQ0AAoArgS6VxBVEyIBKZQD5QAb0yhQOAOJlQc+Y9AEyBpvYAvgDcmCFAA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#importHelpers' aria-label="Jump to compiler option info for importHelpers" ><code>importHelpers</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.5" href="/docs/handbook/release-notes/typescript-1-5.html">1.5</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noEmitOnError-config'><a aria-label="Link to the compiler option: noEmitOnError" id='noEmitOnError' href='#noEmitOnError' name='noEmitOnError' aria-labelledby="noEmitOnError-config">#</a> No Emit On Error - <code>noEmitOnError</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Do not emit compiler output files like JavaScript source code, source-maps or declarations if any errors were reported.</p> <p>This defaults to <code>false</code>, making it easier to work with TypeScript in a watch-like environment where you may want to see results of changes to your code in another environment before making sure all errors are resolved.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.4" href="/docs/handbook/release-notes/typescript-1-4.html">1.4</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='outDir-config'><a aria-label="Link to the compiler option: outDir" id='outDir' href='#outDir' name='outDir' aria-labelledby="outDir-config">#</a> Out Dir - <code>outDir</code></h3> <div class='compiler-content'> <div class='markdown'> <p>If specified, <code>.js</code> (as well as <code>.d.ts</code>, <code>.js.map</code>, etc.) files will be emitted into this directory. The directory structure of the original source files is preserved; see <a href="#rootDir"><code>rootDir</code></a> if the computed root is not what you intended.</p> <p>If not specified, <code>.js</code> files will be emitted in the same directory as the <code>.ts</code> files they were generated from:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">sh</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">$ tsc</span></div><div class='line'></div><div class='line'><span style="color: #000000">example</span></div><div class='line'><span style="color: #000000">├── index.js</span></div><div class='line'><span style="color: #000000">└── index.ts</span></div></code></div></pre> <p>With a <code>tsconfig.json</code> like this:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#outDir'><data-lsp lsp="Specify an output folder for all emitted files.">outDir</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"dist"</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Running <code>tsc</code> with these settings moves the files into the specified <code>dist</code> folder:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">sh</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">$ tsc</span></div><div class='line'></div><div class='line'><span style="color: #000000">example</span></div><div class='line'><span style="color: #000000">├── dist</span></div><div class='line'><span style="color: #000000">│ └── index.js</span></div><div class='line'><span style="color: #000000">├── index.ts</span></div><div class='line'><span style="color: #000000">└── tsconfig.json</span></div></code></div></pre> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#out' aria-label="Jump to compiler option info for out" ><code>out</code></a></p> </li><li><p><a href='#outFile' aria-label="Jump to compiler option info for outFile" ><code>outFile</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='outFile-config'><a aria-label="Link to the compiler option: outFile" id='outFile' href='#outFile' name='outFile' aria-labelledby="outFile-config">#</a> Out File - <code>outFile</code></h3> <div class='compiler-content'> <div class='markdown'> <p>If specified, all <em>global</em> (non-module) files will be concatenated into the single output file specified.</p> <p>If <code>module</code> is <code>system</code> or <code>amd</code>, all module files will also be concatenated into this file after all global content.</p> <p>Note: <code>outFile</code> cannot be used unless <code>module</code> is <code>None</code>, <code>System</code>, or <code>AMD</code>. This option <em>cannot</em> be used to bundle CommonJS or ES6 modules.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#out' aria-label="Jump to compiler option info for out" ><code>out</code></a></p> </li><li><p><a href='#outDir' aria-label="Jump to compiler option info for outDir" ><code>outDir</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.0" href="/docs/handbook/release-notes/typescript-1-0.html">1.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='preserveConstEnums-config'><a aria-label="Link to the compiler option: preserveConstEnums" id='preserveConstEnums' href='#preserveConstEnums' name='preserveConstEnums' aria-labelledby="preserveConstEnums-config">#</a> Preserve Const Enums - <code>preserveConstEnums</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Do not erase <code>const enum</code> declarations in generated code. <code>const enum</code>s provide a way to reduce the overall memory footprint of your application at runtime by emitting the enum value instead of a reference.</p> <p>For example with this TypeScript:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0000FF">enum</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='const enum Album' >Album</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='(enum member) Album.JimmyEatWorldFutures = 1' >JimmyEatWorldFutures</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">1</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='(enum member) Album.TubRingZooHypothesis = 2' >TubRingZooHypothesis</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">2</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='(enum member) Album.DogFashionDiscoAdultery = 3' >DogFashionDiscoAdultery</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">3</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const selectedAlbum: Album.JimmyEatWorldFutures' >selectedAlbum</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='const enum Album' >Album</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(enum member) Album.JimmyEatWorldFutures = 1' >JimmyEatWorldFutures</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='const selectedAlbum: Album.JimmyEatWorldFutures' >selectedAlbum</data-lsp></span><span style="color: #000000"> === </span><span style="color: #001080"><data-lsp lsp='const enum Album' >Album</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(enum member) Album.JimmyEatWorldFutures = 1' >JimmyEatWorldFutures</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"That is a great choice."</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/MYewdgzgLgBApmArgWxgQQDYCMUwN4BQMMAUgJbLICeAogIZQDqIAThgCYBiiUiLcEGAF4YARgA0RGABVEWAEpkwAcwBaIEAAkqABxBQAFgLKCRAJknEAIiGWc6EA2XBWToNO0QYocFlWEwAMySAL4EBKCQsBBwGHDAPuyYOKgiySgAdOSUtAzMbFw8fAIA3ARkAGYwABQxcQlwSdi4Qq3ozchZFNT0TKwc3Lz8EACU+FKRECBxGRi21QBE0gYMMCYwdDDK-KvABiBkwHAZCyNlIUA'>Try</a></div></pre> <p>The default <code>const enum</code> behavior is to convert any <code>Album.Something</code> to the corresponding number literal, and to remove a reference to the enum from the JavaScript completely.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">selectedAlbum</span><span style="color: #000000"> = </span><span style="color: #098658">1</span><span style="color: #000000"> </span><span style="color: #008000">/* Album.JimmyEatWorldFutures */</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">selectedAlbum</span><span style="color: #000000"> === </span><span style="color: #098658">1</span><span style="color: #000000"> </span><span style="color: #008000">/* Album.JimmyEatWorldFutures */</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #A31515">"That is a great choice."</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAGNYDtJ1QBTPAV2VAEEAbAIwtAG9NRQApVZZAT0QEN0AdVgAnGgBMAYmXRlRxSKAC8oAIwAaVqAAqZOgCVUeAOYAtWLAASPAA6x00RaiWqATFrYARWCan8YVHwvF1wqCTIadGJRHhVQAGYtAF9MHHxCUEhiGmJsaIlaBkpVIooAOk5uPkERcWlZeUUAbkxUADNQAAps3PziQvpGZRHqIeRKrl4BYTFJGTkFSABKZm1cAlhc8ppfLoAiHWhBUBdQflATBRPsOFRsYnL95dbkoA'>Try</a></div></pre> <p>With <code>preserveConstEnums</code> set to <code>true</code>, the <code>enum</code> exists at runtime and the numbers are still emitted.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">Album</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">(</span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">Album</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">Album</span><span style="color: #000000">[</span><span style="color: #001080">Album</span><span style="color: #000000">[</span><span style="color: #A31515">"JimmyEatWorldFutures"</span><span style="color: #000000">] = </span><span style="color: #098658">1</span><span style="color: #000000">] = </span><span style="color: #A31515">"JimmyEatWorldFutures"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">Album</span><span style="color: #000000">[</span><span style="color: #001080">Album</span><span style="color: #000000">[</span><span style="color: #A31515">"TubRingZooHypothesis"</span><span style="color: #000000">] = </span><span style="color: #098658">2</span><span style="color: #000000">] = </span><span style="color: #A31515">"TubRingZooHypothesis"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">Album</span><span style="color: #000000">[</span><span style="color: #001080">Album</span><span style="color: #000000">[</span><span style="color: #A31515">"DogFashionDiscoAdultery"</span><span style="color: #000000">] = </span><span style="color: #098658">3</span><span style="color: #000000">] = </span><span style="color: #A31515">"DogFashionDiscoAdultery"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">})(</span><span style="color: #001080">Album</span><span style="color: #000000"> || (</span><span style="color: #001080">Album</span><span style="color: #000000"> = {}));</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">selectedAlbum</span><span style="color: #000000"> = </span><span style="color: #098658">1</span><span style="color: #000000"> </span><span style="color: #008000">/* Album.JimmyEatWorldFutures */</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">selectedAlbum</span><span style="color: #000000"> === </span><span style="color: #098658">1</span><span style="color: #000000"> </span><span style="color: #008000">/* Album.JimmyEatWorldFutures */</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #A31515">"That is a great choice."</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEAcCcFMGdbQG6wMIHsB28AuBRLAVwFt4AuUXaI2AKBAngAsMB3fEgS1zoGNseULGIlQAQQA2AI1KgA3nVCgAUlxIkAnvgCGuAOoZokgCYAxIriJx4oALygAjABoloACpFpAJS5YA5gBaGBgAEpqQGLjMCFy2DgBMrsoAIhj+ZjosXNgpcQLiJkSSuEia9qAAzK4AvnT8grigiJKwfKUmUrJiDl2kAHRqGtp6hsbmltYIANx0XABmoAAULW0dfT12vTIDQ1q6BkamFlY2AJQKbgI4GK39kulLAETuzHqgcaA6oP5w73ysLh8WD9J5nWY1IA'>Try</a></div></pre> <p>This essentially makes such <code>const enums</code> a source-code feature only, with no runtime traces.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> if <a href="#isolatedModules"><code>isolatedModules</code></a>; <code>false</code> otherwise.</p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='removeComments-config'><a aria-label="Link to the compiler option: removeComments" id='removeComments' href='#removeComments' name='removeComments' aria-labelledby="removeComments-config">#</a> Remove Comments - <code>removeComments</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Strips all comments from TypeScript files when converting into JavaScript. Defaults to <code>false</code>.</p> <p>For example, this is a TypeScript file which has a JSDoc comment:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/** The translation of 'Hello world' into Portuguese */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorldPTBR</span><span style="color: #000000"> = </span><span style="color: #A31515">"Olá Mundo"</span><span style="color: #000000">;</span></div></code></div></pre> <p>When <code>removeComments</code> is set to <code>true</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorldPTBR</span><span style="color: #000000"> = </span><span style="color: #A31515">"Olá Mundo"</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAggJwKbKwBu+AwrMsvgHbqQBco6uArvtgFSegAq0+ZrgCGNSABth6VLBqhYAM1AByABL5x42KHixc4gCbLQqOtoAKe9KwDm7SIM7BM+AB4AHK6ADGsyOlABTVgAdT1Dc14AIQAlUABeUAAiAHlxAEPQAFlWGgNYJIBuIA'>Try</a></div></pre> <p>Without setting <code>removeComments</code> or having it as <code>false</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/** The translation of 'Hello world' into Portuguese */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorldPTBR</span><span style="color: #000000"> = </span><span style="color: #A31515">"Olá Mundo"</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAggJwKbKwBu+AwrMsvgHbqQBcoAZgIYA2k+2AVD6ABVo+UOlysakdq3SpYNULGagA5AAl87drFDxYudgBMVoVHR0AFfegCuAcxv4uoHsEz4AHgAdroAMbykOigwlqwAOr6RhYCAEIASqAAvKAARADy7ACHoACyNjSGsKkA3EA'>Try</a></div></pre> <p>This means that your comments will show up in the JavaScript code.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='sourceMap-config'><a aria-label="Link to the compiler option: sourceMap" id='sourceMap' href='#sourceMap' name='sourceMap' aria-labelledby="sourceMap-config">#</a> Source Map - <code>sourceMap</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Enables the generation of <a href="https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map">sourcemap files</a>. These files allow debuggers and other tools to display the original TypeScript source code when actually working with the emitted JavaScript files. Source map files are emitted as <code>.js.map</code> (or <code>.jsx.map</code>) files next to the corresponding <code>.js</code> output file.</p> <p>The <code>.js</code> files will in turn contain a sourcemap comment to indicate where the files are to external tools, for example:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// helloWorld.ts</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div></code></div></pre> <p>Compiling with <code>sourceMap</code> set to <code>true</code> creates the following JavaScript file:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// helloWorld.js</span></div><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">helloWorld</span><span style="color: #000000"> = </span><span style="color: #A31515">"hi"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #008000">//# sourceMappingURL=// helloWorld.js.map</span></div></code></div></pre> <p>And this also generates this json map:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">json</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// helloWorld.js.map</span></div><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"version"</span><span style="color: #000000">: </span><span style="color: #098658">3</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"file"</span><span style="color: #000000">: </span><span style="color: #A31515">"ex.js"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"sourceRoot"</span><span style="color: #000000">: </span><span style="color: #A31515">""</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"sources"</span><span style="color: #000000">: [</span><span style="color: #A31515">"../ex.ts"</span><span style="color: #000000">],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"names"</span><span style="color: #000000">: [],</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"mappings"</span><span style="color: #000000">: </span><span style="color: #A31515">";;AAAa,QAAA,UAAU,GAAG,IAAI,CAAA"</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='sourceRoot-config'><a aria-label="Link to the compiler option: sourceRoot" id='sourceRoot' href='#sourceRoot' name='sourceRoot' aria-labelledby="sourceRoot-config">#</a> Source Root - <code>sourceRoot</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specify the location where a debugger should locate TypeScript files instead of relative source locations. This string is treated verbatim inside the source-map where you can use a path or a URL:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#sourceMap'><data-lsp lsp="Create source map files for emitted JavaScript files.">sourceMap</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#sourceRoot'><data-lsp lsp="Specify the root path for debuggers to find the reference source code.">sourceRoot</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"https://my-website.com/debug/source/"</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Would declare that <code>index.js</code> will have a source file at <code>https://my-website.com/debug/source/index.ts</code>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='stripInternal-config'><a aria-label="Link to the compiler option: stripInternal" id='stripInternal' href='#stripInternal' name='stripInternal' aria-labelledby="stripInternal-config">#</a> Strip Internal - <code>stripInternal</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Do not emit declarations for code that has an <code>@internal</code> annotation in its JSDoc comment. This is an internal compiler option; use at your own risk, because the compiler does not check that the result is valid. If you are searching for a tool to handle additional levels of visibility within your <code>d.ts</code> files, look at <a href="https://api-extractor.com">api-extractor</a>.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/**</span></div><div class='line'><span style="color: #008000"> * Days available in a week</span></div><div class='line'><span style="color: #008000"> * </span><span style="color: #0000FF">@internal</span></div><div class='line'><span style="color: #008000"> */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const daysInAWeek: 7' >daysInAWeek</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">7</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #008000">/** Calculate how much someone earns in a week */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function weeklySalary(dayRate: number): number' >weeklySalary</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) dayRate: number' >dayRate</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='const daysInAWeek: 7' >daysInAWeek</data-lsp></span><span style="color: #000000"> * </span><span style="color: #001080"><data-lsp lsp='(parameter) dayRate: number' >dayRate</data-lsp></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PQKhCgAIUgRBDAngZ0vAbvAlgG3gIxwFNIsA7NSAdyKIGsoYABcgFyICcz4dHhwiADwAOAew6tIAY1FlkkgCZJkASTIBBAOq06kALyQA7AG5w4UDADCPKQFc87SAAtRVSAFtbUp5GSj3RLIkRPBcqOSUNPTQ-EJiEpAAZrZkUqxYstQ6OIgAyjyhiAAUSogASvDsAFyQZLbu+JwAlJAA3lCQHESstlyQpaoa2tEwpRXspgC+QA'>Try</a></div></pre> <p>With the flag set to <code>false</code> (default):</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/**</span></div><div class='line'><span style="color: #008000"> * Days available in a week</span></div><div class='line'><span style="color: #008000"> * </span><span style="color: #0000FF">@internal</span></div><div class='line'><span style="color: #008000"> */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">daysInAWeek</span><span style="color: #000000"> = </span><span style="color: #098658">7</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #008000">/** Calculate how much someone earns in a week */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">weeklySalary</span><span style="color: #000000">(</span><span style="color: #001080">dayRate</span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">): </span><span style="color: #1C6277">number</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgF3QUwCYDFUAbLALlFQDscsAPAOhzvUgCgQIYEUM2xxqAxoQCGAJ2HpUsCmwBUslqFmgAIsICekUMIBuwosIBGxchW2h4WLAGtFy8JWyiKwwneAtaAB1ij0oAWlIfxwNSABJCgBBAHUra1AAXlAAdgBuFjllAGFXAQBXEWxQOHhQZHyBaFBIWGQsaSxQLDEKLUpzSxslD29ffwAzfIoBSWkLeMJ1AGVXMXUAClD1ACUJUlAKfORDLFEASlAAb0VQUSx0fOdQZYjouO7lZbXsDIBfIA'>Try</a></div></pre> <p>With <code>stripInternal</code> set to <code>true</code> the <code>d.ts</code> emitted will be redacted.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/** Calculate how much someone earns in a week */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">weeklySalary</span><span style="color: #000000">(</span><span style="color: #001080">dayRate</span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">): </span><span style="color: #1C6277">number</span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcBcCcEsAO8B20CmsUEMA2AoECSACwHsB3AUQFt5oMATAMXl3QC5RVH0APAHSMB0SITBRy1OtHEReAY1zZY2aPDIpCAKm35Q20ABFsAT0ihsAN2xtsAI3bcUl0BXToA1vsPhUGLDwfYHx+RDJYaFAFTRhQRjNIAEkUAEEAdQ9PUABeUAB2AG58HUMAYTwFAFdlDFApUBoqhRJQSDIadE10UHQVFAtUV3cvAxCwiKiAMyqUBXVNNyzcUwBlPBVTAAoE0wAlNU5QFCqae0wASlAAb31QWHRoKqx4xJSMrINX-cPigF8gA'>Try</a></div></pre> <p>The JavaScript output is still the same.</p> </div> <ul class='compiler-option-md'><li><span>Internal</span> </li></ul> </div></section> <div class='category'> <h2 id='JavaScript_Support_6247' ><a href='#JavaScript_Support_6247' name='JavaScript_Support_6247' aria-label="Link to the section JavaScript Support" aria-labelledby='JavaScript_Support_6247'>#</a>JavaScript Support</h2> </div> <section class='compiler-option'> <h3 id='allowJs-config'><a aria-label="Link to the compiler option: allowJs" id='allowJs' href='#allowJs' name='allowJs' aria-labelledby="allowJs-config">#</a> Allow JS - <code>allowJs</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Allow JavaScript files to be imported inside your project, instead of just <code>.ts</code> and <code>.tsx</code> files. For example, this JS file:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: card.js</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const defaultCardDeck: "Heart"' >defaultCardDeck</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"Heart"</span><span style="color: #000000">;</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDMEsBsFMB2BDAtvAXKAxsgTgCYB0AVgM4BQ8AHgA4D2eALjvYmSwfJMgK6xMAwvgIAReNgDWoALygARAAl4+JvIDcQA'>Try</a></div></pre> <p>When imported into a TypeScript file will raise an error:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(alias) (property) defaultCardDeck: "Heart" import defaultCardDeck' >defaultCardDeck</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./card"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(alias) (property) defaultCardDeck: "Heart" import defaultCardDeck' >defaultCardDeck</data-lsp></span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYAMB2AUCBAGYCWANpAHYCGAtpKgMbXQAmAdAFaJ61ysBXCu0gAPAA4IALonatIRakKkBhFqwAikRgGtQAXlAAiABKQWUowG4CYALQPGAqQ7u3i5KnQagSleaLsMngktJLQUqAA3qDyispqbFq6oAC+oETwtMbswMxs1nh4jHCUiHDCZHAA5gAUcUpkqurJOgCUVkA'>Try</a></div></pre> <p>Imports fine with <code>allowJs</code> enabled:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(alias) (property) defaultCardDeck: "Heart" import defaultCardDeck' >defaultCardDeck</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./card"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(alias) (property) defaultCardDeck: "Heart" import defaultCardDeck' >defaultCardDeck</data-lsp></span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDMEsBsFMB2BDAtvAXKAxsgTgCYB0AVgM4BQqA9gQK4JHwAeADtXgC5lEHyTIGnAML4CAEXjYA1qAC8oAEQAJePk6KA3BRCgAtAex1OBvTrDhksWNQDuAKUq6ocJGkyhoiPsyLcK0KjsXKAA3qB8AkKihJIyoAC+oJB41KhKRMC4hFoUFNjUiGTUjDYA5gAUkYKwImJx0gCUmkA'>Try</a></div></pre> <p>This flag can be used as a way to incrementally add TypeScript files into JS projects by allowing the <code>.ts</code> and <code>.tsx</code> files to live along-side existing JavaScript files.</p> <p>It can also be used along-side <a href="#declaration"><code>declaration</code></a> and <a href="#emitDeclarationOnly"><code>emitDeclarationOnly</code></a> to <a href="/docs/handbook/declaration-files/dts-from-js.html">create declarations for JS files</a>.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#checkJs' aria-label="Jump to compiler option info for checkJs" ><code>checkJs</code></a></p> </li><li><p><a href='#emitDeclarationOnly' aria-label="Jump to compiler option info for emitDeclarationOnly" ><code>emitDeclarationOnly</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.8" href="/docs/handbook/release-notes/typescript-1-8.html">1.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='checkJs-config'><a aria-label="Link to the compiler option: checkJs" id='checkJs' href='#checkJs' name='checkJs' aria-labelledby="checkJs-config">#</a> Check JS - <code>checkJs</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Works in tandem with <a href="#allowJs"><code>allowJs</code></a>. When <code>checkJs</code> is enabled then errors are reported in JavaScript files. This is the equivalent of including <code>// @ts-check</code> at the top of all JavaScript files which are included in your project.</p> <p>For example, this is incorrect JavaScript according to the <code>parseFloat</code> type definition which comes with TypeScript:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// parseFloat only takes a string</span></div><div class='line'><span style="color: #1C6277">module</span><span style="color: #000000">.</span><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">pi</span><span style="color: #000000"> = </span><span style="color: #795E26">parseFloat</span><span style="color: #000000">(</span><span style="color: #098658">3.142</span><span style="color: #000000">);</span></div></code></div></pre> <p>When imported into a TypeScript module:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: constants.js</span></div><div class='line'><span style="color: #1C6277"><data-lsp lsp='var module: { exports: typeof module.exports; }' >module</data-lsp></span><span style="color: #000000">.</span><span style="color: #1C6277"><data-lsp lsp='module module.exports' >exports</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) pi: number' >pi</data-lsp></span><span style="color: #000000"> = </span><span style="color: #795E26"><data-lsp lsp='function parseFloat(string: string): number' >parseFloat</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">3.142</span><span style="color: #000000">);</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(alias) (property) pi: number import pi' >pi</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(alias) (property) pi: number import pi' >pi</data-lsp></span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEEMBtoewO4CkDOAoEEBmBLaBTAO0gFt8AuUAYzkJQBdJD6UA6AK3RLgBMBXAq3wAPAA5wATi1aicoALyhRkCSnwAxeJHoAKAMysAjABYATAEoA3GgxhwuAsTKUchHiNYs0OEuKmgAbyU5AF9QLAk4ElAAIlZgGjpGZhQY60SUOEF4AHMdWSsgA'>Try</a></div></pre> <p>You will not get any errors. However, if you turn on <code>checkJs</code> then you will get error messages from the JavaScript file.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: constants.js</span></div><div class='line'><span style="color: #1C6277"><data-lsp lsp='var module: { exports: typeof module.exports; }' >module</data-lsp></span><span style="color: #000000">.</span><span style="color: #1C6277"><data-lsp lsp='module module.exports' >exports</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) pi: number' >pi</data-lsp></span><span style="color: #000000"> = </span><span style="color: #795E26"><data-lsp lsp='function parseFloat(string: string): number' >parseFloat</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658"><data-err>3.142</data-err></span><span style="color: #000000">);</span></div><span class="error"><span>Argument of type 'number' is not assignable to parameter of type 'string'.</span><span class="code">2345</span></span><span class="error-behind">Argument of type 'number' is not assignable to parameter of type 'string'.</span><div class='line'> </div><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='(alias) (property) pi: number import pi' >pi</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./constants"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(alias) (property) pi: number import pi' >pi</data-lsp></span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYAsBWAUCBAIYA2JcA7gFYqgAu0ArpAWOAMYAWk7A1jagbNWEAGYBLEpAB2RALaRU7ONMR0i0uogB0NPHLgATRlO2QAHgAcEW7ZfGgAvKEtEkkAGLkidABQZtAEYsNABKAG48EXAJKVkFVHFpQwttLTxxOWtoOlAAbxcHAF9QUXg5UAAibWBlVXVNRErIusQ4U3IAc197CKA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#allowJs' aria-label="Jump to compiler option info for allowJs" ><code>allowJs</code></a></p> </li><li><p><a href='#emitDeclarationOnly' aria-label="Jump to compiler option info for emitDeclarationOnly" ><code>emitDeclarationOnly</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.3" href="/docs/handbook/release-notes/typescript-2-3.html">2.3</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='maxNodeModuleJsDepth-config'><a aria-label="Link to the compiler option: maxNodeModuleJsDepth" id='maxNodeModuleJsDepth' href='#maxNodeModuleJsDepth' name='maxNodeModuleJsDepth' aria-labelledby="maxNodeModuleJsDepth-config">#</a> Max Node Module JS Depth - <code>maxNodeModuleJsDepth</code></h3> <div class='compiler-content'> <div class='markdown'> <p>The maximum dependency depth to search under <code>node_modules</code> and load JavaScript files.</p> <p>This flag can only be used when <a href="#allowJs"><code>allowJs</code></a> is enabled, and is used if you want to have TypeScript infer types for all of the JavaScript inside your <code>node_modules</code>.</p> <p>Ideally this should stay at 0 (the default), and <code>d.ts</code> files should be used to explicitly define the shape of modules. However, there are cases where you may want to turn this on at the expense of speed and potential accuracy.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <div class='category'> <h2 id='Editor_Support_6249' ><a href='#Editor_Support_6249' name='Editor_Support_6249' aria-label="Link to the section Editor Support" aria-labelledby='Editor_Support_6249'>#</a>Editor Support</h2> </div> <section class='compiler-option'> <h3 id='disableSizeLimit-config'><a aria-label="Link to the compiler option: disableSizeLimit" id='disableSizeLimit' href='#disableSizeLimit' name='disableSizeLimit' aria-labelledby="disableSizeLimit-config">#</a> Disable Size Limit - <code>disableSizeLimit</code></h3> <div class='compiler-content'> <div class='markdown'> <p>To avoid a possible memory bloat issues when working with very large JavaScript projects, there is an upper limit to the amount of memory TypeScript will allocate. Turning this flag on will remove the limit.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='plugins-config'><a aria-label="Link to the compiler option: plugins" id='plugins' href='#plugins' name='plugins' aria-labelledby="plugins-config">#</a> Plugins - <code>plugins</code></h3> <div class='compiler-content'> <div class='markdown'> <p>List of language service plugins to run inside the editor.</p> <p>Language service plugins are a way to provide additional information to a user based on existing TypeScript files. They can enhance existing messages between TypeScript and an editor, or to provide their own error messages.</p> <p>For example:</p> <ul> <li><a href="https://github.com/xialvjun/ts-sql-plugin#readme">ts-sql-plugin</a> — Adds SQL linting with a template strings SQL builder.</li> <li><a href="https://github.com/Microsoft/typescript-styled-plugin">typescript-styled-plugin</a> — Provides CSS linting inside template strings .</li> <li><a href="https://github.com/Quramy/typescript-eslint-language-service">typescript-eslint-language-service</a> — Provides eslint error messaging and fix-its inside the compiler’s output.</li> <li><a href="https://github.com/Quramy/ts-graphql-plugin">ts-graphql-plugin</a> — Provides validation and auto-completion inside GraphQL query template strings.</li> </ul> <p>VS Code has the ability for a extension to <a href="https://code.visualstudio.com/api/references/contribution-points#contributes.typescriptServerPlugins">automatically include language service plugins</a>, and so you may have some running in your editor without needing to define them in your <code>tsconfig.json</code>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <div class='category'> <h2 id='Interop_Constraints_6252' ><a href='#Interop_Constraints_6252' name='Interop_Constraints_6252' aria-label="Link to the section Interop Constraints" aria-labelledby='Interop_Constraints_6252'>#</a>Interop Constraints</h2> </div> <section class='compiler-option'> <h3 id='allowSyntheticDefaultImports-config'><a aria-label="Link to the compiler option: allowSyntheticDefaultImports" id='allowSyntheticDefaultImports' href='#allowSyntheticDefaultImports' name='allowSyntheticDefaultImports' aria-labelledby="allowSyntheticDefaultImports-config">#</a> Allow Synthetic Default Imports - <code>allowSyntheticDefaultImports</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When set to true, <code>allowSyntheticDefaultImports</code> allows you to write an import like:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"react"</span><span style="color: #000000">;</span></div></code></div></pre> <p>instead of:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"react"</span><span style="color: #000000">;</span></div></code></div></pre> <p>When the module <strong>does not</strong> explicitly specify a default export.</p> <p>For example, without <code>allowSyntheticDefaultImports</code> as true:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: utilFunctions.js</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const getStringLength: (str: any) => any' >getStringLength</data-lsp></span><span style="color: #000000"> = (</span><span style="color: #001080"><data-lsp lsp='(parameter) str: any' >str</data-lsp></span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) str: any' >str</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >length</data-lsp></span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #1C6277"><data-lsp lsp='var module: { exports: typeof module.exports; }' >module</data-lsp></span><span style="color: #000000">.</span><span style="color: #1C6277"><data-lsp lsp='module module.exports' >exports</data-lsp></span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) getStringLength: (str: any) => any' >getStringLength</data-lsp></span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// @filename: index.ts</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080"><data-err><data-lsp lsp='import utils' >utils</data-lsp></data-err></span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./utilFunctions"</span><span style="color: #000000">;</span></div><span class="error"><span>Module '"/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/utilFunctions"' has no default export.</span><span class="code">1192</span></span><span class="error-behind">Module '"/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/utilFunctions"' has no default export.</span><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const count: any' >count</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='import utils' >utils</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='any' >getStringLength</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Check JS"</span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygIwCYCsBOdacMAoECAYwAtIyBrAKURLHAEMAbNuAdwaYkkQBZOABMArm0gBJAHYAXGHAAOqAGbtEkPuFUBLSTJYBbSKjFz9AMTEyyFuDMQA6AFaNS4GXClGlbXWS6cgCCMgCeahpaZA6IcqAA5pByAMpy0LoyCQAykFlyFKAAvKAAFHHQAJTFAHygFU4GCQUA3ERERqISkE6QAB5KCHKIxaAA3kSgiclpGVm5+RQANEQAvm3aegbGpqCZIv1Ow0S6vkOg5vojqvBGoABETsCXbNa29o73GzGO8TE28RKL2cSVS6UyOTyzQopXuAGEqLRQHQUvdKi0gA'>Try</a></div></pre> <p>This code raises an error because there isn’t a <code>default</code> object which you can import. Even though it feels like it should. For convenience, transpilers like Babel will automatically create a default if one isn’t created. Making the module look a bit more like:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// @filename: utilFunctions.js</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">getStringLength</span><span style="color: #000000"> = (</span><span style="color: #001080">str</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #001080">str</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">allFunctions</span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">getStringLength</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'></div><div class='line'><span style="color: #1C6277">module</span><span style="color: #000000">.</span><span style="color: #1C6277">exports</span><span style="color: #000000"> = </span><span style="color: #001080">allFunctions</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #1C6277">module</span><span style="color: #000000">.</span><span style="color: #1C6277">exports</span><span style="color: #000000">.</span><span style="color: #001080">default</span><span style="color: #000000"> = </span><span style="color: #001080">allFunctions</span><span style="color: #000000">;</span></div></code></div></pre> <p>This flag does not affect the JavaScript emitted by TypeScript, it’s only for the type checking. This option brings the behavior of TypeScript in-line with Babel, where extra code is emitted to make using a default export of a module more ergonomic.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> if <a href="#esModuleInterop"><code>esModuleInterop</code></a> is enabled, <a href="#module"><code>module</code></a> is <code>system</code>, or <a href="#module-resolution"><code>moduleResolution</code></a> is <code>bundler</code>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#esModuleInterop' aria-label="Jump to compiler option info for esModuleInterop" ><code>esModuleInterop</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.8" href="/docs/handbook/release-notes/typescript-1-8.html">1.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='esModuleInterop-config'><a aria-label="Link to the compiler option: esModuleInterop" id='esModuleInterop' href='#esModuleInterop' name='esModuleInterop' aria-labelledby="esModuleInterop-config">#</a> ES Module Interop - <code>esModuleInterop</code></h3> <div class='compiler-content'> <div class='markdown'> <p>By default (with <code>esModuleInterop</code> false or not set) TypeScript treats CommonJS/AMD/UMD modules similar to ES6 modules. In doing this, there are two parts in particular which turned out to be flawed assumptions:</p> <ul> <li> <p>a namespace import like <code>import * as moment from "moment"</code> acts the same as <code>const moment = require("moment")</code></p> </li> <li> <p>a default import like <code>import moment from "moment"</code> acts the same as <code>const moment = require("moment").default</code></p> </li> </ul> <p>This mis-match causes these two issues:</p> <ul> <li> <p>the ES6 modules spec states that a namespace import (<code>import * as x</code>) can only be an object, by having TypeScript treating it the same as <code>= require("x")</code> then TypeScript allowed for the import to be treated as a function and be callable. That’s not valid according to the spec.</p> </li> <li> <p>while accurate to the ES6 modules spec, most libraries with CommonJS/AMD/UMD modules didn’t conform as strictly as TypeScript’s implementation.</p> </li> </ul> <p>Turning on <code>esModuleInterop</code> will fix both of these problems in the code transpiled by TypeScript. The first changes the behavior in the compiler, the second is fixed by two new helper functions which provide a shim to ensure compatibility in the emitted JavaScript:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">fs</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"fs"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">_</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"lodash"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #795E26">readFileSync</span><span style="color: #000000">(</span><span style="color: #A31515">"file.txt"</span><span style="color: #000000">, </span><span style="color: #A31515">"utf8"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #001080">_</span><span style="color: #000000">.</span><span style="color: #795E26">chunk</span><span style="color: #000000">([</span><span style="color: #A31515">"a"</span><span style="color: #000000">, </span><span style="color: #A31515">"b"</span><span style="color: #000000">, </span><span style="color: #A31515">"c"</span><span style="color: #000000">, </span><span style="color: #A31515">"d"</span><span style="color: #000000">], </span><span style="color: #098658">2</span><span style="color: #000000">);</span></div></code></div></pre> <p>With <code>esModuleInterop</code> disabled:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">fs</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"fs"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">lodash_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"lodash"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #795E26">readFileSync</span><span style="color: #000000">(</span><span style="color: #A31515">"file.txt"</span><span style="color: #000000">, </span><span style="color: #A31515">"utf8"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #001080">lodash_1</span><span style="color: #000000">.</span><span style="color: #001080">default</span><span style="color: #000000">.</span><span style="color: #795E26">chunk</span><span style="color: #000000">([</span><span style="color: #A31515">"a"</span><span style="color: #000000">, </span><span style="color: #A31515">"b"</span><span style="color: #000000">, </span><span style="color: #A31515">"c"</span><span style="color: #000000">, </span><span style="color: #A31515">"d"</span><span style="color: #000000">], </span><span style="color: #098658">2</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsFECd7XgZwFAgigFtA7rALYCWALhmOAKYoCy0AJgK4A2VAkpKVUgA4BcoAGYBDFiioUIhRqyqCAxtEIzIAK3TFCvZKVAAqUCJTCTQpIVAAiISisBuNFp3w9AfWEXrLRsewO0NFsAOngqEQYAMWI2AGUAT0gFAAobGKpg0gAPUisAGmsmUiEADisASkc3YIVsJkgAa2SAbSsRfOsAIw6rBR6GKwBdAoAmSqA'>Try</a></div></pre> <p>With <code>esModuleInterop</code> set to <code>true</code>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__createBinding</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__createBinding</span><span style="color: #000000">) || (</span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #001080">create</span><span style="color: #000000"> ? (</span><span style="color: #0000FF">function</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">, </span><span style="color: #001080">m</span><span style="color: #000000">, </span><span style="color: #001080">k</span><span style="color: #000000">, </span><span style="color: #001080">k2</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">k2</span><span style="color: #000000"> === </span><span style="color: #0000FF">undefined</span><span style="color: #000000">) </span><span style="color: #001080">k2</span><span style="color: #000000"> = </span><span style="color: #001080">k</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">desc</span><span style="color: #000000"> = </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">getOwnPropertyDescriptor</span><span style="color: #000000">(</span><span style="color: #001080">m</span><span style="color: #000000">, </span><span style="color: #001080">k</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (!</span><span style="color: #001080">desc</span><span style="color: #000000"> || (</span><span style="color: #A31515">"get"</span><span style="color: #000000"> </span><span style="color: #0000FF">in</span><span style="color: #000000"> </span><span style="color: #001080">desc</span><span style="color: #000000"> ? !</span><span style="color: #001080">m</span><span style="color: #000000">.</span><span style="color: #001080">__esModule</span><span style="color: #000000"> : </span><span style="color: #001080">desc</span><span style="color: #000000">.</span><span style="color: #001080">writable</span><span style="color: #000000"> || </span><span style="color: #001080">desc</span><span style="color: #000000">.</span><span style="color: #001080">configurable</span><span style="color: #000000">)) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">desc</span><span style="color: #000000"> = { </span><span style="color: #001080">enumerable:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000">, </span><span style="color: #795E26">get</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000">() { </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">m</span><span style="color: #000000">[</span><span style="color: #001080">k</span><span style="color: #000000">]; } };</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">, </span><span style="color: #001080">k2</span><span style="color: #000000">, </span><span style="color: #001080">desc</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}) : (</span><span style="color: #0000FF">function</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">, </span><span style="color: #001080">m</span><span style="color: #000000">, </span><span style="color: #001080">k</span><span style="color: #000000">, </span><span style="color: #001080">k2</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">k2</span><span style="color: #000000"> === </span><span style="color: #0000FF">undefined</span><span style="color: #000000">) </span><span style="color: #001080">k2</span><span style="color: #000000"> = </span><span style="color: #001080">k</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">o</span><span style="color: #000000">[</span><span style="color: #001080">k2</span><span style="color: #000000">] = </span><span style="color: #001080">m</span><span style="color: #000000">[</span><span style="color: #001080">k</span><span style="color: #000000">];</span></div><div class='line'><span style="color: #000000">}));</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__setModuleDefault</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__setModuleDefault</span><span style="color: #000000">) || (</span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #001080">create</span><span style="color: #000000"> ? (</span><span style="color: #0000FF">function</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">, </span><span style="color: #001080">v</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">, </span><span style="color: #A31515">"default"</span><span style="color: #000000">, { </span><span style="color: #001080">enumerable:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000">, </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #001080">v</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000">}) : </span><span style="color: #0000FF">function</span><span style="color: #000000">(</span><span style="color: #001080">o</span><span style="color: #000000">, </span><span style="color: #001080">v</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">o</span><span style="color: #000000">[</span><span style="color: #A31515">"default"</span><span style="color: #000000">] = </span><span style="color: #001080">v</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">});</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__importStar</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__importStar</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">mod</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">mod</span><span style="color: #000000"> && </span><span style="color: #001080">mod</span><span style="color: #000000">.</span><span style="color: #001080">__esModule</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">mod</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">result</span><span style="color: #000000"> = {};</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">mod</span><span style="color: #000000"> != </span><span style="color: #0000FF">null</span><span style="color: #000000">) </span><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">k</span><span style="color: #000000"> </span><span style="color: #0000FF">in</span><span style="color: #000000"> </span><span style="color: #001080">mod</span><span style="color: #000000">) </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">k</span><span style="color: #000000"> !== </span><span style="color: #A31515">"default"</span><span style="color: #000000"> && </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #001080">prototype</span><span style="color: #000000">.</span><span style="color: #001080">hasOwnProperty</span><span style="color: #000000">.</span><span style="color: #795E26">call</span><span style="color: #000000">(</span><span style="color: #001080">mod</span><span style="color: #000000">, </span><span style="color: #001080">k</span><span style="color: #000000">)) </span><span style="color: #795E26">__createBinding</span><span style="color: #000000">(</span><span style="color: #001080">result</span><span style="color: #000000">, </span><span style="color: #001080">mod</span><span style="color: #000000">, </span><span style="color: #001080">k</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">__setModuleDefault</span><span style="color: #000000">(</span><span style="color: #001080">result</span><span style="color: #000000">, </span><span style="color: #001080">mod</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">result</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__importDefault</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__importDefault</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">mod</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span><span style="color: #001080">mod</span><span style="color: #000000"> && </span><span style="color: #001080">mod</span><span style="color: #000000">.</span><span style="color: #001080">__esModule</span><span style="color: #000000">) ? </span><span style="color: #001080">mod</span><span style="color: #000000"> : { </span><span style="color: #A31515">"default"</span><span style="color: #001080">:</span><span style="color: #000000"> </span><span style="color: #001080">mod</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">fs</span><span style="color: #000000"> = </span><span style="color: #795E26">__importStar</span><span style="color: #000000">(</span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"fs"</span><span style="color: #000000">));</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">lodash_1</span><span style="color: #000000"> = </span><span style="color: #795E26">__importDefault</span><span style="color: #000000">(</span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"lodash"</span><span style="color: #000000">));</span></div><div class='line'><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #795E26">readFileSync</span><span style="color: #000000">(</span><span style="color: #A31515">"file.txt"</span><span style="color: #000000">, </span><span style="color: #A31515">"utf8"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #001080">lodash_1</span><span style="color: #000000">.</span><span style="color: #001080">default</span><span style="color: #000000">.</span><span style="color: #795E26">chunk</span><span style="color: #000000">([</span><span style="color: #A31515">"a"</span><span style="color: #000000">, </span><span style="color: #A31515">"b"</span><span style="color: #000000">, </span><span style="color: #A31515">"c"</span><span style="color: #000000">, </span><span style="color: #A31515">"d"</span><span style="color: #000000">], </span><span style="color: #098658">2</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsFECd7XgZwFAgigFtA7rALYCWALhmOAKYoCy0AJgK4A2VAkpKVUgA4URCjVlQBcoAMbRCQyACt0xQr2SlQAKlABDFKABmuvUkKgARAdMBuNEpXw1AfX3GzLRjuxW0aAwDp4VFoMAGLEbADKAJ6QEgAU5mFUvqQAHqSmADRmTKR6ABymAJTWDr4S2EyQANaxANqmWplmAEZNphJtDKYAulkATMVAA'>Try</a></div></pre> <p><em>Note</em>: The namespace import <code>import * as fs from "fs"</code> only accounts for properties which <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">are owned</a> (basically properties set on the object and not via the prototype chain) on the imported object. If the module you’re importing defines its API using inherited properties, you need to use the default import form (<code>import fs from "fs"</code>), or disable <code>esModuleInterop</code>.</p> <p><em>Note</em>: You can make JS emit terser by enabling <a href="#importHelpers"><code>importHelpers</code></a>:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">tslib_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"tslib"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">fs</span><span style="color: #000000"> = </span><span style="color: #001080">tslib_1</span><span style="color: #000000">.</span><span style="color: #795E26">__importStar</span><span style="color: #000000">(</span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"fs"</span><span style="color: #000000">));</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">lodash_1</span><span style="color: #000000"> = </span><span style="color: #001080">tslib_1</span><span style="color: #000000">.</span><span style="color: #795E26">__importDefault</span><span style="color: #000000">(</span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"lodash"</span><span style="color: #000000">));</span></div><div class='line'><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #795E26">readFileSync</span><span style="color: #000000">(</span><span style="color: #A31515">"file.txt"</span><span style="color: #000000">, </span><span style="color: #A31515">"utf8"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #001080">lodash_1</span><span style="color: #000000">.</span><span style="color: #001080">default</span><span style="color: #000000">.</span><span style="color: #795E26">chunk</span><span style="color: #000000">([</span><span style="color: #A31515">"a"</span><span style="color: #000000">, </span><span style="color: #A31515">"b"</span><span style="color: #000000">, </span><span style="color: #A31515">"c"</span><span style="color: #000000">, </span><span style="color: #A31515">"d"</span><span style="color: #000000">], </span><span style="color: #098658">2</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsFECd7XgZwFAgigFtA7rALYCWALhmOAKYoCy0AJgK4A2VAkpKVUgA4URihXslIAJKi1490mcIUasqALlABjaIQWQAVuiEj4pUACpQAQxSgAZletJCoAES2nAbjQHRoAPo2HziyMltjuaGi2AHTwVOYMAGLEbADKAJ6QagAULklUkaQAHqROADTOTKTWABxOAJQePpFq2EyQANaZANpO5qXOAEZ9TmpDDE4AumUATPVAA'>Try</a></div></pre> <p>Enabling <code>esModuleInterop</code> will also enable <a href="#allowSyntheticDefaultImports"><code>allowSyntheticDefaultImports</code></a>.</p> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code> if <a href="#module"><code>module</code></a> is <code>node16</code> or <code>nodenext</code>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#allowSyntheticDefaultImports' aria-label="Jump to compiler option info for allowSyntheticDefaultImports" ><code>allowSyntheticDefaultImports</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.7" href="/docs/handbook/release-notes/typescript-2-7.html">2.7</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='forceConsistentCasingInFileNames-config'><a aria-label="Link to the compiler option: forceConsistentCasingInFileNames" id='forceConsistentCasingInFileNames' href='#forceConsistentCasingInFileNames' name='forceConsistentCasingInFileNames' aria-labelledby="forceConsistentCasingInFileNames-config">#</a> Force Consistent Casing In File Names - <code>forceConsistentCasingInFileNames</code></h3> <div class='compiler-content'> <div class='markdown'> <p>TypeScript follows the case sensitivity rules of the file system it’s running on. This can be problematic if some developers are working in a case-sensitive file system and others aren’t. If a file attempts to import <code>fileManager.ts</code> by specifying <code>./FileManager.ts</code> the file will be found in a case-insensitive file system, but not on a case-sensitive file system.</p> <p>When this option is set, TypeScript will issue an error if a program tries to include a file by a casing different from the casing on disk.</p> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Default:</span><p><code>true</code></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='isolatedDeclarations-config'><a aria-label="Link to the compiler option: isolatedDeclarations" id='isolatedDeclarations' href='#isolatedDeclarations' name='isolatedDeclarations' aria-labelledby="isolatedDeclarations-config">#</a> isolatedDeclarations - <code>isolatedDeclarations</code></h3> <div class='compiler-content'> <div class='markdown'> Require sufficient annotation on exports so other tools can trivially generate declaration files. <p>For more information, see the <a href="/docs/handbook/release-notes/typescript-5-5.html#isolated-declarations">5.5 release notes</a></p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='isolatedModules-config'><a aria-label="Link to the compiler option: isolatedModules" id='isolatedModules' href='#isolatedModules' name='isolatedModules' aria-labelledby="isolatedModules-config">#</a> Isolated Modules - <code>isolatedModules</code></h3> <div class='compiler-content'> <div class='markdown'> <p>While you can use TypeScript to produce JavaScript code from TypeScript code, it’s also common to use other transpilers such as <a href="https://babeljs.io">Babel</a> to do this. However, other transpilers only operate on a single file at a time, which means they can’t apply code transforms that depend on understanding the full type system. This restriction also applies to TypeScript’s <code>ts.transpileModule</code> API which is used by some build tools.</p> <p>These limitations can cause runtime problems with some TypeScript features like <code>const enum</code>s and <code>namespace</code>s. Setting the <code>isolatedModules</code> flag tells TypeScript to warn you if you write certain code that can’t be correctly interpreted by a single-file transpilation process.</p> <p>It does not change the behavior of your code, or otherwise change the behavior of TypeScript’s checking and emitting process.</p> <p>Some examples of code which does not work when <code>isolatedModules</code> is enabled.</p> <h4 id="exports-of-non-value-identifiers" style="position:relative;"><a href="#exports-of-non-value-identifiers" aria-label="exports of non value identifiers permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Exports of Non-Value Identifiers</h4> <p>In TypeScript, you can import a <em>type</em> and then subsequently export it:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='import someType' >someType</data-lsp></span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='import someFunction' >someFunction</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"someModule"</span><span style="color: #000000">;</span></div><div class='line'> </div><div class='line'><span style="color: #795E26"><data-lsp lsp='import someFunction' >someFunction</data-lsp></span><span style="color: #000000">();</span></div><div class='line'> </div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='export someType' >someType</data-lsp></span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='export someFunction' >someFunction</data-lsp></span><span style="color: #000000"> };</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsFECd7XgZwFAEsC2AHZAXUAb1BWiwFMAVATxwoBpTyKAxAV0gGN8NpJQAX1AAzJFlAAiMpQCy0ACbsANhUkBuNGhltOPPpAAUASk1oKADzzxCJHbXpMdHbr35D1QA'>Try</a></div></pre> <p>Because there’s no value for <code>someType</code>, the emitted <code>export</code> will not try to export it (this would be a runtime error in JavaScript):</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> { </span><span style="color: #001080">someFunction</span><span style="color: #000000"> };</span></div></code></div></pre> <p>Single-file transpilers don’t know whether <code>someType</code> produces a value or not, so it’s an error to export a name that only refers to a type.</p> <h4 id="non-module-files" style="position:relative;"><a href="#non-module-files" aria-label="non module files permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Non-Module Files</h4> <p>If <code>isolatedModules</code> is set, namespaces are only allowed in <em>modules</em> (which means it has some form of <code>import</code>/<code>export</code>). An error occurs if a namespace is found in a non-module file:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">namespace</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-err><data-lsp lsp='namespace Instantiated' >Instantiated</data-lsp></data-err></span><span style="color: #000000"> {</span></div><span class="error"><span>Namespaces are not allowed in global script files when 'isolatedModules' is enabled. If this file is not intended to be a global script, set 'moduleDetection' to 'force' or add an empty 'export {}' statement.</span><span class="code">1280</span></span><span class="error-behind">Namespaces are not allowed in global script files when 'isolatedModules' is enabled. If this file is not intended to be a global script, set 'moduleDetection' to 'force' or add an empty 'export {}' statement.</span><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const Instantiated.x: 1' >x</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">1</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygIwCYDsWBQIIBLROAGwEMAXSAEwFk4aBXUyRXAO3IFs2AHcgGNIoAJIdElch0qEqtUAG9coUJAAefBJVCC4EnetABedAG5cAXyA'>Try</a></div></pre> <p>This restriction doesn’t apply to <code>.d.ts</code> files.</p> <h4 id="references-to-const-enum-members" style="position:relative;"><a href="#references-to-const-enum-members" aria-label="references to const enum members permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>References to <code>const enum</code> members</h4> <p>In TypeScript, when you reference a <code>const enum</code> member, the reference is replaced by its actual value in the emitted JavaScript. Changing this TypeScript:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">declare</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0000FF">enum</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='const enum Numbers' >Numbers</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='(enum member) Numbers.Zero = 0' >Zero</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">0</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='(enum member) Numbers.One = 1' >One</data-lsp></span><span style="color: #000000"> = </span><span style="color: #098658">1</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='const enum Numbers' >Numbers</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(enum member) Numbers.Zero = 0' >Zero</data-lsp></span><span style="color: #000000"> + </span><span style="color: #001080"><data-lsp lsp='const enum Numbers' >Numbers</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(enum member) Numbers.One = 1' >One</data-lsp></span><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/CYUwxgNghgTiAEYD2A7AzgF3iFBXAtvAHIEBGIMa8A3gFDzwBaFS8AvPAAwA098A8igQcAjLwC+tZOiQQQAOghIA5gAoS+cpXnMYrANTEyFNPMEgAlAG4gA'>Try</a></div></pre> <p>To this JavaScript:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000"> + </span><span style="color: #098658">1</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAggJwKbKwBu+AwrMsvgHbqSYAm+AxgDYCGBoLsNk6ULQCuyUADlRAI3y5IoAN6ZQoAFqzYoALygADABploAPI1820AEZDAX0y9+sNvgB0bWAHMAFJOQy5Luq4mgDUEtKykC6m+ACUANxAA'>Try</a></div></pre> <p>Without knowledge of the values of these members, other transpilers can’t replace the references to <code>Numbers</code>, which would be a runtime error if left alone (since there are no <code>Numbers</code> object at runtime). Because of this, when <code>isolatedModules</code> is set, it is an error to reference an ambient <code>const enum</code> member.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> if <a href="#verbatimModuleSyntax"><code>verbatimModuleSyntax</code></a>; <code>false</code> otherwise.</p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='preserveSymlinks-config'><a aria-label="Link to the compiler option: preserveSymlinks" id='preserveSymlinks' href='#preserveSymlinks' name='preserveSymlinks' aria-labelledby="preserveSymlinks-config">#</a> Preserve Symlinks - <code>preserveSymlinks</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This is to reflect the same flag in Node.js; which does not resolve the real path of symlinks.</p> <p>This flag also exhibits the opposite behavior to Webpack’s <code>resolve.symlinks</code> option (i.e. setting TypeScript’s <code>preserveSymlinks</code> to true parallels setting Webpack’s <code>resolve.symlinks</code> to false, and vice-versa).</p> <p>With this enabled, references to modules and packages (e.g. <code>import</code>s and <code>/// <reference type="..." /></code> directives) are all resolved relative to the location of the symbolic link file, rather than relative to the path that the symbolic link resolves to.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='verbatimModuleSyntax-config'><a aria-label="Link to the compiler option: verbatimModuleSyntax" id='verbatimModuleSyntax' href='#verbatimModuleSyntax' name='verbatimModuleSyntax' aria-labelledby="verbatimModuleSyntax-config">#</a> Verbatim Module Syntax - <code>verbatimModuleSyntax</code></h3> <div class='compiler-content'> <div class='markdown'> <p>By default, TypeScript does something called <em>import elision</em>. Basically, if you write something like</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Car</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./car"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">drive</span><span style="color: #000000">(</span><span style="color: #001080">car</span><span style="color: #000000">: </span><span style="color: #1C6277">Car</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// ...</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>TypeScript detects that you’re only using an import for types and drops the import entirely. Your output JavaScript might look something like this:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">drive</span><span style="color: #000000">(</span><span style="color: #001080">car</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// ...</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Most of the time this is good, because if <code>Car</code> isn’t a value that’s exported from <code>./car</code>, we’ll get a runtime error.</p> <p>But it does add a layer of complexity for certain edge cases. For example, notice there’s no statement like <code>import "./car";</code> - the import was dropped entirely. That actually makes a difference for modules that have side-effects or not.</p> <p>TypeScript’s emit strategy for JavaScript also has another few layers of complexity - import elision isn’t always just driven by how an import is used - it often consults how a value is declared as well. So it’s not always clear whether code like the following</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> { </span><span style="color: #001080">Car</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./car"</span><span style="color: #000000">;</span></div></code></div></pre> <p>should be preserved or dropped. If <code>Car</code> is declared with something like a <code>class</code>, then it can be preserved in the resulting JavaScript file. But if <code>Car</code> is only declared as a <code>type</code> alias or <code>interface</code>, then the JavaScript file shouldn’t export <code>Car</code> at all.</p> <p>While TypeScript might be able to make these emit decisions based on information from across files, not every compiler can.</p> <p>The <code>type</code> modifier on imports and exports helps with these situations a bit. We can make it explicit whether an import or export is only being used for type analysis, and can be dropped entirely in JavaScript files by using the <code>type</code> modifier.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// This statement can be dropped entirely in JS output</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">car</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./car"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #008000">// The named import/export 'Car' can be dropped in JS output</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #AF00DB">type</span><span style="color: #000000"> </span><span style="color: #001080">Car</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./car"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> { </span><span style="color: #AF00DB">type</span><span style="color: #000000"> </span><span style="color: #001080">Car</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./car"</span><span style="color: #000000">;</span></div></code></div></pre> <p><code>type</code> modifiers are not quite useful on their own - by default, module elision will still drop imports, and nothing forces you to make the distinction between <code>type</code> and plain imports and exports. So TypeScript has the flag <code>--importsNotUsedAsValues</code> to make sure you use the <code>type</code> modifier, <code>--preserveValueImports</code> to prevent <em>some</em> module elision behavior, and <code>--isolatedModules</code> to make sure that your TypeScript code works across different compilers. Unfortunately, understanding the fine details of those 3 flags is hard, and there are still some edge cases with unexpected behavior.</p> <p>TypeScript 5.0 introduces a new option called <code>--verbatimModuleSyntax</code> to simplify the situation. The rules are much simpler - any imports or exports without a <code>type</code> modifier are left around. Anything that uses the <code>type</code> modifier is dropped entirely.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">// Erased away entirely.</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> { </span><span style="color: #001080">A</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"a"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #008000">// Rewritten to 'import { b } from "bcd";'</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">b</span><span style="color: #000000">, </span><span style="color: #AF00DB">type</span><span style="color: #000000"> </span><span style="color: #001080">c</span><span style="color: #000000">, </span><span style="color: #AF00DB">type</span><span style="color: #000000"> </span><span style="color: #001080">d</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"bcd"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #008000">// Rewritten to 'import {} from "xyz";'</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #AF00DB">type</span><span style="color: #000000"> </span><span style="color: #001080">xyz</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"xyz"</span><span style="color: #000000">;</span></div></code></div></pre> <p>With this new option, what you see is what you get.</p> <p>That does have some implications when it comes to module interop though. Under this flag, ECMAScript <code>import</code>s and <code>export</code>s won’t be rewritten to <code>require</code> calls when your settings or file extension implied a different module system. Instead, you’ll get an error. If you need to emit code that uses <code>require</code> and <code>module.exports</code>, you’ll have to use TypeScript’s module syntax that predates ES2015:</p> <table> <thead> <tr> <th>Input TypeScript</th> <th>Output JavaScript</th> </tr> </thead> <tr> <td> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">foo</span><span style="color: #000000"> = </span><span style="color: #AF00DB">require</span><span style="color: #000000">(</span><span style="color: #A31515">"foo"</span><span style="color: #000000">);</span></div></code></div></pre> </td> <td> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">foo</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"foo"</span><span style="color: #000000">);</span></div></code></div></pre> </td> </tr> <tr> <td> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">foo</span><span style="color: #000000">() {}</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">bar</span><span style="color: #000000">() {}</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">baz</span><span style="color: #000000">() {}</span></div><div class='line'></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">foo</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">bar</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">baz</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">};</span></div></code></div></pre> </td> <td> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">foo</span><span style="color: #000000">() {}</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">bar</span><span style="color: #000000">() {}</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">baz</span><span style="color: #000000">() {}</span></div><div class='line'></div><div class='line'><span style="color: #1C6277">module</span><span style="color: #000000">.</span><span style="color: #1C6277">exports</span><span style="color: #000000"> = {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">foo</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">bar</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">baz</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000">};</span></div></code></div></pre> </td> </tr> </table> <p>While this is a limitation, it does help make some issues more obvious. For example, it’s very common to forget to set the <a href="https://nodejs.org/api/packages.html#type"><code>type</code> field in <code>package.json</code></a> under <code>--module node16</code>. As a result, developers would start writing CommonJS modules instead of an ES modules without realizing it, giving surprising lookup rules and JavaScript output. This new flag ensures that you’re intentional about the file type you’re using because the syntax is intentionally different.</p> <p>Because <code>--verbatimModuleSyntax</code> provides a more consistent story than <code>--importsNotUsedAsValues</code> and <code>--preserveValueImports</code>, those two existing flags are being deprecated in its favor.</p> <p>For more details, read up on <a href="https://github.com/microsoft/TypeScript/pull/52203">the original pull request</a> and <a href="https://github.com/microsoft/TypeScript/issues/51479">its proposal issue</a>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <div class='category'> <h2 id='Backwards_Compatibility_6253' ><a href='#Backwards_Compatibility_6253' name='Backwards_Compatibility_6253' aria-label="Link to the section Backwards Compatibility" aria-labelledby='Backwards_Compatibility_6253'>#</a>Backwards Compatibility</h2> </div> <section class='compiler-option'> <h3 id='charset-config'><a aria-label="Link to the compiler option: charset" id='charset' href='#charset' name='charset' aria-labelledby="charset-config">#</a> Charset - <code>charset</code></h3> <div class='compiler-content'> <div class='markdown'> <p>In prior versions of TypeScript, this controlled what encoding was used when reading text files from disk. Today, TypeScript assumes UTF-8 encoding, but will correctly detect UTF-16 (BE and LE) or UTF-8 BOMs.</p> </div> <ul class='compiler-option-md'><li><span>Deprecated</span> </li> <li><span>Default:</span><p><code>utf8</code></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='importsNotUsedAsValues-config'><a aria-label="Link to the compiler option: importsNotUsedAsValues" id='importsNotUsedAsValues' href='#importsNotUsedAsValues' name='importsNotUsedAsValues' aria-labelledby="importsNotUsedAsValues-config">#</a> Imports Not Used As Values - <code>importsNotUsedAsValues</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Deprecated in favor of <a href="#verbatimModuleSyntax"><code>verbatimModuleSyntax</code></a>.</p> <p>This flag controls how <code>import</code> works, there are 3 different options:</p> <ul> <li> <p><code>remove</code>: The default behavior of dropping <code>import</code> statements which only reference types.</p> </li> <li> <p><code>preserve</code>: Preserves all <code>import</code> statements whose values or types are never used. This can cause imports/side-effects to be preserved.</p> </li> <li> <p><code>error</code>: This preserves all imports (the same as the preserve option), but will error when a value import is only used as a type. This might be useful if you want to ensure no values are being accidentally imported, but still make side-effect imports explicit.</p> </li> </ul> <p>This flag works because you can use <code>import type</code> to explicitly create an <code>import</code> statement which should never be emitted into JavaScript.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>remove</code></p> </li> <li><span>Allowed:</span><ul><li><p><code>remove</code></p> </li><li><p><code>preserve</code></p> </li><li><p><code>error</code></p> </li></ul></li> <li><span>Related:</span><ul><li><p><a href='#preserveValueImports' aria-label="Jump to compiler option info for preserveValueImports" ><code>preserveValueImports</code></a></p> </li><li><p><a href='#verbatimModuleSyntax' aria-label="Jump to compiler option info for verbatimModuleSyntax" ><code>verbatimModuleSyntax</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.8" href="/docs/handbook/release-notes/typescript-3-8.html">3.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='keyofStringsOnly-config'><a aria-label="Link to the compiler option: keyofStringsOnly" id='keyofStringsOnly' href='#keyofStringsOnly' name='keyofStringsOnly' aria-labelledby="keyofStringsOnly-config">#</a> Keyof Strings Only - <code>keyofStringsOnly</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This flag changes the <code>keyof</code> type operator to return <code>string</code> instead of <code>string | number</code> when applied to a type with a string index signature.</p> <p>This flag is used to help people keep this behavior from <a href="/docs/handbook/release-notes/typescript-2-9.html#support-number-and-symbol-named-properties-with-keyof-and-mapped-types">before TypeScript 2.9’s release</a>.</p> </div> <ul class='compiler-option-md'><li><span>Deprecated</span> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.9" href="/docs/handbook/release-notes/typescript-2-9.html">2.9</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noImplicitUseStrict-config'><a aria-label="Link to the compiler option: noImplicitUseStrict" id='noImplicitUseStrict' href='#noImplicitUseStrict' name='noImplicitUseStrict' aria-labelledby="noImplicitUseStrict-config">#</a> No Implicit Use Strict - <code>noImplicitUseStrict</code></h3> <div class='compiler-content'> <div class='markdown'> <p>You shouldn’t need this. By default, when emitting a module file to a non-ES6 target, TypeScript emits a <code>"use strict";</code> prologue at the top of the file. This setting disables the prologue.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='noStrictGenericChecks-config'><a aria-label="Link to the compiler option: noStrictGenericChecks" id='noStrictGenericChecks' href='#noStrictGenericChecks' name='noStrictGenericChecks' aria-labelledby="noStrictGenericChecks-config">#</a> No Strict Generic Checks - <code>noStrictGenericChecks</code></h3> <div class='compiler-content'> <div class='markdown'> <p>TypeScript will unify type parameters when comparing two generic functions.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='type A = <T, U>(x: T, y: U) => [T, U]' >A</data-lsp></span><span style="color: #000000"> = <</span><span style="color: #1C6277"><data-lsp lsp='(type parameter) T in <T, U>(x: T, y: U): [T, U]' >T</data-lsp></span><span style="color: #000000">, </span><span style="color: #1C6277"><data-lsp lsp='(type parameter) U in <T, U>(x: T, y: U): [T, U]' >U</data-lsp></span><span style="color: #000000">>(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: T' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='(type parameter) T in <T, U>(x: T, y: U): [T, U]' >T</data-lsp></span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(parameter) y: U' >y</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='(type parameter) U in <T, U>(x: T, y: U): [T, U]' >U</data-lsp></span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> [</span><span style="color: #1C6277"><data-lsp lsp='(type parameter) T in <T, U>(x: T, y: U): [T, U]' >T</data-lsp></span><span style="color: #000000">, </span><span style="color: #1C6277"><data-lsp lsp='(type parameter) U in <T, U>(x: T, y: U): [T, U]' >U</data-lsp></span><span style="color: #000000">];</span></div><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='type B = <S>(x: S, y: S) => [S, S]' >B</data-lsp></span><span style="color: #000000"> = <</span><span style="color: #1C6277"><data-lsp lsp='(type parameter) S in <S>(x: S, y: S): [S, S]' >S</data-lsp></span><span style="color: #000000">>(</span><span style="color: #001080"><data-lsp lsp='(parameter) x: S' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='(type parameter) S in <S>(x: S, y: S): [S, S]' >S</data-lsp></span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(parameter) y: S' >y</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='(type parameter) S in <S>(x: S, y: S): [S, S]' >S</data-lsp></span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> [</span><span style="color: #1C6277"><data-lsp lsp='(type parameter) S in <S>(x: S, y: S): [S, S]' >S</data-lsp></span><span style="color: #000000">, </span><span style="color: #1C6277"><data-lsp lsp='(type parameter) S in <S>(x: S, y: S): [S, S]' >S</data-lsp></span><span style="color: #000000">];</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function f(a: A, b: B): void' >f</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) a: A' >a</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='type A = <T, U>(x: T, y: U) => [T, U]' >A</data-lsp></span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(parameter) b: B' >b</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='type B = <S>(x: S, y: S) => [S, S]' >B</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) b: B' >b</data-lsp></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(parameter) a: A' >a</data-lsp></span><span style="color: #000000">; </span><span style="color: #008000">// Ok</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-err><data-lsp lsp='(parameter) a: A' >a</data-lsp></data-err></span><span style="color: #000000"> = </span><span style="color: #001080"><data-lsp lsp='(parameter) b: B' >b</data-lsp></span><span style="color: #000000">; </span><span style="color: #008000">// Error</span></div><span class="error"><span>Type 'B' is not assignable to type 'A'. Types of parameters 'y' and 'y' are incompatible. Type 'U' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to 'U'.</span><span class="code">2322</span></span><span class="error-behind">Type 'B' is not assignable to type 'A'. Types of parameters 'y' and 'y' are incompatible. Type 'U' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to 'U'.</span><div class='line'><span style="color: #000000">}</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGY1oFA4C4CeADpKAIKgC8oAPACoA0oAqgHwAUAHqk6IahYBKam1ABtPiwC6AbgIkyAIWp0Aypx6g1zAdpFUx4ndrl4AZgFcAdgGN8ASzjXQ5jgENU5ZgCNUSkQBvHFBQH1V3WVAQUAB5AGsQ0HdVHyiYgFFYBBwAXyA'>Try</a></div></pre> <p>This flag can be used to remove that check.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.4" href="/docs/handbook/release-notes/typescript-2-4.html">2.4</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='out-config'><a aria-label="Link to the compiler option: out" id='out' href='#out' name='out' aria-labelledby="out-config">#</a> Out - <code>out</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Use <a href="#outFile"><code>outFile</code></a> instead.</p> <p>The <code>out</code> option computes the final file location in a way that is not predictable or consistent. This option is retained for backward compatibility only and is deprecated.</p> </div> <ul class='compiler-option-md'><li><span>Deprecated</span> </li> <li><span>Related:</span><ul><li><p><a href='#outDir' aria-label="Jump to compiler option info for outDir" ><code>outDir</code></a></p> </li><li><p><a href='#outFile' aria-label="Jump to compiler option info for outFile" ><code>outFile</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='preserveValueImports-config'><a aria-label="Link to the compiler option: preserveValueImports" id='preserveValueImports' href='#preserveValueImports' name='preserveValueImports' aria-labelledby="preserveValueImports-config">#</a> Preserve Value Imports - <code>preserveValueImports</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Deprecated in favor of <a href="#verbatimModuleSyntax"><code>verbatimModuleSyntax</code></a>.</p> <p>There are some cases where TypeScript can’t detect that you’re using an import. For example, take the following code:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Animal</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"./animal.js"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #795E26">eval</span><span style="color: #000000">(</span><span style="color: #A31515">"console.log(new Animal().isDangerous())"</span><span style="color: #000000">);</span></div></code></div></pre> <p>or code using ‘Compiles to HTML’ languages like Svelte or Vue. <code>preserveValueImports</code> will prevent TypeScript from removing the import, even if it appears unused.</p> <p>When combined with <a href="#isolatedModules"><code>isolatedModules</code></a>: imported types <em>must</em> be marked as type-only because compilers that process single files at a time have no way of knowing whether imports are values that appear unused, or a type that must be removed in order to avoid a runtime crash.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#isolatedModules' aria-label="Jump to compiler option info for isolatedModules" ><code>isolatedModules</code></a></p> </li><li><p><a href='#importsNotUsedAsValues' aria-label="Jump to compiler option info for importsNotUsedAsValues" ><code>importsNotUsedAsValues</code></a></p> </li><li><p><a href='#verbatimModuleSyntax' aria-label="Jump to compiler option info for verbatimModuleSyntax" ><code>verbatimModuleSyntax</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.5" href="/docs/handbook/release-notes/typescript-4-5.html">4.5</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='suppressExcessPropertyErrors-config'><a aria-label="Link to the compiler option: suppressExcessPropertyErrors" id='suppressExcessPropertyErrors' href='#suppressExcessPropertyErrors' name='suppressExcessPropertyErrors' aria-labelledby="suppressExcessPropertyErrors-config">#</a> Suppress Excess Property Errors - <code>suppressExcessPropertyErrors</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This disables reporting of excess property errors, such as the one shown in the following example:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='type Point = { x: number; y: number; }' >Point</data-lsp></span><span style="color: #000000"> = { </span><span style="color: #001080"><data-lsp lsp='(property) x: number' >x</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">; </span><span style="color: #001080"><data-lsp lsp='(property) y: number' >y</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const p: Point' >p</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='type Point = { x: number; y: number; }' >Point</data-lsp></span><span style="color: #000000"> = { </span><span style="color: #001080"><data-lsp lsp='(property) x: number' >x</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">1</span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='(property) y: number' >y</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">3</span><span style="color: #000000">, </span><span style="color: #001080"><data-err><data-lsp lsp='(property) m: number' >m</data-lsp></data-err>:</span><span style="color: #000000"> </span><span style="color: #098658">10</span><span style="color: #000000"> };</span></div><span class="error"><span>Object literal may only specify known properties, and 'm' does not exist in type 'Point'.</span><span class="code">2353</span></span><span class="error-behind">Object literal may only specify known properties, and 'm' does not exist in type 'Point'.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGY1oFABcBPAB0lAAU4BLAOz1AF5QBvUAD1WoFcBbAIxgDcoAhx79ooAL4CcAYzjVEdIqgo06jFu1ABGADTDUGA91Q6ADFIFA'>Try</a></div></pre> <p>This flag was added to help people migrate to the stricter checking of new object literals in <a href="/docs/handbook/release-notes/typescript-1-6.html#stricter-object-literal-assignment-checks">TypeScript 1.6</a>.</p> <p>We don’t recommend using this flag in a modern codebase, you can suppress one-off cases where you need it using <code>// @ts-ignore</code>.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='suppressImplicitAnyIndexErrors-config'><a aria-label="Link to the compiler option: suppressImplicitAnyIndexErrors" id='suppressImplicitAnyIndexErrors' href='#suppressImplicitAnyIndexErrors' name='suppressImplicitAnyIndexErrors' aria-labelledby="suppressImplicitAnyIndexErrors-config">#</a> Suppress Implicit Any Index Errors - <code>suppressImplicitAnyIndexErrors</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Turning <code>suppressImplicitAnyIndexErrors</code> on suppresses reporting the error about implicit anys when indexing into objects, as shown in the following example:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const obj: { x: number; }' >obj</data-lsp></span><span style="color: #000000"> = { </span><span style="color: #001080"><data-lsp lsp='(property) x: number' >x</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">10</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='const obj: { x: number; }' >obj</data-lsp></span><span style="color: #000000">[</span><span style="color: #A31515">"foo"</span><span style="color: #000000">]);</span></div><span class="error"><span>Element implicitly has an 'any' type because expression of type '"foo"' can't be used to index type '{ x: number; }'. Property 'foo' does not exist on type '{ x: number; }'.</span><span class="code">7053</span></span><span class="error-behind">Element implicitly has an 'any' type because expression of type '"foo"' can't be used to index type '{ x: number; }'. Property 'foo' does not exist on type '{ x: number; }'.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsEkFsAOAbAlgY1QFwIKQJ4BcoWATgK4CmAUCBAM7mKKmX30IobZ76yQATSgA8AoqVLRS9YgDMAhsno064emQxZiZKrTDhKEqTNAB2AAwBWAMzV00SOtDQARgCtQAXlABvUMOIARnNQAF8AbjsHemhkSgA6ZGgAcwAKVzcAbQAiWWhobIBdAEpwoA'>Try</a></div></pre> <p>Using <code>suppressImplicitAnyIndexErrors</code> is quite a drastic approach. It is recommended to use a <code>@ts-ignore</code> comment instead:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const obj: { x: number; }' >obj</data-lsp></span><span style="color: #000000"> = { </span><span style="color: #001080"><data-lsp lsp='(property) x: number' >x</data-lsp>:</span><span style="color: #000000"> </span><span style="color: #098658">10</span><span style="color: #000000"> };</span></div><div class='line'><span style="color: #008000">// @ts-ignore</span></div><div class='line'><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='const obj: { x: number; }' >obj</data-lsp></span><span style="color: #000000">[</span><span style="color: #A31515">"foo"</span><span style="color: #000000">]);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEDsHsEkFsAOAbAlgY1QFwIKQJ4BcoWATgK4CmAUCBAM5kZbFlXXrSSOjQBGAK1ABeUAG9QAD2IBGAAygAvgG5aYcFnoBaVAHMYpGp27RklAHTJougBT8BAbQBEAM2jQnAXQCUyoA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#noImplicitAny' aria-label="Jump to compiler option info for noImplicitAny" ><code>noImplicitAny</code></a></p> </li></ul></li></ul> </div></section> <div class='category'> <h2 id='Language_and_Environment_6254' ><a href='#Language_and_Environment_6254' name='Language_and_Environment_6254' aria-label="Link to the section Language and Environment" aria-labelledby='Language_and_Environment_6254'>#</a>Language and Environment</h2> </div> <section class='compiler-option'> <h3 id='emitDecoratorMetadata-config'><a aria-label="Link to the compiler option: emitDecoratorMetadata" id='emitDecoratorMetadata' href='#emitDecoratorMetadata' name='emitDecoratorMetadata' aria-labelledby="emitDecoratorMetadata-config">#</a> Emit Decorator Metadata - <code>emitDecoratorMetadata</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Enables experimental support for emitting type metadata for decorators which works with the module <a href="https://www.npmjs.com/package/reflect-metadata"><code>reflect-metadata</code></a>.</p> <p>For example, here is the TypeScript</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function LogMethod(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor): void' >LogMethod</data-lsp></span><span style="color: #000000">(</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) target: any' >target</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">any</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) propertyKey: string | symbol' >propertyKey</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000"> | </span><span style="color: #1C6277">symbol</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) descriptor: PropertyDescriptor' >descriptor</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277"><data-lsp lsp='interface PropertyDescriptor' >PropertyDescriptor</data-lsp></span></div><div class='line'><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) target: any' >target</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) propertyKey: string | symbol' >propertyKey</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='namespace console var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) descriptor: PropertyDescriptor' >descriptor</data-lsp></span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277"><data-lsp lsp='class Demo' >Demo</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> @</span><span style="color: #001080"><data-lsp lsp='function LogMethod(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor): void' >LogMethod</data-lsp></span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='(method) Demo.foo(bar: number): void' >foo</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) bar: number' >bar</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">number</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// do nothing</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1"><data-lsp lsp='const demo: Demo' >demo</data-lsp></span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='constructor Demo(): Demo' >Demo</data-lsp></span><span style="color: #000000">();</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMA8AdIE4EsC2kB2AXAhgGwCKQDGA9gtpmQM4BQAZgK7pGZInqgAyJA5gLKRMACxIATABQ1QoHAh6CAXKGzoAngBopoWAhLwEmVQGlIqpVUzJ0PUAB9QVVSgBGJXJumjIVIsliUEJQAFXX1DQh8-AJoASlAAby1SdCo3SAA6XF5xWXlMGIBuJPZU3AysnnEdPURDE1VC4pS0zOyvSKR-MkaAXxoaIlxsKipQQhQSBK1wbn5BEVEtWAZnXCQiUDoSEnFnbEDQdAYXRDjE6WkQUFFJ9BJhJGstPr6BksxryAnQAF5DyAA7mMvjtCkA'>Try</a></div></pre> <p>With <code>emitDecoratorMetadata</code> not set to true (default) the emitted JavaScript is:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__decorate</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__decorate</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">decorators</span><span style="color: #000000">, </span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">desc</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">c</span><span style="color: #000000"> = </span><span style="color: #0000FF">arguments</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000">, </span><span style="color: #001080">r</span><span style="color: #000000"> = </span><span style="color: #001080">c</span><span style="color: #000000"> < </span><span style="color: #098658">3</span><span style="color: #000000"> ? </span><span style="color: #001080">target</span><span style="color: #000000"> : </span><span style="color: #001080">desc</span><span style="color: #000000"> === </span><span style="color: #0000FF">null</span><span style="color: #000000"> ? </span><span style="color: #001080">desc</span><span style="color: #000000"> = </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">getOwnPropertyDescriptor</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">) : </span><span style="color: #001080">desc</span><span style="color: #000000">, </span><span style="color: #001080">d</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Reflect</span><span style="color: #000000"> === </span><span style="color: #A31515">"object"</span><span style="color: #000000"> && </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Reflect</span><span style="color: #000000">.</span><span style="color: #001080">decorate</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000">) </span><span style="color: #001080">r</span><span style="color: #000000"> = </span><span style="color: #1C6277">Reflect</span><span style="color: #000000">.</span><span style="color: #795E26">decorate</span><span style="color: #000000">(</span><span style="color: #001080">decorators</span><span style="color: #000000">, </span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">desc</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">else</span><span style="color: #000000"> </span><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">i</span><span style="color: #000000"> = </span><span style="color: #001080">decorators</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000"> - </span><span style="color: #098658">1</span><span style="color: #000000">; </span><span style="color: #001080">i</span><span style="color: #000000"> >= </span><span style="color: #098658">0</span><span style="color: #000000">; </span><span style="color: #001080">i</span><span style="color: #000000">--) </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">d</span><span style="color: #000000"> = </span><span style="color: #001080">decorators</span><span style="color: #000000">[</span><span style="color: #001080">i</span><span style="color: #000000">]) </span><span style="color: #001080">r</span><span style="color: #000000"> = (</span><span style="color: #001080">c</span><span style="color: #000000"> < </span><span style="color: #098658">3</span><span style="color: #000000"> ? </span><span style="color: #795E26">d</span><span style="color: #000000">(</span><span style="color: #001080">r</span><span style="color: #000000">) : </span><span style="color: #001080">c</span><span style="color: #000000"> > </span><span style="color: #098658">3</span><span style="color: #000000"> ? </span><span style="color: #795E26">d</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">r</span><span style="color: #000000">) : </span><span style="color: #795E26">d</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">)) || </span><span style="color: #001080">r</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">c</span><span style="color: #000000"> > </span><span style="color: #098658">3</span><span style="color: #000000"> && </span><span style="color: #001080">r</span><span style="color: #000000"> && </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">r</span><span style="color: #000000">), </span><span style="color: #001080">r</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">LogMethod</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">propertyKey</span><span style="color: #000000">, </span><span style="color: #001080">descriptor</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">propertyKey</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">descriptor</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277">Demo</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">foo</span><span style="color: #000000">(</span><span style="color: #001080">bar</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// do nothing</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #795E26">__decorate</span><span style="color: #000000">([</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">LogMethod</span></div><div class='line'><span style="color: #000000">], </span><span style="color: #1C6277">Demo</span><span style="color: #000000">.</span><span style="color: #001080">prototype</span><span style="color: #000000">, </span><span style="color: #A31515">"foo"</span><span style="color: #000000">, </span><span style="color: #0000FF">null</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">demo</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Demo</span><span style="color: #000000">();</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMA8AdIE4EsC2kB2AXAhgGwCKQDGA9gtpmQM4BQIEVAFiQO4CiKSmNAZgK7oimJCXSgAMiQDmAWUiZmAEwAUNUKBwIp8gFyhs6AJ4AaNaFgIS8BJkMBpSIb1VMydFNAAfUFUMoARiS4puqKkFREyLCUCHoACpbWtoQRUTE0AJSgAN5mpOhUQZAAdLjSypramBkA3HmihbglZVLKFlaItg6GtfUFRaXlYalI0WS9AL40NES42FRUoIQoJDlm4JKy8kpmsHz+uEhEoDwkJMr+2LGg6HwBiFm56ur0iqvoJApI7mZTUzMNTCgMIrUAAXhukBYS0gK2UtSAA'>Try</a></div></pre> <p>With <code>emitDecoratorMetadata</code> set to true the emitted JavaScript is:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__decorate</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__decorate</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">decorators</span><span style="color: #000000">, </span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">desc</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">c</span><span style="color: #000000"> = </span><span style="color: #0000FF">arguments</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000">, </span><span style="color: #001080">r</span><span style="color: #000000"> = </span><span style="color: #001080">c</span><span style="color: #000000"> < </span><span style="color: #098658">3</span><span style="color: #000000"> ? </span><span style="color: #001080">target</span><span style="color: #000000"> : </span><span style="color: #001080">desc</span><span style="color: #000000"> === </span><span style="color: #0000FF">null</span><span style="color: #000000"> ? </span><span style="color: #001080">desc</span><span style="color: #000000"> = </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">getOwnPropertyDescriptor</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">) : </span><span style="color: #001080">desc</span><span style="color: #000000">, </span><span style="color: #001080">d</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Reflect</span><span style="color: #000000"> === </span><span style="color: #A31515">"object"</span><span style="color: #000000"> && </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Reflect</span><span style="color: #000000">.</span><span style="color: #001080">decorate</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000">) </span><span style="color: #001080">r</span><span style="color: #000000"> = </span><span style="color: #1C6277">Reflect</span><span style="color: #000000">.</span><span style="color: #795E26">decorate</span><span style="color: #000000">(</span><span style="color: #001080">decorators</span><span style="color: #000000">, </span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">desc</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">else</span><span style="color: #000000"> </span><span style="color: #AF00DB">for</span><span style="color: #000000"> (</span><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">i</span><span style="color: #000000"> = </span><span style="color: #001080">decorators</span><span style="color: #000000">.</span><span style="color: #001080">length</span><span style="color: #000000"> - </span><span style="color: #098658">1</span><span style="color: #000000">; </span><span style="color: #001080">i</span><span style="color: #000000"> >= </span><span style="color: #098658">0</span><span style="color: #000000">; </span><span style="color: #001080">i</span><span style="color: #000000">--) </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">d</span><span style="color: #000000"> = </span><span style="color: #001080">decorators</span><span style="color: #000000">[</span><span style="color: #001080">i</span><span style="color: #000000">]) </span><span style="color: #001080">r</span><span style="color: #000000"> = (</span><span style="color: #001080">c</span><span style="color: #000000"> < </span><span style="color: #098658">3</span><span style="color: #000000"> ? </span><span style="color: #795E26">d</span><span style="color: #000000">(</span><span style="color: #001080">r</span><span style="color: #000000">) : </span><span style="color: #001080">c</span><span style="color: #000000"> > </span><span style="color: #098658">3</span><span style="color: #000000"> ? </span><span style="color: #795E26">d</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">r</span><span style="color: #000000">) : </span><span style="color: #795E26">d</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">)) || </span><span style="color: #001080">r</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">c</span><span style="color: #000000"> > </span><span style="color: #098658">3</span><span style="color: #000000"> && </span><span style="color: #001080">r</span><span style="color: #000000"> && </span><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">key</span><span style="color: #000000">, </span><span style="color: #001080">r</span><span style="color: #000000">), </span><span style="color: #001080">r</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">__metadata</span><span style="color: #000000"> = (</span><span style="color: #0000FF">this</span><span style="color: #000000"> && </span><span style="color: #0000FF">this</span><span style="color: #000000">.</span><span style="color: #001080">__metadata</span><span style="color: #000000">) || </span><span style="color: #0000FF">function</span><span style="color: #000000"> (</span><span style="color: #001080">k</span><span style="color: #000000">, </span><span style="color: #001080">v</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Reflect</span><span style="color: #000000"> === </span><span style="color: #A31515">"object"</span><span style="color: #000000"> && </span><span style="color: #0000FF">typeof</span><span style="color: #000000"> </span><span style="color: #1C6277">Reflect</span><span style="color: #000000">.</span><span style="color: #001080">metadata</span><span style="color: #000000"> === </span><span style="color: #A31515">"function"</span><span style="color: #000000">) </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #1C6277">Reflect</span><span style="color: #000000">.</span><span style="color: #795E26">metadata</span><span style="color: #000000">(</span><span style="color: #001080">k</span><span style="color: #000000">, </span><span style="color: #001080">v</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">LogMethod</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">, </span><span style="color: #001080">propertyKey</span><span style="color: #000000">, </span><span style="color: #001080">descriptor</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">propertyKey</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">descriptor</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #1C6277">Demo</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">foo</span><span style="color: #000000">(</span><span style="color: #001080">bar</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #008000">// do nothing</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'><span style="color: #795E26">__decorate</span><span style="color: #000000">([</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080">LogMethod</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">__metadata</span><span style="color: #000000">(</span><span style="color: #A31515">"design:type"</span><span style="color: #000000">, </span><span style="color: #1C6277">Function</span><span style="color: #000000">),</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">__metadata</span><span style="color: #000000">(</span><span style="color: #A31515">"design:paramtypes"</span><span style="color: #000000">, [</span><span style="color: #1C6277">Number</span><span style="color: #000000">]),</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #795E26">__metadata</span><span style="color: #000000">(</span><span style="color: #A31515">"design:returntype"</span><span style="color: #000000">, </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000">], </span><span style="color: #1C6277">Demo</span><span style="color: #000000">.</span><span style="color: #001080">prototype</span><span style="color: #000000">, </span><span style="color: #A31515">"foo"</span><span style="color: #000000">, </span><span style="color: #0000FF">null</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">demo</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Demo</span><span style="color: #000000">();</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMA8AdIE4EsC2kB2AXAhgGwCKQDGA9gtpmQM4BQIEVAFiQO4CiKSmdYUnmhUuUoIAspBwATCthoAzAK7oimJCXSgAMiQDm4zM0kAKGqFA4EOiQC5Q2dAE8ANKdCwEJeAkwOA0pAdbKkxkdB1QAB9QKgcUACMSXBczSUgqImRYEVsABQ8vH0J0zJEaAEpQAG9XUnQqRMgAOlxdIwsrTDKAbhr1etwmlp0jd09EH38Hbt66hubW1OKkLLJpgF8aGiJcbCoqUEIUEirXcG09CUNXWAU43CQiUDkSEiM47ARbdAV4xArqsxmeiSY7oEgGJBhVwbDZbPqYUCpI6gAC8oHQkBYB0gRyM3SAA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#experimentalDecorators' aria-label="Jump to compiler option info for experimentalDecorators" ><code>experimentalDecorators</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='experimentalDecorators-config'><a aria-label="Link to the compiler option: experimentalDecorators" id='experimentalDecorators' href='#experimentalDecorators' name='experimentalDecorators' aria-labelledby="experimentalDecorators-config">#</a> Experimental Decorators - <code>experimentalDecorators</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Enables <a href="https://github.com/tc39/proposal-decorators">experimental support for decorators</a>, which is a version of decorators that predates the TC39 standardization process.</p> <p>Decorators are a language feature which hasn’t yet been fully ratified into the JavaScript specification. This means that the implementation version in TypeScript may differ from the implementation in JavaScript when it it decided by TC39.</p> <p>You can find out more about decorator support in TypeScript in <a href="/docs/handbook/decorators.html">the handbook</a>.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#emitDecoratorMetadata' aria-label="Jump to compiler option info for emitDecoratorMetadata" ><code>emitDecoratorMetadata</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='jsx-config'><a aria-label="Link to the compiler option: jsx" id='jsx' href='#jsx' name='jsx' aria-labelledby="jsx-config">#</a> JSX - <code>jsx</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Controls how JSX constructs are emitted in JavaScript files. This only affects output of JS files that started in <code>.tsx</code> files.</p> <ul> <li><code>react-jsx</code>: Emit <code>.js</code> files with the JSX changed to <code>_jsx</code> calls optimized for production</li> <li><code>react-jsxdev</code>: Emit <code>.js</code> files with the JSX changed to <code>_jsx</code> calls for development only</li> <li><code>preserve</code>: Emit <code>.jsx</code> files with the JSX unchanged</li> <li><code>react-native</code>: Emit <code>.js</code> files with the JSX unchanged</li> <li><code>react</code>: Emit <code>.js</code> files with JSX changed to the equivalent <code>React.createElement</code> calls</li> </ul> <h3 id="for-example" style="position:relative;"><a href="#for-example" aria-label="for example permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>For example</h3> <p>This sample code:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #800000"><h1></span><span style="color: #000000">Hello world</span><span style="color: #800000"></h1></span><span style="color: #000000">;</span></div></code></div></pre> <p>React: <code>"react-jsx"</code><sup><a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html">[1]</a></sup></p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">jsx</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">_jsx</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"react/jsx-runtime"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #795E26">_jsx</span><span style="color: #000000">(</span><span style="color: #A31515">"h1"</span><span style="color: #000000">, { </span><span style="color: #001080">children:</span><span style="color: #000000"> </span><span style="color: #A31515">"Hello world"</span><span style="color: #000000"> });</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbrSATJNAGxSLhAlb1OSOACkAygA04Ab1Jw4wAHYwkUTOhEBRYSCQrZAX3mKVajWhEBJFVGUBnYGh1I9K+7JMKA2vYBccPYwdkoA5gC6AShKAJ4A3CbGxpRwAAL2ABYQAO5aIMAwFFSpShBaUDhQ9kVpAFb2AB4BROhM9Q2kSA2QsHBoEEpBcAASSJycEADq0JyscAC8cAAUAJQLAHxwADwZAIzro+MQcNkzrFvke+txQA'>Try</a></div></pre> <p>React dev transform: <code>"react-jsxdev"</code><sup><a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html">[1]</a></sup></p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">jsxDEV</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">_jsxDEV</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"react/jsx-dev-runtime"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">_jsxFileName</span><span style="color: #000000"> = </span><span style="color: #A31515">"/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/index.tsx"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #795E26">_jsxDEV</span><span style="color: #000000">(</span><span style="color: #A31515">"h1"</span><span style="color: #000000">, { </span><span style="color: #001080">children:</span><span style="color: #000000"> </span><span style="color: #A31515">"Hello world"</span><span style="color: #000000"> }, </span><span style="color: #0000FF">void</span><span style="color: #000000"> </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #0000FF">false</span><span style="color: #000000">, { </span><span style="color: #001080">fileName:</span><span style="color: #000000"> </span><span style="color: #001080">_jsxFileName</span><span style="color: #000000">, </span><span style="color: #001080">lineNumber:</span><span style="color: #000000"> </span><span style="color: #098658">9</span><span style="color: #000000">, </span><span style="color: #001080">columnNumber:</span><span style="color: #000000"> </span><span style="color: #098658">32</span><span style="color: #000000"> }, </span><span style="color: #0000FF">this</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbrSATJNAGxSLhAlb1OSOACkAygA04Ab1Jw4wAHYwkUTOhEBRYSCQrZAX3mKVajWhEBJFVGUBnYGh1I9K+7JMKA2vYBccPYwdkoA5gC6AShKAJ4A3CbGxpRwAAL2ABYQAO5aIMAwFFSpShBaUDhQ9kVpAFb2AB4BROhM9Q3sAG6kSA2QsHBoEEpBcAASSJycEADq0JyscAC8cAAUAJTLAHxwADwZAIxbE1MQcNnzrLvkh1txQA'>Try</a></div></pre> <p>Preserve: <code>"preserve"</code></p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">'react'</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #800000"><h1></span><span style="color: #000000">Hello world</span><span style="color: #800000"></h1></span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbrSATJNAGxSLhAlb1OSOACkAygA04Ab1Jw4wAHYwkUTOhEBRYSCQrZAX3mKVajWhEBJFVGUBnYGh1I9K+7JMKA2vYBccPYwdkoA5gC6AShKAJ4A3CbGxpRwAAL2ABYQAO5aIMAwFFSpShBaUDhQ9kVpAFb2AB4BYET2agBuSKRIDZCwcGgQSkFwABJInJwQAOrQnKxwALxwABQAlEsAfHAAPBkAjJvjkxBw2XOsO+QHm3FAA'>Try</a></div></pre> <p>React Native: <code>"react-native"</code></p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">'react'</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #800000"><h1></span><span style="color: #000000">Hello world</span><span style="color: #800000"></h1></span><span style="color: #000000">;</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbrSATJNAGxSLhAlb1OSOACkAygA04Ab1Jw4wAHYwkUTOhEBRYSCQrZAX3mKVajWhEBJFVGUBnYGh1I9K+7JMKA2vYBccPYwdkoA5gC6AShKAJ4A3CbGxpRwAAL2ABYQAO5aIMAwFFSpShBaUDhQ9kVpAFb2AB4BROhMSigwwABuSKRIDZCwcGgQSkFwABJInJwQAOrQnKxwALxwABQAlKsAfHAAPBkAjDtTMxBw2Yus++THO3FAA'>Try</a></div></pre> <p>Legacy React runtime: <code>"react"</code></p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">'react'</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">createElement</span><span style="color: #000000">(</span><span style="color: #A31515">"h1"</span><span style="color: #000000">, </span><span style="color: #0000FF">null</span><span style="color: #000000">, </span><span style="color: #A31515">"Hello world"</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbrSATJNAGxSLhAlb1OSOACkAygA04Ab1Jw4wAHYwkUTOhEBRYSCQrZAX3mKVajWhEBJFVGUBnYGh1I9K+7JMKA2vYBccPYwdkoA5gC6AShKAJ4A3CbGxpRwAAL2ABYQAO5aIMAwFFSpShBaUDhQ9qRIAB6QsHBoEEpBcAASSJycEADq0JyscAC8cAAUAJQjAHxwADwZAIzTnd0QcNkDrHPkS9NxQA'>Try</a></div></pre> <p>This option can be used on a per-file basis too using an <code>@jsxRuntime</code> comment.</p> <p>Always use the classic runtime (<code>"react"</code>) for this file:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/* @jsxRuntime classic */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #800000"><h1></span><span style="color: #000000">Hello world</span><span style="color: #800000"></h1></span><span style="color: #000000">;</span></div></code></div></pre> <p>Always use the automatic runtime (<code>"react-jsx"</code>) for this file:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/* @jsxRuntime automatic */</span></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #800000"><h1></span><span style="color: #000000">Hello world</span><span style="color: #800000"></h1></span><span style="color: #000000">;</span></div></code></div></pre> </div> <ul class='compiler-option-md'><li><span>Allowed:</span><ul><li><p><code>preserve</code></p> </li><li><p><code>react</code></p> </li><li><p><code>react-native</code></p> </li><li><p><code>react-jsx</code></p> </li><li><p><code>react-jsxdev</code></p> </li></ul></li> <li><span>Related:</span><ul><li><p><a href='#jsxFactory' aria-label="Jump to compiler option info for jsxFactory" ><code>jsxFactory</code></a></p> </li><li><p><a href='#jsxFragmentFactory' aria-label="Jump to compiler option info for jsxFragmentFactory" ><code>jsxFragmentFactory</code></a></p> </li><li><p><a href='#jsxImportSource' aria-label="Jump to compiler option info for jsxImportSource" ><code>jsxImportSource</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.2" href="/docs/handbook/release-notes/typescript-2-2.html">2.2</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='jsxFactory-config'><a aria-label="Link to the compiler option: jsxFactory" id='jsxFactory' href='#jsxFactory' name='jsxFactory' aria-labelledby="jsxFactory-config">#</a> JSX Factory - <code>jsxFactory</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Changes the function called in <code>.js</code> files when compiling JSX Elements using the classic JSX runtime. The most common change is to use <code>"h"</code> or <code>"preact.h"</code> instead of the default <code>"React.createElement"</code> if using <code>preact</code>.</p> <p>For example, this TSX file:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">h</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"preact"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #800000"><div></span><span style="color: #000000">Hello</span><span style="color: #800000"></div></span><span style="color: #000000">;</span></div></code></div></pre> <p>With <code>jsxFactory: "h"</code> looks like:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">preact_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"preact"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> (</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">preact_1</span><span style="color: #000000">.</span><span style="color: #001080">h</span><span style="color: #000000">)(</span><span style="color: #A31515">"div"</span><span style="color: #000000">, </span><span style="color: #0000FF">null</span><span style="color: #000000">, </span><span style="color: #A31515">"Hello"</span><span style="color: #000000">);</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbqKqABAZwAsIB3AURDAYrOJx4ChMGEgAmAMWAAbJAC44wAHaykADwB0AKw6i2x3fPQxoAT3VdTmiPyg4oJymJgooAcyQw6kgcmnoinmwgELL0KupouFGaxqSkoJCwcADecFwANHDyUCi+IEia8AC+cNi4cABEYERW9QDcqQmaHPAAEkhKShAA6tBKsnAAvHAAFACUkwB8cAA8ssAAbgt9AxDL5GubrUA'>Try</a></div></pre> <p>This option can be used on a per-file basis too similar to <a href="https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#custom">Babel’s <code>/** @jsx h */</code> directive</a>.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/** </span><span style="color: #0000FF">@jsx</span><span style="color: #008000"> h */</span></div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='import h' >h</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515"><data-err>"preact"</data-err></span><span style="color: #000000">;</span></div><span class="error"><span>Cannot find module 'preact' or its corresponding type declarations.</span><span class="code">2307</span></span><span class="error-behind">Cannot find module 'preact' or its corresponding type declarations.</span><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const HelloWorld: () => React.JSX.Element' >HelloWorld</data-lsp></span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #800000"><<data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>' >div</data-lsp>></span><span style="color: #000000">Hello</span><span style="color: #800000"></<data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>' >div</data-lsp>></span><span style="color: #000000">;</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbqKAqVuAAQCsBnADzgALOK3KlQkWHADewuAF842XHABEYIuhhqA3KVJoIAO17wAEkgA2ViAHVoVgCZwAvHAAUASjcA+OAA8TsAAbr6WNhAB5MFhukA'>Try</a></div></pre> <p>The factory chosen will also affect where the <code>JSX</code> namespace is looked up (for type checking information) before falling back to the global one.</p> <p>If the factory is defined as <code>React.createElement</code> (the default), the compiler will check for <code>React.JSX</code> before checking for a global <code>JSX</code>. If the factory is defined as <code>h</code>, it will check for <code>h.JSX</code> before a global <code>JSX</code>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>React.createElement</code></p> </li> <li><span>Allowed:</span><ul><li><p>Any identifier or dotted identifier.</p> </li></ul></li> <li><span>Related:</span><ul><li><p><a href='#jsx' aria-label="Jump to compiler option info for jsx" ><code>jsx</code></a></p> </li><li><p><a href='#jsxFragmentFactory' aria-label="Jump to compiler option info for jsxFragmentFactory" ><code>jsxFragmentFactory</code></a></p> </li><li><p><a href='#jsxImportSource' aria-label="Jump to compiler option info for jsxImportSource" ><code>jsxImportSource</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='jsxFragmentFactory-config'><a aria-label="Link to the compiler option: jsxFragmentFactory" id='jsxFragmentFactory' href='#jsxFragmentFactory' name='jsxFragmentFactory' aria-labelledby="jsxFragmentFactory-config">#</a> JSX Fragment Factory - <code>jsxFragmentFactory</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Specify the JSX fragment factory function to use when targeting react JSX emit with <a href="#jsxFactory"><code>jsxFactory</code></a> compiler option is specified, e.g. <code>Fragment</code>.</p> <p>For example with this TSConfig:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#target'><data-lsp lsp="Set the JavaScript language version for emitted JavaScript and include compatible library declarations.">target</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"esnext"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#module'><data-lsp lsp="Specify what module code is generated.">module</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"commonjs"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#jsx'><data-lsp lsp="Specify what JSX code is generated.">jsx</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"react"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#jsxFactory'><data-lsp lsp="Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'.">jsxFactory</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"h"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#jsxFragmentFactory'><data-lsp lsp="Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'.">jsxFragmentFactory</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"Fragment"</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>This TSX file:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">h</span><span style="color: #000000">, </span><span style="color: #001080">Fragment</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"preact"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> (</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #800000"><></span></div><div class='line'><span style="color: #000000"> </span><span style="color: #800000"><div></span><span style="color: #000000">Hello</span><span style="color: #800000"></div></span></div><div class='line'><span style="color: #000000"> </span><span style="color: #800000"></></span></div><div class='line'><span style="color: #000000">);</span></div></code></div></pre> <p>Would look like:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">preact_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"preact"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">HelloWorld</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> ((</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">preact_1</span><span style="color: #000000">.</span><span style="color: #001080">h</span><span style="color: #000000">)(</span><span style="color: #001080">preact_1</span><span style="color: #000000">.</span><span style="color: #001080">Fragment</span><span style="color: #000000">, </span><span style="color: #0000FF">null</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> (</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">preact_1</span><span style="color: #000000">.</span><span style="color: #001080">h</span><span style="color: #000000">)(</span><span style="color: #A31515">"div"</span><span style="color: #000000">, </span><span style="color: #0000FF">null</span><span style="color: #000000">, </span><span style="color: #A31515">"Hello"</span><span style="color: #000000">)));</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbqKqABAZwAsIB3AURDAYrOJx4ChMGEgAmAMWAAbJAC44wAHaykADwB0AKw6i2x3fPQxoAT3VdT5+VBQBzEEk0xLGW+uduHl6mmhD8UDhQJpRiMChQrkgw6kgcmnoiMWwgELL0KupouDmaxqSkoJCwcADecFwANHAB7p7wAL5w2LhwAERgRFa9ANzlRZoc8AASSEpKEADq0EqycAC8cAAUAJTrAHxbpHBwADx7R8enssAAbnszcxAn5Nd3F8-n28NAA'>Try</a></div></pre> <p>This option can be used on a per-file basis too similar to <a href="https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#fragments">Babel’s <code>/* @jsxFrag h */</code> directive</a>.</p> <p>For example:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/** </span><span style="color: #0000FF">@jsx</span><span style="color: #008000"> h */</span></div><div class='line'><span style="color: #008000">/** </span><span style="color: #0000FF">@jsxFrag</span><span style="color: #008000"> Fragment */</span></div><div class='line'> </div><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080"><data-lsp lsp='import h' >h</data-lsp></span><span style="color: #000000">, </span><span style="color: #001080"><data-lsp lsp='import Fragment' >Fragment</data-lsp></span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515"><data-err>"preact"</data-err></span><span style="color: #000000">;</span></div><span class="error"><span>Cannot find module 'preact' or its corresponding type declarations.</span><span class="code">2307</span></span><span class="error-behind">Cannot find module 'preact' or its corresponding type declarations.</span><div class='line'> </div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='const HelloWorld: () => React.JSX.Element' >HelloWorld</data-lsp></span><span style="color: #000000"> = () </span><span style="color: #0000FF">=></span><span style="color: #000000"> (</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #800000"><></span></div><div class='line'><span style="color: #000000"> </span><span style="color: #800000"><<data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>' >div</data-lsp>></span><span style="color: #000000">Hello</span><span style="color: #800000"></<data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>' >div</data-lsp>></span></div><div class='line'><span style="color: #000000"> </span><span style="color: #800000"></></span></div><div class='line'><span style="color: #000000">);</span></div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbqKAqVuAAQCsBnADzgALOK3JsOPAQDEoKAOZxZCkEgB28MaVKhIsOAG9hAGiVz5qjXAC+cbLjgAiMEXQxHAbm1oIa3vAAJJAAbYIgAdWhggBM4AF44AAoASniAPiTSODgAHjSs7Nzo4AA3NKDQiBzyYrKC6vzkjyA'>Try</a></div></pre> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>React.Fragment</code></p> </li> <li><span>Related:</span><ul><li><p><a href='#jsx' aria-label="Jump to compiler option info for jsx" ><code>jsx</code></a></p> </li><li><p><a href='#jsxFactory' aria-label="Jump to compiler option info for jsxFactory" ><code>jsxFactory</code></a></p> </li><li><p><a href='#jsxImportSource' aria-label="Jump to compiler option info for jsxImportSource" ><code>jsxImportSource</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.0" href="/docs/handbook/release-notes/typescript-4-0.html">4.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='jsxImportSource-config'><a aria-label="Link to the compiler option: jsxImportSource" id='jsxImportSource' href='#jsxImportSource' name='jsxImportSource' aria-labelledby="jsxImportSource-config">#</a> JSX Import Source - <code>jsxImportSource</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Declares the module specifier to be used for importing the <code>jsx</code> and <code>jsxs</code> factory functions when using <a href="#jsx"><code>jsx</code></a> as <code>"react-jsx"</code> or <code>"react-jsxdev"</code> which were introduced in TypeScript 4.1.</p> <p>With <a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html">React 17</a> the library supports a new form of JSX transformation via a separate import.</p> <p>For example with this code:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">"react"</span><span style="color: #000000">;</span></div><div class='line'></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #800000"><h1></span><span style="color: #000000">Hello World</span><span style="color: #800000"></h1></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Using this TSConfig:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#target'><data-lsp lsp="Set the JavaScript language version for emitted JavaScript and include compatible library declarations.">target</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"esnext"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#module'><data-lsp lsp="Specify what module code is generated.">module</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"commonjs"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#jsx'><data-lsp lsp="Specify what JSX code is generated.">jsx</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"react-jsx"</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>The emitted JavaScript from TypeScript is:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #A31515">"use strict"</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #1C6277">Object</span><span style="color: #000000">.</span><span style="color: #795E26">defineProperty</span><span style="color: #000000">(</span><span style="color: #1C6277">exports</span><span style="color: #000000">, </span><span style="color: #A31515">"__esModule"</span><span style="color: #000000">, { </span><span style="color: #001080">value:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">jsx_runtime_1</span><span style="color: #000000"> = </span><span style="color: #795E26">require</span><span style="color: #000000">(</span><span style="color: #A31515">"react/jsx-runtime"</span><span style="color: #000000">);</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">jsx_runtime_1</span><span style="color: #000000">.</span><span style="color: #001080">jsx</span><span style="color: #000000">)(</span><span style="color: #A31515">"h1"</span><span style="color: #000000">, { </span><span style="color: #001080">children:</span><span style="color: #000000"> </span><span style="color: #A31515">"Hello World"</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEGcAsHsHcCiBbAlgFwFAggO1ogE6GyGTZjgBWkAHgFyiECmAhgMboC0NtFEyWABMArgBtmjdrGSDcNfuHStCAc2bpGzSLma0sQ5uzErmoQaImgAUgGUAGqADemUKFS50zQgDMOZxAlkZk9nAF9Xd09vP3YzAElPQg9IVHZA5mDPSGdItwBtSEZIdGTcVQBdRlZcAE8AbkiIiNRkAAdSdFAAJTZOUB8SZFAAIhYOdBHGzB8RXE5UWFxQAEE2toAKAEpctxZ0EUJlgB5oAEYAPgAJZjExWFAAdVIxIWPgc4vGsKA'>Try</a></div></pre> <p>For example if you wanted to use <code>"jsxImportSource": "preact"</code>, you need a tsconfig like:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#target'><data-lsp lsp="Set the JavaScript language version for emitted JavaScript and include compatible library declarations.">target</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"esnext"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#module'><data-lsp lsp="Specify what module code is generated.">module</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"commonjs"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#jsx'><data-lsp lsp="Specify what JSX code is generated.">jsx</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"react-jsx"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#jsxImportSource'><data-lsp lsp="Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.">jsxImportSource</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #A31515">"preact"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#types'><data-lsp lsp="Specify type package names to be included without being referenced in a source file.">types</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"preact"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Which generates code like:</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">jsx_runtime_1</span><span style="color: #000000">.</span><span style="color: #001080">jsx</span><span style="color: #000000">)(</span><span style="color: #A31515">"h1"</span><span style="color: #000000">, { </span><span style="color: #001080">children:</span><span style="color: #000000"> </span><span style="color: #A31515">"Hello World"</span><span style="color: #000000"> });</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wCgB6cuAWlrQFcZbqKqABAZwAsIB3AURDAYrOGwBWHAB4BJcNBgBlCPShokALjhgi6EZTEwAnmCQctO4vvaSpW3Rmq3RbGCigBzJDC1mAdkhS1mIgEAAm9AA2mnBouKF+ki5+EPxQOFAcpKSBkLBwmPR+GMAQfnAAgmBgABQAlHAA3qRwcEQwquUAPFwAjAB8ABJIkZEQcADq0JFhXeR9-QDcpAC+QA'>Try</a></div></pre> <p>Alternatively, you can use a per-file pragma to set this option, for example:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">tsx</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #008000">/** </span><span style="color: #0000FF">@jsxImportSource</span><span style="color: #008000"> preact */</span></div><div class='line'></div><div class='line'><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000">() {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #800000"><h1></span><span style="color: #000000">Hello World</span><span style="color: #800000"></h1></span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Would add <code>preact/jsx-runtime</code> as an import for the <code>_jsx</code> factory.</p> <p><em>Note:</em> In order for this to work like you would expect, your <code>tsx</code> file must include an <code>export</code> or <code>import</code> so that it is considered a module.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>react</code></p> </li> <li><span>Related:</span><ul><li><p><a href='#jsx' aria-label="Jump to compiler option info for jsx" ><code>jsx</code></a></p> </li><li><p><a href='#jsxFactory' aria-label="Jump to compiler option info for jsxFactory" ><code>jsxFactory</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.1" href="/docs/handbook/release-notes/typescript-4-1.html">4.1</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='lib-config'><a aria-label="Link to the compiler option: lib" id='lib' href='#lib' name='lib' aria-labelledby="lib-config">#</a> Lib - <code>lib</code></h3> <div class='compiler-content'> <div class='markdown'> <p>TypeScript includes a default set of type definitions for built-in JS APIs (like <code>Math</code>), as well as type definitions for things found in browser environments (like <code>document</code>). TypeScript also includes APIs for newer JS features matching the <a href="#target"><code>target</code></a> you specify; for example the definition for <code>Map</code> is available if <a href="#target"><code>target</code></a> is <code>ES6</code> or newer.</p> <p>You may want to change these for a few reasons:</p> <ul> <li>Your program doesn’t run in a browser, so you don’t want the <code>"dom"</code> type definitions</li> <li>Your runtime platform provides certain JavaScript API objects (maybe through polyfills), but doesn’t yet support the full syntax of a given ECMAScript version</li> <li>You have polyfills or native implementations for some, but not all, of a higher level ECMAScript version</li> </ul> <p>In TypeScript 4.5, lib files can be overridden by npm modules, find out more <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#supporting-lib-from-node_modules">in the blog</a>.</p> <h3 id="high-level-libraries" style="position:relative;"><a href="#high-level-libraries" aria-label="high level libraries permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>High Level libraries</h3> <table> <thead> <tr> <th>Name</th> <th>Contents</th> </tr> </thead> <tbody> <tr> <td><code>ES5</code></td> <td>Core definitions for all ES5 functionality</td> </tr> <tr> <td><code>ES2015</code></td> <td>Additional APIs available in ES2015 (also known as ES6) - <code>array.find</code>, <code>Promise</code>, <code>Proxy</code>, <code>Symbol</code>, <code>Map</code>, <code>Set</code>, <code>Reflect</code>, etc.</td> </tr> <tr> <td><code>ES6</code></td> <td>Alias for “ES2015”</td> </tr> <tr> <td><code>ES2016</code></td> <td>Additional APIs available in ES2016 - <code>array.include</code>, etc.</td> </tr> <tr> <td><code>ES7</code></td> <td>Alias for “ES2016”</td> </tr> <tr> <td><code>ES2017</code></td> <td>Additional APIs available in ES2017 - <code>Object.entries</code>, <code>Object.values</code>, <code>Atomics</code>, <code>SharedArrayBuffer</code>, <code>date.formatToParts</code>, typed arrays, etc.</td> </tr> <tr> <td><code>ES2018</code></td> <td>Additional APIs available in ES2018 - <code>async</code> iterables, <code>promise.finally</code>, <code>Intl.PluralRules</code>, <code>regexp.groups</code>, etc.</td> </tr> <tr> <td><code>ES2019</code></td> <td>Additional APIs available in ES2019 - <code>array.flat</code>, <code>array.flatMap</code>, <code>Object.fromEntries</code>, <code>string.trimStart</code>, <code>string.trimEnd</code>, etc.</td> </tr> <tr> <td><code>ES2020</code></td> <td>Additional APIs available in ES2020 - <code>string.matchAll</code>, etc.</td> </tr> <tr> <td><code>ES2021</code></td> <td>Additional APIs available in ES2021 - <code>promise.any</code>, <code>string.replaceAll</code> etc.</td> </tr> <tr> <td><code>ES2022</code></td> <td>Additional APIs available in ES2022 - <code>array.at</code>, <code>RegExp.hasIndices</code>, etc.</td> </tr> <tr> <td><code>ES2023</code></td> <td>Additional APIs available in ES2023 - <code>array.with</code>, <code>array.findLast</code>, <code>array.findLastIndex</code>, <code>array.toSorted</code>, <code>array.toReversed</code>, etc.</td> </tr> <tr> <td><code>ESNext</code></td> <td>Additional APIs available in ESNext - This changes as the JavaScript specification evolves</td> </tr> <tr> <td><code>DOM</code></td> <td><a href="https://developer.mozilla.org/docs/Glossary/DOM">DOM</a> definitions - <code>window</code>, <code>document</code>, etc.</td> </tr> <tr> <td><code>WebWorker</code></td> <td>APIs available in <a href="https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Using_web_workers">WebWorker</a> contexts</td> </tr> <tr> <td><code>ScriptHost</code></td> <td>APIs for the <a href="https://wikipedia.org/wiki/Windows_Script_Host">Windows Script Hosting System</a></td> </tr> </tbody> </table> <h3 id="individual-library-components" style="position:relative;"><a href="#individual-library-components" aria-label="individual library components permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Individual library components</h3> <table> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr> <td><code>DOM.Iterable</code></td> </tr> <tr> <td><code>ES2015.Core</code></td> </tr> <tr> <td><code>ES2015.Collection</code></td> </tr> <tr> <td><code>ES2015.Generator</code></td> </tr> <tr> <td><code>ES2015.Iterable</code></td> </tr> <tr> <td><code>ES2015.Promise</code></td> </tr> <tr> <td><code>ES2015.Proxy</code></td> </tr> <tr> <td><code>ES2015.Reflect</code></td> </tr> <tr> <td><code>ES2015.Symbol</code></td> </tr> <tr> <td><code>ES2015.Symbol.WellKnown</code></td> </tr> <tr> <td><code>ES2016.Array.Include</code></td> </tr> <tr> <td><code>ES2017.object</code></td> </tr> <tr> <td><code>ES2017.Intl</code></td> </tr> <tr> <td><code>ES2017.SharedMemory</code></td> </tr> <tr> <td><code>ES2017.String</code></td> </tr> <tr> <td><code>ES2017.TypedArrays</code></td> </tr> <tr> <td><code>ES2018.Intl</code></td> </tr> <tr> <td><code>ES2018.Promise</code></td> </tr> <tr> <td><code>ES2018.RegExp</code></td> </tr> <tr> <td><code>ES2019.Array</code></td> </tr> <tr> <td><code>ES2019.Object</code></td> </tr> <tr> <td><code>ES2019.String</code></td> </tr> <tr> <td><code>ES2019.Symbol</code></td> </tr> <tr> <td><code>ES2020.String</code></td> </tr> <tr> <td><code>ES2020.Symbol.wellknown</code></td> </tr> <tr> <td><code>ES2021.Promise</code></td> </tr> <tr> <td><code>ES2021.String</code></td> </tr> <tr> <td><code>ES2021.WeakRef</code></td> </tr> <tr> <td><code>ESNext.AsyncIterable</code></td> </tr> <tr> <td><code>ESNext.Array</code></td> </tr> <tr> <td><code>ESNext.Intl</code></td> </tr> <tr> <td><code>ESNext.Symbol</code></td> </tr> </tbody> </table> <p>This list may be out of date, you can see the full list in the <a href="https://github.com/microsoft/TypeScript/tree/main/src/lib">TypeScript source code</a>.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#noLib' aria-label="Jump to compiler option info for noLib" ><code>noLib</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='moduleDetection-config'><a aria-label="Link to the compiler option: moduleDetection" id='moduleDetection' href='#moduleDetection' name='moduleDetection' aria-labelledby="moduleDetection-config">#</a> Module Detection - <code>moduleDetection</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This setting controls how TypeScript determines whether a file is a <a href="/docs/handbook/modules/theory.html#scripts-and-modules-in-javascript">script or a module</a>.</p> <p>There are three choices:</p> <ul> <li> <p><code>"auto"</code> (default) - TypeScript will not only look for import and export statements, but it will also check whether the <code>"type"</code> field in a <code>package.json</code> is set to <code>"module"</code> when running with <a href="#module"><code>module</code></a>: <code>nodenext</code> or <code>node16</code>, and check whether the current file is a JSX file when running under <a href="#jsx"><code>jsx</code></a>: <code>react-jsx</code>.</p> </li> <li> <p><code>"legacy"</code> - The same behavior as 4.6 and prior, usings import and export statements to determine whether a file is a module.</p> </li> <li> <p><code>"force"</code> - Ensures that every non-declaration file is treated as a module.</p> </li> </ul> </div> <ul class='compiler-option-md'><li><span>Default:</span><p>"auto": Treat files with imports, exports, import.meta, jsx (with jsx: react-jsx), or esm format (with module: node16+) as modules.</p> </li> <li><span>Allowed:</span><ul><li><p><code>legacy</code></p> </li><li><p><code>auto</code></p> </li><li><p><code>force</code></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.7" href="/docs/handbook/release-notes/typescript-4-7.html">4.7</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='noLib-config'><a aria-label="Link to the compiler option: noLib" id='noLib' href='#noLib' name='noLib' aria-labelledby="noLib-config">#</a> No Lib - <code>noLib</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Disables the automatic inclusion of any library files. If this option is set, <code>lib</code> is ignored.</p> <p>TypeScript <em>cannot</em> compile anything without a set of interfaces for key primitives like: <code>Array</code>, <code>Boolean</code>, <code>Function</code>, <code>IArguments</code>, <code>Number</code>, <code>Object</code>, <code>RegExp</code>, and <code>String</code>. It is expected that if you use <code>noLib</code> you will be including your own type definitions for these.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#lib' aria-label="Jump to compiler option info for lib" ><code>lib</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='reactNamespace-config'><a aria-label="Link to the compiler option: reactNamespace" id='reactNamespace' href='#reactNamespace' name='reactNamespace' aria-labelledby="reactNamespace-config">#</a> React Namespace - <code>reactNamespace</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Use <a href="#jsxFactory"><code>jsxFactory</code></a> instead. Specify the object invoked for <code>createElement</code> when targeting <code>react</code> for TSX files.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>React</code></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='target-config'><a aria-label="Link to the compiler option: target" id='target' href='#target' name='target' aria-labelledby="target-config">#</a> Target - <code>target</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Modern browsers support all ES6 features, so <code>ES6</code> is a good choice. You might choose to set a lower target if your code is deployed to older environments, or a higher target if your code is guaranteed to run in newer environments.</p> <p>The <code>target</code> setting changes which JS features are downleveled and which are left intact. For example, an arrow function <code>() => this</code> will be turned into an equivalent <code>function</code> expression if <code>target</code> is ES5 or lower.</p> <p>Changing <code>target</code> also changes the default value of <a href="#lib"><code>lib</code></a>. You may “mix and match” <code>target</code> and <code>lib</code> settings as desired, but you could just set <code>target</code> for convenience.</p> <p>For developer platforms like Node there are baselines for the <code>target</code>, depending on the type of platform and its version. You can find a set of community organized TSConfigs at <a href="https://github.com/tsconfig/bases#centralized-recommendations-for-tsconfig-bases">tsconfig/bases</a>, which has configurations for common platforms and their versions.</p> <p>The special <code>ESNext</code> value refers to the highest version your version of TypeScript supports. This setting should be used with caution, since it doesn’t mean the same thing between different TypeScript versions and can make upgrades less predictable.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>ES5</code></p> </li> <li><span>Allowed:</span><ul><li><p><code>es3</code></p> </li><li><p><code>es5</code></p> </li><li><p><code>es6</code>/<code>es2015</code></p> </li><li><p><code>es2016</code></p> </li><li><p><code>es2017</code></p> </li><li><p><code>es2018</code></p> </li><li><p><code>es2019</code></p> </li><li><p><code>es2020</code></p> </li><li><p><code>es2021</code></p> </li><li><p><code>es2022</code></p> </li><li><p><code>es2023</code></p> </li><li><p><code>esnext</code></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 1.0" href="/docs/handbook/release-notes/typescript-1-0.html">1.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='useDefineForClassFields-config'><a aria-label="Link to the compiler option: useDefineForClassFields" id='useDefineForClassFields' href='#useDefineForClassFields' name='useDefineForClassFields' aria-labelledby="useDefineForClassFields-config">#</a> Use Define For Class Fields - <code>useDefineForClassFields</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This flag is used as part of migrating to the upcoming standard version of class fields. TypeScript introduced class fields many years before it was ratified in TC39. The latest version of the upcoming specification has a different runtime behavior to TypeScript’s implementation but the same syntax.</p> <p>This flag switches to the upcoming ECMA runtime behavior.</p> <p>You can read more about the transition in <a href="/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier">the 3.7 release notes</a>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> if <a href="#target"><code>target</code></a> is <code>ES2022</code> or higher, including <code>ESNext</code>; <code>false</code> otherwise.</p> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.7" href="/docs/handbook/release-notes/typescript-3-7.html">3.7</a></p> </li></ul> </div></section> <div class='category'> <h2 id='Compiler_Diagnostics_6251' ><a href='#Compiler_Diagnostics_6251' name='Compiler_Diagnostics_6251' aria-label="Link to the section Compiler Diagnostics" aria-labelledby='Compiler_Diagnostics_6251'>#</a>Compiler Diagnostics</h2> </div> <section class='compiler-option'> <h3 id='diagnostics-config'><a aria-label="Link to the compiler option: diagnostics" id='diagnostics' href='#diagnostics' name='diagnostics' aria-labelledby="diagnostics-config">#</a> Diagnostics - <code>diagnostics</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Used to output diagnostic information for debugging. This command is a subset of <a href="#extendedDiagnostics"><code>extendedDiagnostics</code></a> which are more user-facing results, and easier to interpret.</p> <p>If you have been asked by a TypeScript compiler engineer to give the results using this flag in a compile, in which there is no harm in using <a href="#extendedDiagnostics"><code>extendedDiagnostics</code></a> instead.</p> </div> <ul class='compiler-option-md'><li><span>Deprecated</span> </li> <li><span>Related:</span><ul><li><p><a href='#extendedDiagnostics' aria-label="Jump to compiler option info for extendedDiagnostics" ><code>extendedDiagnostics</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='explainFiles-config'><a aria-label="Link to the compiler option: explainFiles" id='explainFiles' href='#explainFiles' name='explainFiles' aria-labelledby="explainFiles-config">#</a> Explain Files - <code>explainFiles</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Print names of files which TypeScript sees as a part of your project and the reason they are part of the compilation.</p> <p>For example, with this project of just a single <code>index.ts</code> file</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">sh</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">example</span></div><div class='line'><span style="color: #000000">├── index.ts</span></div><div class='line'><span style="color: #000000">├── package.json</span></div><div class='line'><span style="color: #000000">└── tsconfig.json</span></div></code></div></pre> <p>Using a <code>tsconfig.json</code> which has <code>explainFiles</code> set to true:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">json</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"compilerOptions"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"target"</span><span style="color: #000000">: </span><span style="color: #A31515">"es5"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"module"</span><span style="color: #000000">: </span><span style="color: #A31515">"commonjs"</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"explainFiles"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Running TypeScript against this folder would have output like this:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">❯ tsc</span></div><div class='line'><span style="color: undefined">node_modules/typescript/lib/lib.d.ts</span></div><div class='line'><span style="color: undefined"> Default library for target 'es5'</span></div><div class='line'><span style="color: undefined">node_modules/typescript/lib/lib.es5.d.ts</span></div><div class='line'><span style="color: undefined"> Library referenced via 'es5' from file 'node_modules/typescript/lib/lib.d.ts'</span></div><div class='line'><span style="color: undefined">node_modules/typescript/lib/lib.dom.d.ts</span></div><div class='line'><span style="color: undefined"> Library referenced via 'dom' from file 'node_modules/typescript/lib/lib.d.ts'</span></div><div class='line'><span style="color: undefined">node_modules/typescript/lib/lib.webworker.importscripts.d.ts</span></div><div class='line'><span style="color: undefined"> Library referenced via 'webworker.importscripts' from</span></div><div class='line'><span style="color: undefined"> file 'node_modules/typescript/lib/lib.d.ts'</span></div><div class='line'><span style="color: undefined">node_modules/typescript/lib/lib.scripthost.d.ts</span></div><div class='line'><span style="color: undefined"> Library referenced via 'scripthost'</span></div><div class='line'><span style="color: undefined"> from file 'node_modules/typescript/lib/lib.d.ts'</span></div><div class='line'><span style="color: undefined">index.ts</span></div><div class='line'><span style="color: undefined"> Matched by include pattern '**/*' in 'tsconfig.json'</span></div></code></div></pre> <p>The output above show:</p> <ul> <li>The initial lib.d.ts lookup based on <a href="#target"><code>target</code></a>, and the chain of <code>.d.ts</code> files which are referenced</li> <li>The <code>index.ts</code> file located via the default pattern of <a href="#include"><code>include</code></a></li> </ul> <p>This option is intended for debugging how a file has become a part of your compile.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.2" href="/docs/handbook/release-notes/typescript-4-2.html">4.2</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='extendedDiagnostics-config'><a aria-label="Link to the compiler option: extendedDiagnostics" id='extendedDiagnostics' href='#extendedDiagnostics' name='extendedDiagnostics' aria-labelledby="extendedDiagnostics-config">#</a> Extended Diagnostics - <code>extendedDiagnostics</code></h3> <div class='compiler-content'> <div class='markdown'> <p>You can use this flag to discover where TypeScript is spending its time when compiling. This is a tool used for understanding the performance characteristics of your codebase overall.</p> <p>You can learn more about how to measure and understand the output in the performance <a href="https://github.com/microsoft/TypeScript/wiki/Performance">section of the wiki</a>.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#diagnostics' aria-label="Jump to compiler option info for diagnostics" ><code>diagnostics</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='generateCpuProfile-config'><a aria-label="Link to the compiler option: generateCpuProfile" id='generateCpuProfile' href='#generateCpuProfile' name='generateCpuProfile' aria-labelledby="generateCpuProfile-config">#</a> Generate CPU Profile - <code>generateCpuProfile</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This option gives you the chance to have TypeScript emit a v8 CPU profile during the compiler run. The CPU profile can provide insight into why your builds may be slow.</p> <p>This option can only be used from the CLI via: <code>--generateCpuProfile tsc-output.cpuprofile</code>.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">sh</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">npm run tsc --generateCpuProfile tsc-output.cpuprofile</span></div></code></div></pre> <p>This file can be opened in a chromium based browser like Chrome or Edge Developer in <a href="https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution">the CPU profiler</a> section. You can learn more about understanding the compilers performance in the <a href="https://github.com/microsoft/TypeScript/wiki/Performance">TypeScript wiki section on performance</a>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>profile.cpuprofile</code></p> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.7" href="/docs/handbook/release-notes/typescript-3-7.html">3.7</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='generateTrace-config'><a aria-label="Link to the compiler option: generateTrace" id='generateTrace' href='#generateTrace' name='generateTrace' aria-labelledby="generateTrace-config">#</a> generateTrace - <code>generateTrace</code></h3> <div class='compiler-content'> <div class='markdown'> Generates an event trace and a list of types. </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='listEmittedFiles-config'><a aria-label="Link to the compiler option: listEmittedFiles" id='listEmittedFiles' href='#listEmittedFiles' name='listEmittedFiles' aria-labelledby="listEmittedFiles-config">#</a> List Emitted Files - <code>listEmittedFiles</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Print names of generated files part of the compilation to the terminal.</p> <p>This flag is useful in two cases:</p> <ul> <li>You want to transpile TypeScript as a part of a build chain in the terminal where the filenames are processed in the next command.</li> <li>You are not sure that TypeScript has included a file you expected, as a part of debugging the <a href="#Project_Files_0">file inclusion settings</a>.</li> </ul> <p>For example:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">example</span></div><div class='line'><span style="color: undefined">├── index.ts</span></div><div class='line'><span style="color: undefined">├── package.json</span></div><div class='line'><span style="color: undefined">└── tsconfig.json</span></div></code></div></pre> <p>With:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#declaration'><data-lsp lsp="Generate .d.ts files from TypeScript and JavaScript files in your project.">declaration</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span><span style="color: #000000">,</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#listEmittedFiles'><data-lsp lsp="Print the names of emitted files after a compilation.">listEmittedFiles</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Would echo paths like:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">$ npm run tsc</span></div><div class='line'><span style="color: undefined"></span></div><div class='line'><span style="color: undefined">path/to/example/index.js</span></div><div class='line'><span style="color: undefined">path/to/example/index.d.ts</span></div></code></div></pre> <p>Normally, TypeScript would return silently on success.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='listFiles-config'><a aria-label="Link to the compiler option: listFiles" id='listFiles' href='#listFiles' name='listFiles' aria-labelledby="listFiles-config">#</a> List Files - <code>listFiles</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Print names of files part of the compilation. This is useful when you are not sure that TypeScript has included a file you expected.</p> <p>For example:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">example</span></div><div class='line'><span style="color: undefined">├── index.ts</span></div><div class='line'><span style="color: undefined">├── package.json</span></div><div class='line'><span style="color: undefined">└── tsconfig.json</span></div></code></div></pre> <p>With:</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#compilerOptions'><data-lsp lsp="The set of compiler options for your project">compilerOptions</data-lsp></a>"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#listFiles'><data-lsp lsp="Print all of the files read during the compilation.">listFiles</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> <p>Would echo paths like:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: undefined">$ npm run tsc</span></div><div class='line'><span style="color: undefined">path/to/example/node_modules/typescript/lib/lib.d.ts</span></div><div class='line'><span style="color: undefined">path/to/example/node_modules/typescript/lib/lib.es5.d.ts</span></div><div class='line'><span style="color: undefined">path/to/example/node_modules/typescript/lib/lib.dom.d.ts</span></div><div class='line'><span style="color: undefined">path/to/example/node_modules/typescript/lib/lib.webworker.importscripts.d.ts</span></div><div class='line'><span style="color: undefined">path/to/example/node_modules/typescript/lib/lib.scripthost.d.ts</span></div><div class='line'><span style="color: undefined">path/to/example/index.ts</span></div></code></div></pre> <p>Note if using TypeScript 4.2, prefer <a href="#explainFiles"><code>explainFiles</code></a> which offers an explanation of why a file was added too.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#explainFiles' aria-label="Jump to compiler option info for explainFiles" ><code>explainFiles</code></a></p> </li></ul></li></ul> </div></section> <section class='compiler-option'> <h3 id='noCheck-config'><a aria-label="Link to the compiler option: noCheck" id='noCheck' href='#noCheck' name='noCheck' aria-labelledby="noCheck-config">#</a> noCheck - <code>noCheck</code></h3> <div class='compiler-content'> <div class='markdown'> Disable full type checking (only critical parse and emit errors will be reported). </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='traceResolution-config'><a aria-label="Link to the compiler option: traceResolution" id='traceResolution' href='#traceResolution' name='traceResolution' aria-labelledby="traceResolution-config">#</a> Trace Resolution - <code>traceResolution</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When you are trying to debug why a module isn’t being included. You can set <code>traceResolution</code> to <code>true</code> to have TypeScript print information about its resolution process for each processed file.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <div class='category'> <h2 id='Projects_6255' ><a href='#Projects_6255' name='Projects_6255' aria-label="Link to the section Projects" aria-labelledby='Projects_6255'>#</a>Projects</h2> </div> <section class='compiler-option'> <h3 id='composite-config'><a aria-label="Link to the compiler option: composite" id='composite' href='#composite' name='composite' aria-labelledby="composite-config">#</a> Composite - <code>composite</code></h3> <div class='compiler-content'> <div class='markdown'> <p>The <code>composite</code> option enforces certain constraints which make it possible for build tools (including TypeScript itself, under <code>--build</code> mode) to quickly determine if a project has been built yet.</p> <p>When this setting is on:</p> <ul> <li> <p>The <a href="#rootDir"><code>rootDir</code></a> setting, if not explicitly set, defaults to the directory containing the <code>tsconfig.json</code> file.</p> </li> <li> <p>All implementation files must be matched by an <a href="#include"><code>include</code></a> pattern or listed in the <a href="#files"><code>files</code></a> array. If this constraint is violated, <code>tsc</code> will inform you which files weren’t specified.</p> </li> <li> <p><a href="#declaration"><code>declaration</code></a> defaults to <code>true</code></p> </li> </ul> <p>You can find documentation on TypeScript projects in <a href="https://www.typescriptlang.org/docs/handbook/project-references.html">the handbook</a>.</p> </div> <ul class='compiler-option-md'><li><span>Related:</span><ul><li><p><a href='#incremental' aria-label="Jump to compiler option info for incremental" ><code>incremental</code></a></p> </li><li><p><a href='#tsBuildInfoFile' aria-label="Jump to compiler option info for tsBuildInfoFile" ><code>tsBuildInfoFile</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.0" href="/docs/handbook/release-notes/typescript-3-0.html">3.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='disableReferencedProjectLoad-config'><a aria-label="Link to the compiler option: disableReferencedProjectLoad" id='disableReferencedProjectLoad' href='#disableReferencedProjectLoad' name='disableReferencedProjectLoad' aria-labelledby="disableReferencedProjectLoad-config">#</a> Disable Referenced Project Load - <code>disableReferencedProjectLoad</code></h3> <div class='compiler-content'> <div class='markdown'> <p>In multi-project TypeScript programs, TypeScript will load all of the available projects into memory in order to provide accurate results for editor responses which require a full knowledge graph like ‘Find All References’.</p> <p>If your project is large, you can use the flag <code>disableReferencedProjectLoad</code> to disable the automatic loading of all projects. Instead, projects are loaded dynamically as you open files through your editor.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.0" href="/docs/handbook/release-notes/typescript-4-0.html">4.0</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='disableSolutionSearching-config'><a aria-label="Link to the compiler option: disableSolutionSearching" id='disableSolutionSearching' href='#disableSolutionSearching' name='disableSolutionSearching' aria-labelledby="disableSolutionSearching-config">#</a> Disable Solution Searching - <code>disableSolutionSearching</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When working with <a href="/docs/handbook/project-references.html">composite TypeScript projects</a>, this option provides a way to declare that you do not want a project to be included when using features like <em>find all references</em> or <em>jump to definition</em> in an editor.</p> <p>This flag is something you can use to increase responsiveness in large composite projects.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.8" href="/docs/handbook/release-notes/typescript-3-8.html">3.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='disableSourceOfProjectReferenceRedirect-config'><a aria-label="Link to the compiler option: disableSourceOfProjectReferenceRedirect" id='disableSourceOfProjectReferenceRedirect' href='#disableSourceOfProjectReferenceRedirect' name='disableSourceOfProjectReferenceRedirect' aria-labelledby="disableSourceOfProjectReferenceRedirect-config">#</a> Disable Source Project Reference Redirect - <code>disableSourceOfProjectReferenceRedirect</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When working with <a href="/docs/handbook/project-references.html">composite TypeScript projects</a>, this option provides a way to go <a href="/docs/handbook/release-notes/typescript-3-7.html#build-free-editing-with-project-references">back to the pre-3.7</a> behavior where d.ts files were used to as the boundaries between modules. In 3.7 the source of truth is now your TypeScript files.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.7" href="/docs/handbook/release-notes/typescript-3-7.html">3.7</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='incremental-config'><a aria-label="Link to the compiler option: incremental" id='incremental' href='#incremental' name='incremental' aria-labelledby="incremental-config">#</a> Incremental - <code>incremental</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Tells TypeScript to save information about the project graph from the last compilation to files stored on disk. This creates a series of <code>.tsbuildinfo</code> files in the same folder as your compilation output. They are not used by your JavaScript at runtime and can be safely deleted. You can read more about the flag in the <a href="/docs/handbook/release-notes/typescript-3-4.html#faster-subsequent-builds-with-the---incremental-flag">3.4 release notes</a>.</p> <p>To control which folders you want to the files to be built to, use the config option <a href="#tsBuildInfoFile"><code>tsBuildInfoFile</code></a>.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code> if <a href="#composite"><code>composite</code></a>; <code>false</code> otherwise.</p> </li> <li><span>Related:</span><ul><li><p><a href='#composite' aria-label="Jump to compiler option info for composite" ><code>composite</code></a></p> </li><li><p><a href='#tsBuildInfoFile' aria-label="Jump to compiler option info for tsBuildInfoFile" ><code>tsBuildInfoFile</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.4" href="/docs/handbook/release-notes/typescript-3-4.html">3.4</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='tsBuildInfoFile-config'><a aria-label="Link to the compiler option: tsBuildInfoFile" id='tsBuildInfoFile' href='#tsBuildInfoFile' name='tsBuildInfoFile' aria-labelledby="tsBuildInfoFile-config">#</a> TS Build Info File - <code>tsBuildInfoFile</code></h3> <div class='compiler-content'> <div class='markdown'> <p>This setting lets you specify a file for storing incremental compilation information as a part of composite projects which enables faster building of larger TypeScript codebases. You can read more about composite projects <a href="/docs/handbook/project-references.html">in the handbook</a>.</p> <p>The default depends on a combination of other settings:</p> <ul> <li>If <code>outFile</code> is set, the default is <code><outFile>.tsbuildinfo</code>.</li> <li>If <code>rootDir</code> and <code>outDir</code> are set, then the file is <code><outDir>/<relative path to config from rootDir>/<config name>.tsbuildinfo</code> For example, if <code>rootDir</code> is <code>src</code>, <code>outDir</code> is <code>dest</code>, and the config is <code>./tsconfig.json</code>, then the default is <code>./tsconfig.tsbuildinfo</code> as the relative path from <code>src/</code> to <code>./tsconfig.json</code> is <code>../</code>.</li> <li>If <code>outDir</code> is set, then the default is <code><outDir>/<config name>.tsbuildInfo</code></li> <li>Otherwise, the default is <code><config name>.tsbuildInfo</code></li> </ul> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>.tsbuildinfo</code></p> </li> <li><span>Related:</span><ul><li><p><a href='#incremental' aria-label="Jump to compiler option info for incremental" ><code>incremental</code></a></p> </li><li><p><a href='#composite' aria-label="Jump to compiler option info for composite" ><code>composite</code></a></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.4" href="/docs/handbook/release-notes/typescript-3-4.html">3.4</a></p> </li></ul> </div></section> <div class='category'> <h2 id='Output_Formatting_6256' ><a href='#Output_Formatting_6256' name='Output_Formatting_6256' aria-label="Link to the section Output Formatting" aria-labelledby='Output_Formatting_6256'>#</a>Output Formatting</h2> </div> <section class='compiler-option'> <h3 id='noErrorTruncation-config'><a aria-label="Link to the compiler option: noErrorTruncation" id='noErrorTruncation' href='#noErrorTruncation' name='noErrorTruncation' aria-labelledby="noErrorTruncation-config">#</a> No Error Truncation - <code>noErrorTruncation</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Do not truncate error messages.</p> <p>With <code>false</code>, the default.</p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var x: { propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' >x</data-lsp></span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName1: string' >propertyWithAnExceedinglyLongName1</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName2: string' >propertyWithAnExceedinglyLongName2</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName3: string' >propertyWithAnExceedinglyLongName3</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName4: string' >propertyWithAnExceedinglyLongName4</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName5: string' >propertyWithAnExceedinglyLongName5</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName6: string' >propertyWithAnExceedinglyLongName6</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName7: string' >propertyWithAnExceedinglyLongName7</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName8: string' >propertyWithAnExceedinglyLongName8</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// String representation of type of 'x' should be truncated in error message</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080"><data-err><data-lsp lsp='var s: string' >s</data-lsp></data-err></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000"> = </span><span style="color: #001080"><data-err><data-lsp lsp='var x: { propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' >x</data-lsp></data-err></span><span style="color: #000000">;</span></div><span class="error"><span>Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propert...' is not assignable to type 'string'.</br>Variable 'x' is used before being assigned.</span><span class="code">2322<br/>2454</span></span><span class="error-behind">Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propert...' is not assignable to type 'string'.</br>Variable 'x' is used before being assigned.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGY1vQFgKy4BQAbgIbSgAeqA3kaKAA7xMwAuAngOoCW7ACwCCAOwCiVAMaRIAE14iA5gBtOAGThKAcmQC2kAIypE7aAsUBuBs1Yce-YeKkz5S1Ru17IaY6fNXGFjg2aC4+QVEJaTlzd01FHX0MXzMlAJtgu3DHKJdY9XjEyFwU-2sgkLCHSOcYtwLPfXxStPLbUPsIp2jXFQaErwA2Fss2zI7smp78jwH9AHYR9Iqs6u68+tmigA4logBfKyIQUABlPyVQaEgWSERIEXYydl5NUDgAM1AuNnevgHIqP9QIgBHAAK7KWSgABGkG+0HBIkkzzkoAUoBg8Eo+kQiDIikgpAoIJGoAAvNQLEA'>Try</a></div></pre> <p>With <code>true</code></p> <pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var x: { propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' >x</data-lsp></span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName1: string' >propertyWithAnExceedinglyLongName1</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName2: string' >propertyWithAnExceedinglyLongName2</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName3: string' >propertyWithAnExceedinglyLongName3</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName4: string' >propertyWithAnExceedinglyLongName4</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName5: string' >propertyWithAnExceedinglyLongName5</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName6: string' >propertyWithAnExceedinglyLongName6</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName7: string' >propertyWithAnExceedinglyLongName7</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) propertyWithAnExceedinglyLongName8: string' >propertyWithAnExceedinglyLongName8</data-lsp></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000">;</span></div><div class='line'><span style="color: #000000">};</span></div><div class='line'> </div><div class='line'><span style="color: #008000">// String representation of type of 'x' should be truncated in error message</span></div><div class='line'><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080"><data-err><data-lsp lsp='var s: string' >s</data-lsp></data-err></span><span style="color: #000000">: </span><span style="color: #1C6277">string</span><span style="color: #000000"> = </span><span style="color: #001080"><data-err><data-lsp lsp='var x: { propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' >x</data-lsp></data-err></span><span style="color: #000000">;</span></div><span class="error"><span>Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' is not assignable to type 'string'.</br>Variable 'x' is used before being assigned.</span><span class="code">2322<br/>2454</span></span><span class="error-behind">Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' is not assignable to type 'string'.</br>Variable 'x' is used before being assigned.</span></code><a class='playground-link' href='https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGY1vQFgKy4BQIEAdnAKKwIAq0ArmQMYCGALgJZxmruOQiAN1bRQAD1QBvIqFAAHePJjsAngHVO7ABYBBMpXHNIkACacyAcwA2qgDI9LAOVYBbSAEZUifhcsBuWQUlFQ0tPQMjE3MrWwcrF3c0b18rQLlFOGVoNU0dfUNjMz84x0TIDBToP3TgrNC8iMLokvsyt0hcKpqgzOzc8IKo4ti2hI78brTekJyw-MiimJsx5w6ANimAmfq5xqGl1vi19wB2Ldq+hsHFltHj8oAOC6IAX0CSMABlVMtQaEgikgiEgZHYHG4ZFAcAAZqA1MpoXCAOTiZGgRDaOAMaymUAAI0g8MYLA4ZlAFlAMHgYnciEQrEsghEYhQGN+oAAvBJ-EA'>Try</a></div></pre> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='preserveWatchOutput-config'><a aria-label="Link to the compiler option: preserveWatchOutput" id='preserveWatchOutput' href='#preserveWatchOutput' name='preserveWatchOutput' aria-labelledby="preserveWatchOutput-config">#</a> Preserve Watch Output - <code>preserveWatchOutput</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Whether to keep outdated console output in watch mode instead of clearing the screen every time a change happened.</p> </div> <ul class='compiler-option-md'><li><span>Internal</span> </li></ul> </div></section> <section class='compiler-option'> <h3 id='pretty-config'><a aria-label="Link to the compiler option: pretty" id='pretty' href='#pretty' name='pretty' aria-labelledby="pretty-config">#</a> Pretty - <code>pretty</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Stylize errors and messages using color and context, this is on by default — offers you a chance to have less terse, single colored messages from the compiler.</p> </div> <ul class='compiler-option-md'><li><span>Default:</span><p><code>true</code></p> </li></ul> </div></section> <div class='category'> <h2 id='Completeness_6257' ><a href='#Completeness_6257' name='Completeness_6257' aria-label="Link to the section Completeness" aria-labelledby='Completeness_6257'>#</a>Completeness</h2> </div> <section class='compiler-option'> <h3 id='skipDefaultLibCheck-config'><a aria-label="Link to the compiler option: skipDefaultLibCheck" id='skipDefaultLibCheck' href='#skipDefaultLibCheck' name='skipDefaultLibCheck' aria-labelledby="skipDefaultLibCheck-config">#</a> Skip Default Lib Check - <code>skipDefaultLibCheck</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Use <a href="#skipLibCheck"><code>skipLibCheck</code></a> instead. Skip type checking of default library declaration files.</p> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='skipLibCheck-config'><a aria-label="Link to the compiler option: skipLibCheck" id='skipLibCheck' href='#skipLibCheck' name='skipLibCheck' aria-labelledby="skipLibCheck-config">#</a> Skip Lib Check - <code>skipLibCheck</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Skip type checking of declaration files.</p> <p>This can save time during compilation at the expense of type-system accuracy. For example, two libraries could define two copies of the same <code>type</code> in an inconsistent way. Rather than doing a full check of all <code>d.ts</code> files, TypeScript will type check the code you specifically refer to in your app’s source code.</p> <p>A common case where you might think to use <code>skipLibCheck</code> is when there are two copies of a library’s types in your <code>node_modules</code>. In these cases, you should consider using a feature like <a href="https://yarnpkg.com/lang/en/docs/selective-version-resolutions/">yarn’s resolutions</a> to ensure there is only one copy of that dependency in your tree or investigate how to ensure there is only one copy by understanding the dependency resolution to fix the issue without additional tooling.</p> <p>Another possibility is when you are migrating between TypeScript releases and the changes cause breakages in node_modules and the JS standard libraries which you do not want to deal with during the TypeScript update.</p> <p>Note, that if these issues come from the TypeScript standard library you can replace the library using <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#supporting-lib-from-node_modules">TypeScript 4.5’s lib replacement</a> technique.</p> </div> <ul class='compiler-option-md'><li><span>Recommended</span> </li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 2.0" href="/docs/handbook/release-notes/typescript-2-0.html">2.0</a></p> </li></ul> </div></section> <div class='category'> <h2 id='Command_line_Options_6171' ><a href='#Command_line_Options_6171' name='Command_line_Options_6171' aria-label="Link to the section Command Line" aria-labelledby='Command_line_Options_6171'>#</a>Command Line</h2> </div> <div class='category'> <h2 id='Watch_and_Build_Modes_6250' ><a href='#Watch_and_Build_Modes_6250' name='Watch_and_Build_Modes_6250' aria-label="Link to the section Watch Options" aria-labelledby='Watch_and_Build_Modes_6250'>#</a>Watch Options</h2> <p>TypeScript 3.8 shipped a new strategy for watching directories, which is crucial for efficiently picking up changes to <code>node_modules</code>.</p> <p>On operating systems like Linux, TypeScript installs directory watchers (as opposed to file watchers) on <code>node_modules</code> and many of its subdirectories to detect changes in dependencies. This is because the number of available file watchers is often eclipsed by the number of files in <code>node_modules</code>, whereas there are way fewer directories to track.</p> <p>Because every project might work better under different strategies, and this new approach might not work well for your workflows, TypeScript 3.8 introduces a new <code>watchOptions</code> field which allows users to tell the compiler/language service which watching strategies should be used to keep track of files and directories.</p> </div> <section class='compiler-option'> <h3 id='assumeChangesOnlyAffectDirectDependencies-config'><a aria-label="Link to the compiler option: assumeChangesOnlyAffectDirectDependencies" id='assumeChangesOnlyAffectDirectDependencies' href='#assumeChangesOnlyAffectDirectDependencies' name='assumeChangesOnlyAffectDirectDependencies' aria-labelledby="assumeChangesOnlyAffectDirectDependencies-config">#</a> Assume Changes Only Affect Direct Dependencies - <code>assumeChangesOnlyAffectDirectDependencies</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When this option is enabled, TypeScript will avoid rechecking/rebuilding all truly possibly-affected files, and only recheck/rebuild files that have changed as well as files that directly import them.</p> <p>This can be considered a ‘fast & loose’ implementation of the watching algorithm, which can drastically reduce incremental rebuild times at the expense of having to run the full build occasionally to get all compiler error messages.</p> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.8" href="/docs/handbook/release-notes/typescript-3-8.html">3.8</a></p> </li></ul> </div></section> </div> </article></div> <div class="tsconfig raised main-content-block markdown"><article id='watchOptions'> <h2 id="watch-options" style="position:relative;"><a href="#watch-options" aria-label="watch options permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Watch Options</h2> <p>You can configure the how TypeScript <code>--watch</code> works. This section is mainly for handling case where <code>fs.watch</code> and <code>fs.watchFile</code> have additional constraints like on Linux. You can read more at <a href="/docs/handbook/configuring-watch.html">Configuring Watch</a>.</p> <div> <section class='compiler-option'> <h3 id='watch-watchFile-config'><a aria-label="Link to the compiler option: watchFile" id='watch-watchFile' href='#watch-watchFile' name='watch-watchFile' aria-labelledby="watch-watchFile-config">#</a> Watch File - <code>watchFile</code></h3> <div class='compiler-content'> <div class='markdown'> <p>The strategy for how individual files are watched.</p> <ul> <li><code>fixedPollingInterval</code>: Check every file for changes several times a second at a fixed interval.</li> <li><code>priorityPollingInterval</code>: Check every file for changes several times a second, but use heuristics to check certain types of files less frequently than others.</li> <li><code>dynamicPriorityPolling</code>: Use a dynamic queue where less-frequently modified files will be checked less often.</li> <li><code>useFsEvents</code> (the default): Attempt to use the operating system/file system’s native events for file changes.</li> <li><code>useFsEventsOnParentDirectory</code>: Attempt to use the operating system/file system’s native events to listen for changes on a file’s parent directory</li> </ul> </div> <ul class='compiler-option-md'><li><span>Allowed:</span><ul><li><p><code>fixedpollinginterval</code></p> </li><li><p><code>prioritypollinginterval</code></p> </li><li><p><code>dynamicprioritypolling</code></p> </li><li><p><code>fixedchunksizepolling</code></p> </li><li><p><code>usefsevents</code></p> </li><li><p><code>usefseventsonparentdirectory</code></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.8" href="/docs/handbook/release-notes/typescript-3-8.html">3.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='watch-watchDirectory-config'><a aria-label="Link to the compiler option: watchDirectory" id='watch-watchDirectory' href='#watch-watchDirectory' name='watch-watchDirectory' aria-labelledby="watch-watchDirectory-config">#</a> Watch Directory - <code>watchDirectory</code></h3> <div class='compiler-content'> <div class='markdown'> <p>The strategy for how entire directory trees are watched under systems that lack recursive file-watching functionality.</p> <ul> <li><code>fixedPollingInterval</code>: Check every directory for changes several times a second at a fixed interval.</li> <li><code>dynamicPriorityPolling</code>: Use a dynamic queue where less-frequently modified directories will be checked less often.</li> <li><code>useFsEvents</code> (the default): Attempt to use the operating system/file system’s native events for directory changes.</li> </ul> </div> <ul class='compiler-option-md'><li><span>Allowed:</span><ul><li><p><code>usefsevents</code></p> </li><li><p><code>fixedpollinginterval</code></p> </li><li><p><code>dynamicprioritypolling</code></p> </li><li><p><code>fixedchunksizepolling</code></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.8" href="/docs/handbook/release-notes/typescript-3-8.html">3.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='watch-fallbackPolling-config'><a aria-label="Link to the compiler option: fallbackPolling" id='watch-fallbackPolling' href='#watch-fallbackPolling' name='watch-fallbackPolling' aria-labelledby="watch-fallbackPolling-config">#</a> Fallback Polling - <code>fallbackPolling</code></h3> <div class='compiler-content'> <div class='markdown'> <p>When using file system events, this option specifies the polling strategy that gets used when the system runs out of native file watchers and/or doesn’t support native file watchers.</p> <ul> <li><code>fixedPollingInterval</code>: Check every file for changes several times a second at a fixed interval.</li> <li><code>priorityPollingInterval</code>: Check every file for changes several times a second, but use heuristics to check certain types of files less frequently than others.</li> <li><code>dynamicPriorityPolling</code>: Use a dynamic queue where less-frequently modified files will be checked less often.</li> <li><code>synchronousWatchDirectory</code>: Disable deferred watching on directories. Deferred watching is useful when lots of file changes might occur at once (e.g. a change in <code>node_modules</code> from running <code>npm install</code>), but you might want to disable it with this flag for some less-common setups.</li> </ul> </div> <ul class='compiler-option-md'><li><span>Allowed:</span><ul><li><p><code>fixedinterval</code></p> </li><li><p><code>priorityinterval</code></p> </li><li><p><code>dynamicpriority</code></p> </li><li><p><code>fixedchunksize</code></p> </li></ul></li> <li><span>Released:</span><p><a aria-label="Release notes for TypeScript 3.8" href="/docs/handbook/release-notes/typescript-3-8.html">3.8</a></p> </li></ul> </div></section> <section class='compiler-option'> <h3 id='watch-synchronousWatchDirectory-config'><a aria-label="Link to the compiler option: synchronousWatchDirectory" id='watch-synchronousWatchDirectory' href='#watch-synchronousWatchDirectory' name='watch-synchronousWatchDirectory' aria-labelledby="watch-synchronousWatchDirectory-config">#</a> Synchronous Watch Directory - <code>synchronousWatchDirectory</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Synchronously call callbacks and update the state of directory watchers on platforms that don`t support recursive watching natively. Instead of giving a small timeout to allow for potentially multiple edits to occur on a file.</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"watchOptions"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#synchronousWatchDirectory'><data-lsp lsp="Synchronously call callbacks and update the state of directory watchers on platforms that don`t support recursive watching natively.">synchronousWatchDirectory</data-lsp></a>"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='watch-excludeDirectories-config'><a aria-label="Link to the compiler option: excludeDirectories" id='watch-excludeDirectories' href='#watch-excludeDirectories' name='watch-excludeDirectories' aria-labelledby="watch-excludeDirectories-config">#</a> Exclude Directories - <code>excludeDirectories</code></h3> <div class='compiler-content'> <div class='markdown'> <p>You can use <a href="#excludeFiles"><code>excludeFiles</code></a> to drastically reduce the number of files which are watched during <code>--watch</code>. This can be a useful way to reduce the number of open file which TypeScript tracks on Linux.</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"watchOptions"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#excludeDirectories'><data-lsp lsp="Remove a list of directories from the watch process.">excludeDirectories</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"**/node_modules"</span><span style="color: #000000">, </span><span style="color: #A31515">"_build"</span><span style="color: #000000">, </span><span style="color: #A31515">"temp/*"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='watch-excludeFiles-config'><a aria-label="Link to the compiler option: excludeFiles" id='watch-excludeFiles' href='#watch-excludeFiles' name='watch-excludeFiles' aria-labelledby="watch-excludeFiles-config">#</a> Exclude Files - <code>excludeFiles</code></h3> <div class='compiler-content'> <div class='markdown'> <p>You can use <code>excludeFiles</code> to remove a set of specific files from the files which are watched.</p> <pre class="shiki light-plus tsconfig lsp" style="background-color: #FFFFFF; color: #000000" tsconfig="true"><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"watchOptions"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"<a aria-hidden=true tabindex="-1" href='https://www.typescriptlang.org/tsconfig#excludeFiles'><data-lsp lsp="Remove a list of files from the watch mode's processing.">excludeFiles</data-lsp></a>"</span><span style="color: #000000">: [</span><span style="color: #A31515">"temp/file.ts"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> <ul class='compiler-option-md'></ul> </div></section> </div> </article></div> <div class="tsconfig raised main-content-block markdown"><article id='typeAcquisition'> <h2 id="type-acquisition" style="position:relative;"><a href="#type-acquisition" aria-label="type acquisition permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Type Acquisition</h2> <p>Type Acquisition is only important for JavaScript projects. In TypeScript projects you need to include the types in your projects explicitly. However, for JavaScript projects, the TypeScript tooling will download types for your modules in the background and outside of your node_modules folder.</p> <div> <section class='compiler-option'> <h3 id='type-enable-config'><a aria-label="Link to the compiler option: enable" id='type-enable' href='#type-enable' name='type-enable' aria-labelledby="type-enable-config">#</a> Enable - <code>enable</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Disables automatic type acquisition in JavaScript projects:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">json</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"typeAcquisition"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"enable"</span><span style="color: #000000">: </span><span style="color: #0000FF">false</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> <ul class='compiler-option-md'></ul> </div></section> <section class='compiler-option'> <h3 id='type-include-config'><a aria-label="Link to the compiler option: include" id='type-include' href='#type-include' name='type-include' aria-labelledby="type-include-config">#</a> Include - <code>include</code></h3> <div class='compiler-content'> <div class='markdown'> <p>If you have a JavaScript project where TypeScript needs additional guidance to understand global dependencies, or have disabled the built-in inference via <a href="#disableFilenameBasedTypeAcquisition"><code>disableFilenameBasedTypeAcquisition</code></a>.</p> <p>You can use <code>include</code> to specify which types should be used from DefinitelyTyped:</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">json</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"typeAcquisition"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"include"</span><span style="color: #000000">: [</span><span style="color: #A31515">"jquery"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> </div></section> <section class='compiler-option'> <h3 id='type-exclude-config'><a aria-label="Link to the compiler option: exclude" id='type-exclude' href='#type-exclude' name='type-exclude' aria-labelledby="type-exclude-config">#</a> Exclude - <code>exclude</code></h3> <div class='compiler-content'> <div class='markdown'> <p>Offers a config for disabling the type-acquisition for a certain module in JavaScript projects. This can be useful for projects which include other libraries in testing infrastructure which aren’t needed in the main application.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">json</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"typeAcquisition"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"exclude"</span><span style="color: #000000">: [</span><span style="color: #A31515">"jest"</span><span style="color: #000000">, </span><span style="color: #A31515">"mocha"</span><span style="color: #000000">]</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> </div></section> <section class='compiler-option'> <h3 id='type-disableFilenameBasedTypeAcquisition-config'><a aria-label="Link to the compiler option: disableFilenameBasedTypeAcquisition" id='type-disableFilenameBasedTypeAcquisition' href='#type-disableFilenameBasedTypeAcquisition' name='type-disableFilenameBasedTypeAcquisition' aria-labelledby="type-disableFilenameBasedTypeAcquisition-config">#</a> Disable Filename Based Type Acquisition - <code>disableFilenameBasedTypeAcquisition</code></h3> <div class='compiler-content'> <div class='markdown'> <p>TypeScript’s type acquisition can infer what types should be added based on filenames in a project. This means that having a file like <code>jquery.js</code> in your project would automatically download the types for JQuery from DefinitelyTyped.</p> <p>You can disable this via <code>disableFilenameBasedTypeAcquisition</code>.</p> <pre class="shiki light-plus" style="background-color: #FFFFFF; color: #000000"><div class="language-id">json</div><div class='code-container' tabindex='0'><code><div class='line'><span style="color: #000000">{</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"typeAcquisition"</span><span style="color: #000000">: {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #0451A5">"disableFilenameBasedTypeAcquisition"</span><span style="color: #000000">: </span><span style="color: #0000FF">true</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre> </div> <ul class='compiler-option-md'><li><span>Released:</span><p><a aria-label="Release notes for TypeScript 4.1" href="/docs/handbook/release-notes/typescript-4-1.html">4.1</a></p> </li></ul> </div></section> </div> </article></div></div></main><footer id="site-footer" role="contentinfo"><section id="customize"><article><h3>Customize</h3><label><p>Site Colours<!-- -->:</p><div class="switch-wrap"><select name="colours"><option value="system" selected="">System</option><option value="force-light">Always Light</option><option value="force-dark">Always Dark</option></select></div></label><label><p>Code Font<!-- -->:</p><div class="switch-wrap"><select name="font"><option value="cascadia" selected="">Cascadia</option><option value="cascadia-ligatures">Cascadia (ligatures)</option><option value="consolas">Consolas</option><option value="dank-mono">Dank Mono</option><option value="fira-code">Fira Code</option><option value="jetbrains-mono">JetBrains Mono</option><option value="open-dyslexic">OpenDyslexic</option><option value="sf-mono">SF Mono</option><option value="source-code-pro">Source Code Pro</option></select></div></label></article></section><section id="popular"><h3>Popular Documentation Pages</h3><ul><li><a href="/docs/handbook/2/everyday-types.html">Everyday Types</a><p>All of the common types in TypeScript</p></li><li><a href="/docs/handbook/2/types-from-types.html">Creating Types from Types</a><p>Techniques to make more elegant types</p></li><li><a href="/docs/handbook/2/functions.html">More on Functions</a><p>How to provide types to functions in JavaScript</p></li><li><a href="/docs/handbook/2/objects.html">More on Objects</a><p>How to provide a type shape to JavaScript objects</p></li><li><a href="/docs/handbook/2/narrowing.html">Narrowing</a><p>How TypeScript infers types based on runtime behavior</p></li><li><a href="/docs/handbook/variable-declarations.html">Variable Declarations</a><p>How to create and type JavaScript variables</p></li><li><a href="/docs/handbook/typescript-in-5-minutes.html">TypeScript in 5 minutes</a><p>An overview of building a TypeScript web app</p></li><li><a aria-current="page" class="" href="/tsconfig/">TSConfig Options</a><p>All the configuration options for a project</p></li><li><a href="/docs/handbook/2/classes.html">Classes</a><p>How to provide types to JavaScript ES6 classes</p></li></ul></section><section id="community"><article id="logos"><svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.975 0h24.05c.5385 0 .975.436522.975.975v24.05c0 .5385-.4365.975-.975.975h-24.05c-.538478 0-.975-.4365-.975-.975v-24.05c0-.538478.436522-.975.975-.975zm13.4782 13.8324v-2.1324h-9.2532v2.1324h3.30357v9.4946h2.62983v-9.4946zm1.0485 9.2439c.4241.2162.9257.3784 1.5048.4865.579.1081 1.1893.1622 1.8309.1622.6253 0 1.2193-.0595 1.782-.1784.5628-.1189 1.0562-.3149 1.4803-.5879s.7598-.6297 1.0072-1.0703.3711-.9852.3711-1.6339c0-.4703-.0707-.8824-.212-1.2365-.1414-.3541-.3453-.669-.6117-.9447s-.5859-.523-.9583-.7419c-.3725-.2189-.7925-.4257-1.2601-.6203-.3425-.1406-.6497-.2771-.9216-.4095-.2718-.1324-.5029-.2676-.6932-.4054-.1903-.1379-.3371-.2838-.4404-.4379-.1033-.154-.155-.3284-.155-.523 0-.1784.0463-.3392.1387-.4824.0924-.1433.2229-.2663.3915-.369.1685-.1027.3751-.1824.6198-.2392.2447-.0567.5165-.0851.8156-.0851.2174 0 .4472.0162.6891.0486.242.0325.4853.0825.7299.15.2447.0676.4826.1527.7137.2555.2311.1027.4445.2216.6402.3567v-2.4244c-.3969-.1514-.8305-.2636-1.3008-.3365-.4704-.073-1.01-.1095-1.6189-.1095-.6199 0-1.2071.0662-1.7617.1987-.5546.1324-1.0425.3392-1.4639.6203s-.7544.6392-.9991 1.0743c-.2447.4352-.367.9555-.367 1.5609 0 .7731.2243 1.4326.6729 1.9785.4485.546 1.1295 1.0082 2.043 1.3866.3588.146.6932.2892 1.0031.4298.3099.1405.5777.2865.8033.4378.2257.1514.4037.3162.5342.4946s.1958.3811.1958.6082c0 .1676-.0408.323-.1224.4662-.0815.1433-.2052.2676-.371.373-.1659.1054-.3725.1879-.6199.2473-.2474.0595-.5369.0892-.8686.0892-.5654 0-1.1254-.0986-1.68-.2959s-1.0684-.4933-1.5415-.8879z" fill="#fff" fill-rule="evenodd"></path></svg><svg class="typescript-long" fill="none" height="25" viewBox="0 0 105 25" width="105" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m52.8777 17.6304v-1.4159c1.2926.8186 2.6019 1.228 3.9281 1.228 1.41 0 2.4802-.2903 3.2104-.8709s1.0953-1.393 1.0953-2.4372c0-.9189-.2455-1.6519-.7365-2.1991-.4735-.5276-1.4796-1.2397-3.0184-2.13631l-.1732-.10038c-1.8297-1.06092-2.988-1.94849-3.4748-2.66273-.4868-.71425-.7302-1.53916-.7302-2.47478 0-1.26976.4952-2.34737 1.4856-3.23287.9904-.88549 2.3124-1.32823 3.9659-1.32823 1.0743 0 2.1486.179602 3.223.538812v1.303168c-1.0576-.47616-2.1865-.71423-3.3867-.71423-1.2254 0-2.197.30908-2.9146.92725-.7176.61818-1.0764 1.40341-1.0764 2.35574 0 .9189.2455 1.64984.7365 2.19283.491.543 1.5506 1.28229 3.1789 2.2179 1.6871.95233 2.8097 1.79813 3.3678 2.53743.5582.7393.8373 1.5893.8373 2.55 0 1.3783-.4805 2.5019-1.4416 3.3707-.961.8687-2.3186 1.3031-4.0728 1.3031-.6211 0-1.3366-.096-2.1466-.2882-.8099-.1921-1.4289-.4135-1.857-.6641zm-44.74534-14.7957h5.16264v-2.532528h-13.295v2.532528h5.15008v15.4459h2.98228zm9.92154 17.5014 5.8166-14.89726h-2.9461l-3.223 9.35466c-.0764.2868-.1363.5202-.1798.7005l-.0468.2024h-.0629c-.0672-.2867-.1206-.5105-.1604-.6715l-.0663-.2565-3.0719-9.32956h-3.2356l5.1241 12.81566-.8687 2.1067c-.5372 1.07-1.3513 1.6051-2.4425 1.6051-.3777 0-.7973-.0753-1.259-.2258v2.4202c.4113.1087.9233.163 1.536.163 2.1823 0 3.8777-1.3292 5.0863-3.9876zm10.5978-3.9583h-.0503v7.7948h-2.918v-18.73516h2.918v2.25574h.0503c.9978-1.70435 2.4567-2.55651 4.3769-2.55651 1.635 0 2.9095.57229 3.8235 1.71687.9139 1.14459 1.3709 2.68182 1.3709 4.61176 0 2.1388-.5157 3.8515-1.547 5.1381s-2.44 1.9299-4.226 1.9299c-1.6434 0-2.9095-.7185-3.7983-2.1555zm-.0978-3.4018v-1.583c0-1.0968.3163-2.0109.9488-2.74216.6325-.73125 1.4681-1.09688 2.5069-1.09688.9802 0 1.7572.35524 2.331 1.06572.5739.71049.8608 1.69312.8608 2.94792 0 1.4957-.3078 2.6611-.9236 3.4963-.6157.8351-1.4639 1.2527-2.5446 1.2527-.9215 0-1.6818-.3241-2.2808-.9723-.599-.6481-.8985-1.4376-.8985-2.3683zm22.813-.3261h-8.703c.0332 1.1874.3969 2.103 1.091 2.7469s1.6479.9658 2.8615.9658c1.3632 0 2.6142-.4097 3.753-1.2292v2.3455c-1.1637.7359-2.7015 1.1038-4.6133 1.1038-1.8786 0-3.352-.5832-4.4201-1.7497s-1.6022-2.8075-1.6022-4.9231c0-1.99856.5881-3.62703 1.7643-4.88552 1.1762-1.25848 2.6371-1.88771 4.3827-1.88771s3.0963.56443 4.0522 1.6933 1.4339 2.69672 1.4339 4.70363zm-3.4528-4.52311c.4806.58334.7251 1.39958.7334 2.44871h-5.8921c.1326-.99038.4869-1.79193 1.0628-2.40464.576-.61272 1.2783-.91907 2.107-.91907.8453 0 1.5082.29166 1.9889.875zm21.8704 10.45591c1.3315 0 2.4776-.2921 3.4383-.8764v-1.2018c-.9607.6844-2.0899 1.0266-3.3878 1.0266-1.4157 0-2.5555-.505-3.4193-1.5149s-1.2957-2.3453-1.2957-4.0063c0-1.7193.4719-3.11943 1.4158-4.2003.9438-1.08086 2.1742-1.62128 3.6911-1.62128 1.104 0 2.1195.28377 3.0465.85133v-1.30204c-.927-.40063-1.8835-.60094-2.8695-.60094-1.9046 0-3.4636.64893-4.6771 1.9468-1.2136 1.29787-1.8203 2.96503-1.8203 5.00153 0 1.9364.5393 3.5034 1.618 4.7012 1.0787 1.1977 2.4987 1.7965 4.26 1.7965zm11.0428-11.9856c-.3837-.27698-.8341-.41547-1.3512-.41547-1.0093 0-1.8559.52458-2.5399 1.57375-.684 1.04916-1.026 2.53892-1.026 4.46942v6.0558h-1.126v-12.89213h1.126v2.85791h.0501c.2919-.98202.7548-1.7458 1.3888-2.29136.6339-.54557 1.3679-.81835 2.202-.81835.4755 0 .9009.07554 1.2762.22662zm1.8042-4.61517c.1955.18952.4208.28427.6759.28427.2721 0 .5059-.09906.7014-.29719.1956-.19812.2934-.43501.2934-.71067 0-.292879-.0999-.525459-.2997-.697743s-.4315-.258425-.6951-.258425c-.2466 0-.4698.088294-.6696.264885-.1998.176592-.2997.407018-.2997.691283 0 .29289.0978.53408.2934.72359zm.0088 16.29867v-12.84176h1.2086v12.84176zm5.0798-2.2859h.0501c.9181 1.7283 2.337 2.5924 4.2566 2.5924 1.7194 0 3.1028-.6617 4.1502-1.985 1.0475-1.3234 1.5712-3.0579 1.5712-5.2036 0-1.92865-.4569-3.45443-1.3709-4.5774-.9139-1.12296-2.1846-1.68443-3.8121-1.68443-1.0266 0-1.9677.25673-2.8232.77021-.8555.51347-1.5127 1.24192-1.9718 2.18538h-.0501v-2.6425h-1.1517v18.72284h1.1517zm.0569-4.7728v1.6133c0 1.284.4088 2.3867 1.2264 3.308s1.8923 1.382 3.2241 1.382c1.3233 0 2.398-.5607 3.2241-1.6822.826-1.1214 1.239-2.5951 1.239-4.421 0-1.60088-.3793-2.87236-1.1379-3.81453-.7586-.94216-1.7701-1.41324-3.0344-1.41324-1.5088 0-2.6762.50026-3.5023 1.50079-.826 1.00053-1.239 2.17613-1.239 3.52688zm15.542 7.3608c.523 0 1.083-.1417 1.681-.4252v-1.0754c-.548.3084-1.058.4627-1.532.4627-.664 0-1.135-.198-1.413-.594s-.417-1.0359-.417-1.9196v-8.45368h3.362v-1.05046h-3.362v-3.71411c-.183.06669-.373.12922-.573.18758-.199.06669-.39.13339-.572.20009v3.32644h-2.2916v1.05046h2.2916v8.60378c0 2.2676.942 3.4014 2.826 3.4014z" fill="#fff" fill-rule="evenodd"></path></svg><p>Made with ♥ in Redmond, Boston, SF & Dublin</p><a href=""><img id="microsoft-logo" width="92" height="19" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAAAmCAYAAAB3X1H0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAApYSURBVHgB7VwJsBXFFb1PFCSIBHGJRg0hkagJoayoX4KGUEncIJRJKospU4SkTEXLfS+13MpCccMFRcUCF9xwKUXFHdFyQ6RcUBE3QPTrB76CiAIC4zl2j++++2d7/81Xa/6cqvPndU9335meO9237+35EuSHqQLgeFCQH34rJUo0gA2kRIkCo1TwEoVGqeAlCo1SwUsUGhtKiRLfccDZsCkOfwC3A7uCi8FHK5XKorS6pYLnADyArXHYCXwenf6JlMgF6Ffq57HgKWBPc/oI8LK0Ngqj4OgMvtk3gX3Mqc/BYVC8QOoA2vspDrdEnJqMti5W5f6NwwRxfbkE6X1w/gUpkQeowP+XBlCkEbwbOATcPOLcn8A7pT4cCf4qIn9G+APKvBEOp0u1H7cAzwL/KCUaAvp2EA7/NdnN4OviBrH1EXU2w+Dykc7rLCbKoVKHgnubb/8MRbt4amwsJfLAIeBGKj0FPBoK3Izn00PcgMZnxUHlQHHPqy+4o26ksyh4Ezpie3TOuxnL7wP+OK0Q2luFds/BzzHibMT54JlSIg/8zqTHULn5A8eVOKxE33MknwNu5cussI0U2U2oF3ubgP/IUgmdVhE3elR81oqk8ujs8TgMFvdSNCH9pJTIA1ub9OvSDhRZwZeBLSrNPTK9MtTbFfyNSr+WVgFKPQd8CFwiJfJCxaTXSjtQZBOFXpOHwH/59ABwL/DelHqHS9WuXg6+AjbFCgmCbcTNECHe91NoXHn2+a/FvUhbeFmLvZxHUHetKkszSduhC3B+DfK74/cI8Ac+7+4IORt4GbuJW3hTLmc1joT0IX8mKfCzGRfanKE4ojK9FHwRnI421qXU39HXZR/RZma/LAQfjhoMIu5Xoz/OrzF5vUz5LijTXzcpQX74VncTomxPcImquxAcYtp7IKWNbcEPVfk7wFNMGxeYOreb83+JabsXOApsCeJB2YNVnafVubXgIPYJuExXMnI2Af8Hzk+Q8wl4deAWaHF9sRP4bEIbc8EuEfU2BPcF5yTUXQ3eE9Qqo73fPLCqyCYKR5uZUmu7DQ2cfzsOw6S6YCEulRy8IpD5MxxuByeCWyYUpezeuqo5z3ZuEzdyRcn5IQ53gVeJ8yjEgQvig8EZqDMgoh26W9l3TQlt9Iiox7wrwGngLxLqMmYxHJyOOn/WTUjOKJqCW7vtC/A6lWbHHpRQ/xD1+w3wGWnrBqwLeIB8Qeii/L09Bb4nzjRZKtkeLiN6m8fI4XXeKm29Dwx0MfD0PGjNgp3BG1F3M9MOA1c6csj1DJX2fnBewrUyBsAXRz8Hmlz0dMwCPzDl+UJOgMykl6Eh0C5rkXwQei1W5thmvYjq+CvBM8T7TYG/okPP1rbuVxWDgKPVQJV1hbd3pUFcIk6RQvCloyKejvbf8bKpEHuIC0trgVpRqHicfVp8m4+LG8lDhaarcrAqz4DHNeBpkLPay6G9egJ4qlRnpgE+fYxPN3k5IWaDjM62hhl+FhypyjCPwa0jVNYqcDJ4UljX3+ffwIvE2eUEXy6aS7yPfcUNQsRSqUU/cX2nwbrTpRq9/lDcmqPmwvrkxB6+vY1zbDPzIjhoa4O/60cjnhuv8mn/jYioP1mV+RjcweePDmqR2QbH737gOnP+NP+go+6ha+AWkGH6KVP3C3D/iHpbBrVrB+L4GBmVwNnoGq1gX39+pDl3paT3Pe3uB0298Qnl9/P3EmI9ONSUsega0U4fc9/v2zJ5mijhana9fPdwg1TdTOyoUVrJArd6H6bKP4BR501pHDSHdB+/LS5gETktcMYAP5d4TMH5aRH5HP312oEzw0SJlkHZk/y1hOBIGJoJraYK1y39JRkcXfdSad7DWXGFcQ00dZ7SWeCe0gHgCPmq5INHxD1QjmBjJR9w2psljYNtzBU3HRN7g9uC4XZLLni+73/zBZ0g+WCISd8cmgvtxF0x+QNN+jltUljgHEdP2uU/Udm/FOdCZV8xuBXa4FRuelPYJ+NRd0FEk3QHdlfpuSj3gSSD+qL7J+0laheo4FtJPtjUH7vk2GYPyQH+gdKzMM5nfU/cy3hO4BaBf1fF6XV5TBqEnyF+ZLJnSvvBkTcukGSjfq9IOuwM1Zd/0Fd0Y9J7dLJU1wD07NB2Pwrn+BKcgHJ6BrDbGhZKOl4y6W2kA9CZvujhZp0FKj3SK+Eu4CCVP67erbUx4ODR3eSlBlcSwJllTcy5bia9StJhZxK93uF+Gi48l5syNO/o1uOIfqSyi+19xl2nxmcJ8nNDp1FwHzl7WGXRp8wp8j9S7QeWSYt0ZgVfEhvp6ymNIe7Fs8qa5GuPK/Nx+IMzHjhanEeFnhjr0aCrkmZoOPPZyG2W++xt0q3SAehs32SONukDpHZb7NQsn0FlgXdDLjbZu0vHoNmks/iVdzbpNntucA/zQPq1uYika1K7Vjn7cbHOkfc9U7V/kO4B282k35YOQKdScL9Auk9l8WuR0PYLvQt54jmTpnuum2RHJWO52Sa9B+T8PK5w4EL0u6osmjSx6wP02wrwKGm7I5OKz304DORos4TfTu6ZIJ8L+uEm+2lpHHSz1mR0xq/qtftMKxsXZnl0sgZ9yLrHObVPCnzMwILuOLCfzpJsoILrve50+40J3H5pK4MvDX35eoPYo+JHcJzfARwYI+c1c00MvHBUp1tyuspnv16AdranwhlSPgNCegbhovQJqR+rpXZWYf/WyCx6qD4K7MjmiPxJOS0uqxdTqbyMw/Umm1+fPO6DLQMCFww6ALxcnG9YP/hMIzjk0BQ6W2qVj379qWj3cHAXKi04StwM9k9Vjos9RnbD+AU9IjMDF/g6ENwucBvFuAPyfHNNdDGv9HXPkNqFI3ch0ht1ojhbni5a2uw3gzoIxWsem+TWTLjvT6Xt+oCDyu5e3mFF3k34dSQzouyZRg7Lxu3xaHck05/vDb4YZMdwVVdHMr/aTZhw/93AKUF9oPv0YNPO3hnrLg+c0uu6J/nrrAfjYu7HomtMuYsS2i70bsIkXCu1rrRpGA2WSgcA7dI7wa0BHfqljw8g0SN0ecYq3DtE3/Y1Uj84ch4HmdakO4/5ku3jBEY7L/XlG8G5Eh8fKNwHDwxehBE0ekPiQuLzA7fHosmXmZjQJu3LGSptV/tvmfOLIuRxhqBLkl4bfq3PKVRvw6VCcJfeheJ2MIZgtDFcvNHlmPg/VzhlQw7t22vFbdyiTB0E4r3yu1H+ew3++4t5Ec0wkknF50tJW1zb6tzoxW2/Y8ONYkY+TZWLAzebUz7/WQ+jpdqsoTl1h7gF/ewEs9AG2yK3gNA8gzxuVaCHbD+puihpLs3ixpu87M57IGwEmmOE8AbJB0PR5gwpGPx0ywfP6C9Hw3dS9qA0IoseE/q8+YIsSvraKKJuxdelkrei7jKpE4H7TJCeKrbV3J426pBFi4QenHVe1vryP1t9C+CmKnF7Y74JWZy+2/WtqB9dW6SB7c9og9HQ5fINwM8gNdsEyn++WaLQKBW8RKFRKniJQqNU8BKFRqngJQqNLwEZWErzngOVuwAAAABJRU5ErkJggg==" alt="Microsoft Logo"/></a><p>© 2012-<!-- -->2024<!-- --> Microsoft<br/><a href="https://go.microsoft.com/fwlink/?LinkId=521839" title="Microsoft Privacy Policy">Privacy</a><a href="https://go.microsoft.com/fwlink/?LinkID=206977">Terms of Use</a></p></article><article id="using-typescript"><h3>Using TypeScript</h3><ul><li><a href="/docs/">Get Started</a></li><li><a href="/download/">Download</a></li><li><a href="/community/">Community</a></li><li><a to="/play/" href="/play/">Playground</a></li><li><a aria-current="page" class="" href="/tsconfig/">TSConfig Ref</a></li><li><a to="/play/#show-examples" href="/play/#show-examples">Code Samples</a></li><li><a href="/why-create-typescript/">Why TypeScript</a></li><li><a href="/branding/">Design</a></li></ul></article><article id="community-links"><h3>Community</h3><ul><li><a style="position:relative" href="/community">Get Help</a></li><li><a style="position:relative" href="https://devblogs.microsoft.com/typescript/">Blog</a></li><li><a style="position:relative" href="https://github.com/microsoft/TypeScript/#readme"><span class="link-prefix"><svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m6.03927.165405c-3.27055 0-5.922909 2.652005-5.922909 5.923645 0 2.61709 1.697089 4.83705 4.050909 5.62035.29636.0546.40436-.1284.40436-.2854 0-.1408-.00509-.5131-.008-1.0073-1.64763.3578-1.99527-.7942-1.99527-.7942-.26946-.68436-.65782-.86654-.65782-.86654-.53782-.36727.04073-.36001.04073-.36001.59454.04182.90727.61055.90727.61055.52836.90509 1.38655.64364 1.724.492.05382-.38254.20691-.64363.376-.79163-1.31527-.14946-2.69818-.65782-2.69818-2.92764 0-.64654.23091-1.17564.60982-1.58946-.06109-.14981-.26437-.75236.05818-1.56763 0 0 .49709-.15927 1.62872.60727.47237-.13163.97928-.19709 1.48291-.19964.50328.00255 1.00982.06801 1.48291.19964 1.13091-.76654 1.62727-.60727 1.62727-.60727.32328.81527.12001 1.41782.05928 1.56763.37964.41382.60873.94292.60873 1.58946 0 2.27564-1.38509 2.77636-2.70437 2.92291.21237.18291.40182.54436.40182 1.09672 0 .79204-.00727 1.43094-.00727 1.62514 0 .1585.10691.3429.40727.2851 2.35197-.7851 4.04767-3.00369 4.04767-5.62005 0-3.27164-2.6524-5.923645-5.92403-5.923645z" fill="#fffffe" fill-rule="evenodd"></path></svg></span>GitHub Repo</a></li><li><a style="position:relative" href="https://discord.gg/typescript"><span class="link-prefix"><svg fill="none" height="10" viewBox="0 0 11 10" width="11" xmlns="http://www.w3.org/2000/svg"><path d="m9.05511 0h-7.11021c-.59959 0-1.087753.46-1.087753 1.03v6.76c0 .57.488163 1.03 1.087753 1.03h6.01715l-.28123-.925.67918.595.64205.56 1.14085.95v-8.97c0-.57-.4882-1.03-1.08779-1.03zm-2.04817 6.53s-.19102-.215-.3502-.405c.6951-.185.96041-.595.96041-.595-.21755.135-.42449.23-.61021.295-.2653.105-.52.175-.76938.215-.50939.09-.97633.065-1.37429-.005-.30245-.055-.56245-.135-.78-.215-.12204-.045-.25469-.1-.38735-.17-.01592-.01-.03183-.015-.04775-.025-.01061-.005-.01592-.01-.02123-.015-.09551-.05-.14857-.085-.14857-.085s.2547.4.92857.59c-.15918.19-.35551.415-.35551.415-1.17265-.035-1.61836-.76-1.61836-.76 0-1.61.76408-2.915.76408-2.915.76408-.54 1.49102-.525 1.49102-.525l.05306.06c-.9551.26-1.39551.655-1.39551.655s.11673-.06.31306-.145c.56776-.235 1.01878-.3 1.20449-.315.03184-.005.05837-.01.0902-.01.32368-.04.6898-.05 1.07184-.01.50408.055 1.04531.195 1.59714.48 0 0-.41918-.375-1.32122-.635l.07428-.08s.72694-.015 1.49103.525c0 0 .76408 1.305.76408 2.915 0 0-.45102.725-1.62368.76z" fill="#fff"></path></svg></span>Community Chat</a></li><li><a style="position:relative" href="https://twitter.com/TypeScript"><span class="link-prefix"><svg fill="none" height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m4.58519 10c4.62962 0 7.16291-3.83919 7.16291-7.16289 0-.10801 0-.21602-.0049-.32403.4909-.35348.918-.80024 1.2568-1.30591-.4517.20128-.9377.33384-1.4483.39766.5204-.30929.9181-.805148 1.1095-1.394284-.486.289658-1.026.495856-1.6004.608773-.4615-.490946-1.11448-.7953322-1.83617-.7953322-1.38938 0-2.51856 1.1291732-2.51856 2.5185532 0 .19638.02455.38785.06383.57441-2.09143-.1031-3.94721-1.10954-5.1893-2.631474-.21602.373119-.33876.805154-.33876 1.266644 0 .87388.44677 1.64467 1.11936 2.09634-.41239-.01473-.80024-.12765-1.13899-.31421v.03437c0 1.21754.86897 2.23871 2.01778 2.46946-.2111.05891-.43203.08837-.66277.08837-.16202 0-.31912-.01473-.47131-.04419.31911 1.00153 1.25191 1.72813 2.35163 1.74777-.86406.67751-1.94906 1.08008-3.12733 1.08008-.20128 0-.402571-.00982-.59895-.03436 1.10954.70696 2.43509 1.12425 3.85393 1.12425z" fill="#fff"></path></svg></span>@TypeScript</a></li><li><a style="position:relative" href="https://fosstodon.org/@TypeScript" rel="me"><span class="link-prefix"><svg fill="none" height="12" viewBox="0 0 74 79" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M73.7014 17.4323C72.5616 9.05152 65.1774 2.4469 56.424 1.1671C54.9472 0.950843 49.3518 0.163818 36.3901 0.163818H36.2933C23.3281 0.163818 20.5465 0.950843 19.0697 1.1671C10.56 2.41145 2.78877 8.34604 0.903306 16.826C-0.00357854 21.0022 -0.100361 25.6322 0.068112 29.8793C0.308275 35.9699 0.354874 42.0498 0.91406 48.1156C1.30064 52.1448 1.97502 56.1419 2.93215 60.0769C4.72441 67.3445 11.9795 73.3925 19.0876 75.86C26.6979 78.4332 34.8821 78.8603 42.724 77.0937C43.5866 76.8952 44.4398 76.6647 45.2833 76.4024C47.1867 75.8033 49.4199 75.1332 51.0616 73.9562C51.0841 73.9397 51.1026 73.9184 51.1156 73.8938C51.1286 73.8693 51.1359 73.8421 51.1368 73.8144V67.9366C51.1364 67.9107 51.1302 67.8852 51.1186 67.862C51.1069 67.8388 51.0902 67.8184 51.0695 67.8025C51.0489 67.7865 51.0249 67.7753 50.9994 67.7696C50.9738 67.764 50.9473 67.7641 50.9218 67.7699C45.8976 68.9569 40.7491 69.5519 35.5836 69.5425C26.694 69.5425 24.3031 65.3699 23.6184 63.6327C23.0681 62.1314 22.7186 60.5654 22.5789 58.9744C22.5775 58.9477 22.5825 58.921 22.5934 58.8965C22.6043 58.8721 22.621 58.8505 22.6419 58.8336C22.6629 58.8167 22.6876 58.8049 22.714 58.7992C22.7404 58.7934 22.7678 58.794 22.794 58.8007C27.7345 59.9796 32.799 60.5746 37.8813 60.5733C39.1036 60.5733 40.3223 60.5733 41.5447 60.5414C46.6562 60.3996 52.0437 60.1408 57.0728 59.1694C57.1983 59.1446 57.3237 59.1233 57.4313 59.0914C65.3638 57.5847 72.9128 52.8555 73.6799 40.8799C73.7086 40.4084 73.7803 35.9415 73.7803 35.4523C73.7839 33.7896 74.3216 23.6576 73.7014 17.4323ZM61.4925 47.3144H53.1514V27.107C53.1514 22.8528 51.3591 20.6832 47.7136 20.6832C43.7061 20.6832 41.6988 23.2499 41.6988 28.3194V39.3803H33.4078V28.3194C33.4078 23.2499 31.3969 20.6832 27.3894 20.6832C23.7654 20.6832 21.9552 22.8528 21.9516 27.107V47.3144H13.6176V26.4937C13.6176 22.2395 14.7157 18.8598 16.9118 16.3545C19.1772 13.8552 22.1488 12.5719 25.8373 12.5719C30.1064 12.5719 33.3325 14.1955 35.4832 17.4394L37.5587 20.8853L39.6377 17.4394C41.7884 14.1955 45.0145 12.5719 49.2765 12.5719C52.9614 12.5719 55.9329 13.8552 58.2055 16.3545C60.4017 18.8574 61.4997 22.2371 61.4997 26.4937L61.4925 47.3144Z" fill="#fff"></path></svg></span>Mastodon</a></li><li><a style="position:relative" href="https://stackoverflow.com/questions/tagged/typescript"><span class="link-prefix"><svg fill="none" height="16" viewBox="0 0 12 16" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m.375 15.1875v-6h1.09375l-.03125 4.8125h7.1875v-4.78125h1.125v5.96875zm1.75-3.1563h5.625v1.1876h-5.625zm.03125-.9374.09375-1.2188 5.65625.5312-.125 1.2188zm.28125-2.4688.34375-1.1875 5.46875 1.53125-.34375 1.18745zm1.03125-2.90625.625-1.0625 4.84375 2.9375-.65625 1.0625zm2.40625-2.9375 1-.71875 3.3125 4.625-1 .71875zm3.625-1.78125 1.1875-.1875.9375 5.59375-1.2188.1875z" fill="#fff"></path></svg></span>Stack Overflow</a></li><li><a style="position:relative" href="https://github.com/microsoft/TypeScript-Website"><span class="link-prefix"><svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m6.03927.165405c-3.27055 0-5.922909 2.652005-5.922909 5.923645 0 2.61709 1.697089 4.83705 4.050909 5.62035.29636.0546.40436-.1284.40436-.2854 0-.1408-.00509-.5131-.008-1.0073-1.64763.3578-1.99527-.7942-1.99527-.7942-.26946-.68436-.65782-.86654-.65782-.86654-.53782-.36727.04073-.36001.04073-.36001.59454.04182.90727.61055.90727.61055.52836.90509 1.38655.64364 1.724.492.05382-.38254.20691-.64363.376-.79163-1.31527-.14946-2.69818-.65782-2.69818-2.92764 0-.64654.23091-1.17564.60982-1.58946-.06109-.14981-.26437-.75236.05818-1.56763 0 0 .49709-.15927 1.62872.60727.47237-.13163.97928-.19709 1.48291-.19964.50328.00255 1.00982.06801 1.48291.19964 1.13091-.76654 1.62727-.60727 1.62727-.60727.32328.81527.12001 1.41782.05928 1.56763.37964.41382.60873.94292.60873 1.58946 0 2.27564-1.38509 2.77636-2.70437 2.92291.21237.18291.40182.54436.40182 1.09672 0 .79204-.00727 1.43094-.00727 1.62514 0 .1585.10691.3429.40727.2851 2.35197-.7851 4.04767-3.00369 4.04767-5.62005 0-3.27164-2.6524-5.923645-5.92403-5.923645z" fill="#fffffe" fill-rule="evenodd"></path></svg></span>Web Repo</a></li></ul></article></section></footer><div class="page-popup" id="language-recommendation" style="display:none"><p id="language-recommendation-p">MSG</p><div><button class="first" id="language-recommendation-open"></button><button id="language-recommendation-no-more"></button></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/tsconfig/";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" --> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-6ab7e0354385adfb6ba2.js\"],\"component---src-pages-branding-tsx\":[\"/component---src-pages-branding-tsx-440e362e50680e0e3747.js\"],\"component---src-pages-dev-bug-workbench-tsx\":[\"/component---src-pages-dev-bug-workbench-tsx-4f1f47b1794424d80c37.js\"],\"component---src-pages-dev-playground-plugins-tsx\":[\"/component---src-pages-dev-playground-plugins-tsx-fcd2797163a9c90ad6b5.js\"],\"component---src-pages-dev-sandbox-tsx\":[\"/component---src-pages-dev-sandbox-tsx-21bc53b5e8dd584632d0.js\"],\"component---src-pages-dev-twoslash-tsx\":[\"/component---src-pages-dev-twoslash-tsx-405f36db52cbdfa07e8a.js\"],\"component---src-pages-dev-typescript-vfs-tsx\":[\"/component---src-pages-dev-typescript-vfs-tsx-635f333ffbdf010041df.js\"],\"component---src-templates-documentation-tsx\":[\"/component---src-templates-documentation-tsx-0e6bccaad6988b5462a2.js\"],\"component---src-templates-glossary-tsx\":[\"/component---src-templates-glossary-tsx-a0dce7484c83a19590b4.js\"],\"component---src-templates-pages-cheatsheets-tsx\":[\"/component---src-templates-pages-cheatsheets-tsx-965106ccde2c6c1ae555.js\"],\"component---src-templates-pages-community-tsx\":[\"/component---src-templates-pages-community-tsx-24bceb218daa34beddfe.js\"],\"component---src-templates-pages-docs-handbook-index-tsx\":[\"/component---src-templates-pages-docs-handbook-index-tsx-2001ad8d2bc1debd6c59.js\"],\"component---src-templates-pages-docs-index-tsx\":[\"/component---src-templates-pages-docs-index-tsx-96e02905712c01f400a6.js\"],\"component---src-templates-pages-download-tsx\":[\"/component---src-templates-pages-download-tsx-8ae10160316431f17631.js\"],\"component---src-templates-pages-dt-search-tsx\":[\"/component---src-templates-pages-dt-search-tsx-0824ab4062db58a18547.js\"],\"component---src-templates-pages-empty-tsx\":[\"/component---src-templates-pages-empty-tsx-ff6685a8a056afd03fea.js\"],\"component---src-templates-pages-index-tsx\":[\"/component---src-templates-pages-index-tsx-97d906a0f8a3bb48bc6e.js\"],\"component---src-templates-pages-tools-tsx\":[\"/component---src-templates-pages-tools-tsx-0d64a9b3faa88930876e.js\"],\"component---src-templates-pages-why-create-typescript-tsx\":[\"/component---src-templates-pages-why-create-typescript-tsx-37cf4df6166fee310ca0.js\"],\"component---src-templates-play-example-tsx\":[\"/component---src-templates-play-example-tsx-f169ca72b98afa65abd0.js\"],\"component---src-templates-play-tsx\":[\"/component---src-templates-play-tsx-ad260cbb4e88cb9c45f3.js\"],\"component---src-templates-playground-handbook-tsx\":[\"/component---src-templates-playground-handbook-tsx-40b74df1775af714e7a7.js\"],\"component---src-templates-tsconfig-option-one-page-tsx\":[\"/component---src-templates-tsconfig-option-one-page-tsx-bfc6cb9586f5bdf559d7.js\"],\"component---src-templates-tsconfig-reference-tsx\":[\"/component---src-templates-tsconfig-reference-tsx-a3c85d191dfc7d449cf4.js\"]}"; </script> <script>window.___webpackCompilationHash="d6f3d114407a4c12ee70";</script><script src="/webpack-runtime-e6cc754ee7914e7b3708.js" async></script><script src="/app-6ab7e0354385adfb6ba2.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>