CINXE.COM
razzle-plugin-typescript – Razzle
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter&display=swap"/><link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" media="print"/><title>razzle-plugin-typescript – Razzle</title><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"/><link rel="manifest" href="/favicon/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="theme-color" content="#ffffff"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="Content-Language" content="en"/><meta name="description" content="Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications."/><meta name="og:description" content="Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@jaredpalmer"/><meta name="twitter:image" content="https://razzlejs.org/og_image.png"/><meta name="og:title" content="Razzle: React Apps. Zero to Production."/><meta name="og:url" content="https://razzlejs.org"/><meta name="og:image" content="https://razzlejs.org/og_image.png"/><meta name="apple-mobile-web-app-title" content="Razzle"/><meta name="next-head-count" content="22"/><link rel="preload" href="/_next/static/css/e37b3d57b0439a228f47.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e37b3d57b0439a228f47.css"/><link rel="preload" href="/_next/static/KRf9T1_NU6uVVMvZpSIgz/pages/_app.js" as="script"/><link rel="preload" href="/_next/static/KRf9T1_NU6uVVMvZpSIgz/pages/plugins/razzle-plugin-typescript.js" as="script"/><link rel="preload" href="/_next/static/runtime/webpack-c212667a5f965e81e004.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework.e84fa698c7ee940652bd.js" as="script"/><link rel="preload" href="/_next/static/chunks/commons.420462c86cb0d9fb74e2.js" as="script"/><link rel="preload" href="/_next/static/runtime/main-30ba66d433357d7c29be.js" as="script"/><link rel="preload" href="/_next/static/chunks/1e9dacda94d826b1645cec5ad1ba8e629fa1942a.4b91ec86d3653af3de0e.js" as="script"/></head><a href="#reach-skip-nav" data-reach-skip-link="" data-reach-skip-nav-link="">Skip to content</a><body><div id="__next"><div class="main-container flex flex-col"><nav class="flex items-center bg-white z-20 fixed top-0 left-0 right-0 h-16 border-b px-6 "><div class="mr-6 md:mr-0 md:w-full flex items-center"><a class="no-underline text-current inline-flex items-center p-2 -m-2 hover:opacity-75" href="/"><svg height="22" viewBox="0 0 728 131"><title>Group 4</title><defs><linearGradient x1=".258%" y1="49.75%" x2="101.258%" y2="49.75%" id="prefix__c"><stop stop-color="#3023AE" offset="0%"></stop><stop stop-color="#53A0FD" offset="70.741%"></stop><stop stop-color="#B4EC51" offset="100%"></stop></linearGradient><linearGradient x1="101.258%" y1="49.75%" x2=".258%" y2="49.75%" id="prefix__d"><stop stop-color="#3023AE" offset="0%"></stop><stop stop-color="#53A0FD" offset="70.741%"></stop><stop stop-color="#B4EC51" offset="100%"></stop></linearGradient><linearGradient x1=".258%" y1="49.75%" x2="101.258%" y2="49.75%" id="prefix__e"><stop stop-color="#3023AE" offset="0%"></stop><stop stop-color="#53A0FD" offset="70.741%"></stop><stop stop-color="#B4EC51" offset="100%"></stop></linearGradient><linearGradient x1=".258%" y1="49.75%" x2="101.258%" y2="49.75%" id="prefix__f"><stop stop-color="#3023AE" offset="0%"></stop><stop stop-color="#53A0FD" offset="70.741%"></stop><stop stop-color="#B4EC51" offset="100%"></stop></linearGradient><linearGradient x1=".258%" y1="49.75%" x2="101.258%" y2="49.75%" id="prefix__g"><stop stop-color="#3023AE" offset="0%"></stop><stop stop-color="#53A0FD" offset="70.741%"></stop><stop stop-color="#B4EC51" offset="100%"></stop></linearGradient><linearGradient x1=".258%" y1="49.75%" x2="101.258%" y2="49.75%" id="prefix__h"><stop stop-color="#3023AE" offset="0%"></stop><stop stop-color="#53A0FD" offset="70.741%"></stop><stop stop-color="#B4EC51" offset="100%"></stop></linearGradient><path d="M.492 131V.903h63.116c2.738 0 5.602.452 8.592 1.356 2.99.903 5.53 2.114 7.619 3.631.72.579 1.657 1.374 2.81 2.386l3.35 3.469 3.134 3.36c1.009 1.085 1.801 1.988 2.378 2.711 1.44 1.951 2.486 4.228 3.134 6.83.648 2.602.973 5.096.973 7.48v18.431c0 5.348-1.37 10.046-4.107 14.094-.505.795-1.243 1.734-2.216 2.819a88.323 88.323 0 01-3.188 3.36 71.348 71.348 0 01-3.458 3.253c-1.153 1.012-2.09 1.77-2.81 2.276-.865.723-1.73 1.301-2.594 1.735l-2.594 1.301 4.215 7.806 4.647 8.565 4.756 8.564 4.43 8.24L102.732 131H73.334L47.613 81.346h-20.75V131H.492zm26.37-75.022h36.746c.144 0 .468-.163.972-.488a11.581 11.581 0 001.621-1.301 36.787 36.787 0 001.676-1.68c.54-.579.99-1.157 1.35-1.735V31.476c-.576-.867-1.386-1.807-2.431-2.819-1.045-1.011-2.108-1.807-3.188-2.385H26.862v29.706zM127.252 131L172.21.903h29.18L246.133 131h-28.1l-8.645-24.935h-45.175L155.35 131h-28.1zm44.958-50.304h29.18l-14.698-41.848-14.482 41.848zM277.138 131v-19.298l55.55-85.43h-54.685V.903h89.053v19.515l-54.902 85.213h54.902V131h-89.918zm123.95 0v-19.298l55.55-85.43h-54.686V.903h89.053v19.515l-54.901 85.213h54.901V131h-89.918zm124.813 0V.903h26.37v104.511h57.496V131H525.9zm116.384 0V.903h85.163v25.37h-58.793v26.67h56.847V78.31h-56.847v27.32h58.793V131h-85.163z" id="prefix__a"></path></defs><g fill="none" fill-rule="evenodd"><mask id="prefix__b" fill="#fff"><use xlink:href="#prefix__a"></use></mask><use fill="#FFF" xlink:href="#prefix__a"></use><g mask="url(#prefix__b)"><path fill="#000" d="M-321.581-241.135L820.96 418.512l-17.452 30.229-1142.542-659.647z"></path><path fill="url(#prefix__c)" d="M0 34.905h1319.293V69.81H0z" transform="rotate(30 289.173 -720.646)"></path><path fill="#000" d="M-356.486-180.677L786.055 478.969l-17.452 30.229L-373.94-150.45zM-391.391-120.22L751.15 539.426l-17.452 30.23L-408.844-89.992z"></path><path fill="url(#prefix__c)" d="M0 69.81h1319.293v34.905H0z" transform="rotate(30 93.772 -773.003)"></path><path fill="url(#prefix__d)" d="M-40.981-10.981h1319.293v34.905H-40.981z" transform="rotate(30 93.772 -773.003)"></path><path fill="#000" d="M-426.296-59.763L716.245 599.884l-17.452 30.228L-443.75-29.534z"></path><g><path fill="#000" d="M14.65-432.364L1157.19 227.282l-17.452 30.229L-2.803-402.136z"></path><path fill="url(#prefix__c)" d="M0 34.905h1319.293V69.81H0z" transform="rotate(30 814.128 -188.845)"></path><path fill="#000" d="M-20.255-371.907l1142.541 659.646-17.452 30.229L-37.708-341.679z"></path><g><path fill="#000" d="M-55.16-311.45L1087.38 348.197l-17.452 30.228L-72.613-281.22z"></path><path fill="url(#prefix__c)" d="M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z" transform="rotate(30 618.727 -241.203)"></path><path fill="#000" d="M-90.065-250.993l1142.541 659.647-17.452 30.229-1142.542-659.647z"></path></g></g><g><path fill="#000" d="M-36.824-203.173l1239.73 451.224-11.939 32.8-1239.73-451.224z"></path><path fill="url(#prefix__c)" d="M0 34.905h1319.293V69.81H0z" transform="rotate(20 557.715 -206.007)"></path><path fill="#000" d="M-60.7-137.573L1179.03 313.65l-11.939 32.8-1239.73-451.225z"></path><g><path fill="#000" d="M-84.577-71.974l1239.73 451.225-11.938 32.8L-96.515-39.174z"></path><path fill="url(#prefix__c)" d="M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z" transform="rotate(20 260.78 -258.365)"></path><path fill="#000" d="M-108.454-6.374l1239.73 451.225-11.938 32.8-1239.73-451.225z"></path></g></g><g><path fill="#000" d="M-231.11 351.479l267-462.458 21.45 12.384-267 462.458z"></path><path fill="url(#prefix__e)" d="M0 24.768h534v24.768H0z" transform="rotate(-60 188.835 375.886)"></path><path fill="#000" d="M-188.21 376.247l267-462.458 21.45 12.384-267 462.458z"></path><g><path fill="#000" d="M-157.487 420.414L132.675-82.161l23.382 13.5-290.161 502.575z"></path><path fill="url(#prefix__f)" d="M25 52.726h534.39v24.863H25z" transform="rotate(-60 264.083 361.22)"></path><path fill="url(#prefix__g)" d="M.534.402h580.323v27H.534z" transform="rotate(-60 264.083 361.22)"></path><path fill="#000" d="M-101.09 426.456L166.107-36.34l21.532 12.432-267.195 462.796z"></path></g></g><g><path fill="#000" d="M341.875-524.215l1142.54 659.647-17.452 30.228-1142.54-659.646z"></path><path fill="url(#prefix__c)" d="M0 34.905h1319.293V69.81H0z" transform="rotate(30 1149.136 375.84)"></path><path fill="#000" d="M306.97-463.758L1449.51 195.89l-17.452 30.228-1142.54-659.646z"></path><g><path fill="#000" d="M272.065-403.3l1142.54 659.646-17.452 30.229-1142.54-659.647z"></path><path fill="url(#prefix__c)" d="M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z" transform="rotate(30 953.735 323.482)"></path><path fill="#000" d="M237.16-342.843L1379.7 316.803l-17.452 30.229-1142.54-659.647z"></path></g></g><g><path fill="#000" d="M746.149-263.604l527.77 628.972-29.331 24.612-527.77-628.972z"></path><path fill="url(#prefix__h)" d="M0 38.289h821.064v38.289H0z" transform="rotate(50 655.724 668.259)"></path><path fill="#000" d="M687.487-214.38l527.77 628.971-29.332 24.612-527.77-628.972z"></path><g><path fill="#000" d="M628.825-165.157l527.77 628.972-29.332 24.611-527.77-628.971z"></path><path fill="url(#prefix__h)" d="M0 76.578h821.064v38.289H0zM0 0h821.064v38.289H0z" transform="rotate(50 532.558 610.825)"></path><path fill="#000" d="M570.162-115.934l527.77 628.972-29.33 24.612-527.77-628.972z"></path></g></g></g></g></svg><span class=" font-extrabold hidden md:inline sr-only">Razzle</span><span class="mx-3 text-gray-600 font-normal hidden md:inline whitespace-no-wrap">React applications. From zero to <em>production.</em></span></a></div><div class="relative w-full md:w-64 mr-2"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="h-4 w-4 text-gray-400"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div><input type="search" class="appearance-none pl-8 border rounded-md py-2 pr-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full" placeholder="Search ("/" to focus)" aria-label="Search documentation"/></div><a class="text-current p-2 -mr-2" href="https://github.com/jaredpalmer/razzle" target="_blank" rel="noopener" aria-label="GitHub Repository"><svg height="28" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z" fill="currentColor"></path></svg></a><button class="block md:hidden p-2 -mr-2 ml-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button></nav><div class="flex flex-1 h-full"><aside class="h-screen bg-white flex-shrink-0 w-full md:w-64 md:border-r md:block fixed md:sticky z-10 hidden" style="top:4rem;height:calc(100vh - 4rem)"><div class="sidebar w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto"><ul><li class=""><a class="focus:shadow-outline" href="/">Introduction</a></li><li class=""><a class="focus:shadow-outline" href="/getting-started">Getting Started</a></li><li class="active"><button class="focus:shadow-outline">Documentation</button><div style="display:"><ul><li class=""><a class="focus:shadow-outline" href="/docs/customization">Customization</a></li><li class=""><a class="focus:shadow-outline" href="/docs/single-page-applications">Single Page Applications</a></li><li class=""><a class="focus:shadow-outline" href="/docs/environment-variables">Environment Variables</a></li><li class=""><a class="focus:shadow-outline" href="/docs/static-export">Static Site Generation</a></li><li class=""><a class="focus:shadow-outline" href="/docs/experimental-features">Experimental Features</a></li><li class=""><a class="focus:shadow-outline" href="/docs/how-it-works">How Razzle Works</a></li><li class=""><a class="focus:shadow-outline" href="/docs/upgrade-guide">Upgrade guide</a></li></ul></div></li><li class=""><button class="focus:shadow-outline">Deployment Options</button><div style="display:none"><ul><li class=""><a class="focus:shadow-outline" href="/deployment-options/aws">AWS</a></li><li class=""><a class="focus:shadow-outline" href="/deployment-options/azure">Azure</a></li><li class=""><a class="focus:shadow-outline" href="/deployment-options/plesk">Plesk</a></li><li class=""><a class="focus:shadow-outline" href="/deployment-options/vercel">Vercel</a></li><li class=""><a class="focus:shadow-outline" href="/deployment-options/layer0">Layer0</a></li></ul></div></li><li class="active-route"><button class="focus:shadow-outline">Razzle plugins</button><div style="display:none"><ul><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-bundle-analyzer">razzle-plugin-bundle-analyzer</a></li><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-graphql">razzle-plugin-graphql</a></li><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-less">razzle-plugin-less</a></li><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-mdx">razzle-plugin-mdx</a></li><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-php">razzle-plugin-php</a></li><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-scss">razzle-plugin-scss</a></li><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-svelte">razzle-plugin-svelte</a></li><li class="active"><a href="/plugins/razzle-plugin-typescript">razzle-plugin-typescript</a><ul><li><a href="#razzle-plugin-typescript" class="focus:shadow-outline"><span class="flex"><span class="mr-2 opacity-25">#</span><span class="inline-block">razzle-plugin-typescript</span></span></a></li><li><a href="#usage-in-razzle-projects" class="focus:shadow-outline"><span class="flex"><span class="mr-2 opacity-25">#</span><span class="inline-block">Usage in Razzle Projects</span></span></a></li><li><a href="#options" class="focus:shadow-outline"><span class="flex"><span class="mr-2 opacity-25">#</span><span class="inline-block">Options</span></span></a></li></ul></li><li class=""><a class="focus:shadow-outline" href="/plugins/razzle-plugin-vue">razzle-plugin-vue</a></li></ul></div></li><li class=""><a class="focus:shadow-outline" href="/change-log">Change Log</a></li><li class=""><a class="focus:shadow-outline" href="/contributing">Contributing</a></li></ul></div></aside><div id="reach-skip-nav" data-reach-skip-nav-content=""></div><content class="relative pt-20 pb-16 px-6 md:px-8 w-full max-w-full overflow-x-hidden"><main class="max-w-screen-md"><h2><span class="subheading-anchor" id="razzle-plugin-typescript"></span><a href="#razzle-plugin-typescript" class="text-current no-underline no-outline">razzle-plugin-typescript<span class="anchor-icon select-none" aria-hidden="true">#</span></a></h2><p>This package contains a plugin for using TypeScript with Razzle</p><p>Razzle now has support for typescript using babel. Unless you specifically need this plugin we recommend using the builtin support</p><p>Use <a target="_blank" rel="noopener" href="https://github.com/jaredpalmer/razzle/tree/master/examples/with-typescript">with-typescript example</a> instead.</p><h2><span class="subheading-anchor" id="usage-in-razzle-projects"></span><a href="#usage-in-razzle-projects" class="text-current no-underline no-outline">Usage in Razzle Projects<span class="anchor-icon select-none" aria-hidden="true">#</span></a></h2><pre><code>yarn add razzle-plugin-typescript </code></pre><p>Using the plugin with the default options</p><pre><code class="prism-code language-js" style="color:#000;background-color:transparent"><div class="token-line"><span class="token comment" style="color:#999;font-style:italic">// razzle.config.js</span><span class="token plain"></span></div><div class="token-line"><span class="token plain" style="display:inline-block"></span></div><div class="token-line"><span class="token plain">module</span><span class="token punctuation" style="color:#333">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#333">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> plugins</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">[</span><span class="token string" style="color:#028265">'typescript'</span><span class="token punctuation" style="color:#333">]</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation" style="color:#333">}</span><span class="token punctuation" style="color:#333">;</span></div></code></pre><p>See full configuration in the <a target="_blank" rel="noopener" href="https://github.com/jaredpalmer/razzle/tree/master/examples/with-typescript-plugin">typescript example project</a>.</p><h3><span class="subheading-anchor" id="with-custom-options"></span><a href="#with-custom-options" class="text-current no-underline no-outline">With custom options:<span class="anchor-icon select-none" aria-hidden="true">#</span></a></h3><pre><code class="prism-code language-js" style="color:#000;background-color:transparent"><div class="token-line"><span class="token comment" style="color:#999;font-style:italic">// razzle.config.js</span><span class="token plain"></span></div><div class="token-line"><span class="token plain" style="display:inline-block"></span></div><div class="token-line"><span class="token plain">module</span><span class="token punctuation" style="color:#333">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#333">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> plugins</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">[</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation" style="color:#333">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> name</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token string" style="color:#028265">'typescript'</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> options</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> useBabel</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token boolean" style="color:#d9931e">false</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> tsLoader</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> transpileOnly</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token boolean" style="color:#d9931e">true</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> experimentalWatchApi</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token boolean" style="color:#d9931e">true</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation" style="color:#333">}</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> forkTsChecker</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> eslint</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> files</span><span class="token punctuation" style="color:#333">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#333">[</span><span class="token string" style="color:#028265">'*.js'</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"> </span><span class="token string" style="color:#028265">'*.jsx'</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"> </span><span class="token string" style="color:#028265">'*.ts'</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"> </span><span class="token string" style="color:#028265">'*.tsx'</span><span class="token punctuation" style="color:#333">]</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation" style="color:#333">}</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation" style="color:#333">}</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation" style="color:#333">}</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation" style="color:#333">}</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation" style="color:#333">]</span><span class="token punctuation" style="color:#333">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation" style="color:#333">}</span><span class="token punctuation" style="color:#333">;</span></div></code></pre><h2><span class="subheading-anchor" id="options"></span><a href="#options" class="text-current no-underline no-outline">Options<span class="anchor-icon select-none" aria-hidden="true">#</span></a></h2><p><strong>useBabel: <em>boolean</em></strong> (defaults: false)</p><p>Set <code>useBabel</code> to <code>true</code> if you want to keep using <code>babel</code> for <em>JS</em>/<em>TS</em> interoperability, or if you want to apply any babel transforms to typescript files. (i.e.: <a target="_blank" rel="noopener" href="https://github.com/styled-components/babel-plugin-styled-components"><code>babel-plugin-styled-components</code></a>).</p><p><strong>tsLoader: <em>TSLoaderOptions</em></strong> (defaults: { transpileOnly: true, experimentalWatchApi: true })</p><p>Use this to override <a target="_blank" rel="noopener" href="https://github.com/TypeStrong/ts-loader"><code>ts-loader</code></a> options. Check all the options here: <a target="_blank" rel="noopener" href="https://github.com/TypeStrong/ts-loader#loader-options">ts-loader options</a>.</p><p><strong>forkTsChecker: <em>TSCheckerOptions</em></strong> (defaults: { async: 'compiler.options.mode === 'development'', typescript: true, eslint: undefined, issue: {}, formatter: 'codeframe', logger: { infrastructure: 'silent', issues: 'console', devServer: true } })</p><p>Use this to override <a target="_blank" rel="noopener" href="https://github.com/Realytics/fork-ts-checker-webpack-plugin"><code>fork-ts-checker-webpack-plugin</code></a> options. Check all the options here: <a target="_blank" rel="noopener" href="https://github.com/Realytics/fork-ts-checker-webpack-plugin#options">fork-ts-checker-webpack-plugin options</a>.</p><footer class="mt-24"><nav class="flex flex-row items-center justify-between"><div><a class="text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center mr-2" href="/plugins/razzle-plugin-svelte"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="transform rotate-180 inline mr-1 flex-shrink-0"><path d="M3 12h18m0 0l-6.146-6M21 12l-6.146 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>razzle-plugin-svelte</a></div><div><a class="text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center ml-2" href="/plugins/razzle-plugin-vue">razzle-plugin-vue<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="inline ml-1 flex-shrink-0"><path d="M3 12h18m0 0l-6.146-6M21 12l-6.146 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></nav><hr/><div class="mt-24 flex justify-between flex-col-reverse md:flex-row items-center md:items-end"><a href="https://jaredpalmer.com/?utm_source=razzle" target="_blank" rel="noopener" class="inline-flex items-center no-underline text-current font-semibold"><span class="mr-1">A Jared Palmer Project</span></a><div class="mt-6"></div><a class="text-sm" href="https://github.com/jaredpalmer/razzle/tree/master/website/pages/plugins/razzle-plugin-typescript.md" target="_blank" rel="noopener">Edit this page on GitHub</a></div></footer></main> </content></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/plugins/razzle-plugin-typescript","query":{},"buildId":"KRf9T1_NU6uVVMvZpSIgz","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/_next/static/runtime/polyfills-f739c465d1402570091c.js"></script><script async="" data-next-page="/_app" src="/_next/static/KRf9T1_NU6uVVMvZpSIgz/pages/_app.js"></script><script async="" data-next-page="/plugins/razzle-plugin-typescript" src="/_next/static/KRf9T1_NU6uVVMvZpSIgz/pages/plugins/razzle-plugin-typescript.js"></script><script src="/_next/static/runtime/webpack-c212667a5f965e81e004.js" async=""></script><script src="/_next/static/chunks/framework.e84fa698c7ee940652bd.js" async=""></script><script src="/_next/static/chunks/commons.420462c86cb0d9fb74e2.js" async=""></script><script src="/_next/static/runtime/main-30ba66d433357d7c29be.js" async=""></script><script src="/_next/static/chunks/1e9dacda94d826b1645cec5ad1ba8e629fa1942a.4b91ec86d3653af3de0e.js" async=""></script><script src="/_next/static/KRf9T1_NU6uVVMvZpSIgz/_buildManifest.js" async=""></script><script src="/_next/static/KRf9T1_NU6uVVMvZpSIgz/_ssgManifest.js" async=""></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" async="" defer=""></script></body></html>