<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Michaelsxn]]></title><description><![CDATA[Michaelsxn]]></description><link>https://michaelsxn.hashnode.dev</link><generator>RSS for Node</generator><lastBuildDate>Wed, 16 Sep 2026 10:23:56 GMT</lastBuildDate><atom:link href="https://michaelsxn.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[How I Made TypeScript Instantly Faster in VSCode Without Touching My Build]]></title><description><![CDATA[Why TypeScript Feels Slow in Big Projects
Large TypeScript projects get slower over time. Even with features like incremental builds, tsc can still lag. This slows down autocomplete, error checks, and general development in VSCode.
I wanted things to...]]></description><link>https://michaelsxn.hashnode.dev/how-i-made-typescript-instantly-faster-in-vscode-without-touching-my-build</link><guid isPermaLink="true">https://michaelsxn.hashnode.dev/how-i-made-typescript-instantly-faster-in-vscode-without-touching-my-build</guid><category><![CDATA[tsgo]]></category><category><![CDATA[TypeScript]]></category><category><![CDATA[VS Code]]></category><category><![CDATA[developer experience]]></category><category><![CDATA[performance]]></category><dc:creator><![CDATA[Orji Michael]]></dc:creator><pubDate>Sat, 12 Jul 2025 13:35:19 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/-n_bYa2Bhwg/upload/4ba0c429fd73a67c4552c614468e1ec6.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="heading-why-typescript-feels-slow-in-big-projects"><strong>Why TypeScript Feels Slow in Big Projects</strong></h2>
<p>Large TypeScript projects get slower over time. Even with features like incremental builds, <code>tsc</code> can still lag. This slows down autocomplete, error checks, and general development in VSCode.</p>
<p>I wanted things to feel faster, without breaking production builds.</p>
<p>Then I found <a target="_blank" href="https://github.com/microsoft/typescript-go"><code>tsgo</code></a>, a TypeScript compiler built in Go. It’s much faster. But it’s not a full replacement for <code>tsc</code>. Some tools expect <code>tsc</code> to behave a certain way, and <code>tsgo</code> doesn’t match that exactly. Use with care.</p>
<h2 id="heading-easy-way-to-make-typescript-fasterhttpsgithubcommicrosofttypescript-go"><strong>Easy Way to Make TypeScript Faste</strong><a target="_blank" href="https://github.com/microsoft/typescript-go"><strong>r</strong></a></h2>
<p>Use <code>tsgo</code> only inside VSCode and not for building your app. This makes type-checking, autocomplete, and errors faster, while keeping <code>tsc</code> for builds and CI. Fast where it matters, safe where it counts.</p>
<p>Steps:</p>
<ul>
<li><p>Install the <strong>TypeScript (Native Preview)</strong> extension in VSCode</p>
</li>
<li><p>Install <code>tsgo</code> in your project</p>
</li>
<li><p>Set VSCode to use <code>tsgo</code> as the TypeScript server</p>
</li>
<li><p>Don’t remove <code>tsc</code>. Keep it in <code>devDependencies</code> and use it in <code>tsconfig.json</code>, build scripts, and CI jobs.</p>
</li>
</ul>
<h2 id="heading-deep-dive"><strong>Deep Dive</strong></h2>
<h3 id="heading-under-the-hood-how-the-tsgo-setup-works"><strong>Under the Hood: How the tsgo Setup Works</strong></h3>
<p>VSCode doesn't run your project's <code>tsc</code> when showing type errors. It uses its own TypeScript server, which interprets your code through a bundled TypeScript SDK. That SDK is swappable.</p>
<p>By pointing the editor to a custom SDK backed by <code>tsgo</code>, you override the default runtime used for language features without touching build tools or scripts. This creates a forked workflow:</p>
<ul>
<li><p><strong>Editor</strong>: uses <code>tsgo</code> for rapid feedback</p>
</li>
<li><p><strong>Build</strong>: still uses <code>tsc</code> to ensure correctness and compatibility</p>
</li>
</ul>
<p>This separation isolates the speed boost to development only, avoiding compatibility issues with things like:</p>
<ul>
<li><p><code>tsc --build</code> mode</p>
</li>
<li><p>Project references</p>
</li>
<li><p>Babel transforms that depend on TypeScript emit</p>
</li>
</ul>
<p>You get a lighter TypeScript experience during coding, while builds remain stable.</p>
<h3 id="heading-code-walkthrough-demo"><strong>Code Walkthrough / Demo</strong></h3>
<p><strong>Step 1: Install</strong> <code>@typescript/native-preview</code> This package contains the patched TypeScript SDK that knows how to invoke <code>tsgo</code>. Install it locally:</p>
<pre><code class="lang-powershell">npm install -<span class="hljs-literal">-save</span><span class="hljs-literal">-dev</span> @typescript/native<span class="hljs-literal">-preview</span>
</code></pre>
<p>This ensures the tooling stays project-scoped and versioned.</p>
<p><strong>Step 2: Install the VSCode Extension</strong> Install the <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=TypeScript.typescript-native-preview"><strong>TypeScript (Native Preview)</strong></a> extension from the VSCode marketplace. This extension allows VSCode to switch its TypeScript server to the native Go-powered one.</p>
<p><strong>Step 3: Enable</strong> <code>tsgo</code> in VSCode Settings Update your project-level <code>.vscode/settings.json</code>:</p>
<pre><code class="lang-json">{
  <span class="hljs-attr">"typescript.experimental.useTsgo"</span>: <span class="hljs-literal">true</span>
}
</code></pre>
<p>This directs the Native Preview extension to use <code>tsgo</code> as its engine for TypeScript diagnostics.</p>
<p><strong>Step 4: Verify Compatibility</strong> Before trusting the editor, confirm that <code>tsgo</code> parses your current config correctly:</p>
<pre><code class="lang-powershell">npx tsgo -<span class="hljs-literal">-project</span> ./tsconfig.json
</code></pre>
<p>If this fails, it’s likely due to unsupported options or syntax. Do not proceed until this passes. This step confirms the Go-powered compiler can interpret your setup.</p>
<h3 id="heading-challenges-amp-tradeoffs"><strong>Challenges &amp; Tradeoffs</strong></h3>
<p><strong>1. Not a Full Replacement</strong> <code>tsgo</code> only supports a subset of <code>tsc</code> functionality. It skips emit logic, type emit transformations, and rarely-used compiler flags. This makes it fast, but incomplete. Using it in build pipelines or scripts will break under non-trivial setups.</p>
<p><strong>2. Misleading Error Surfaces</strong> Because <code>tsgo</code> runs in the editor only, its diagnostics may slightly diverge from actual <code>tsc</code> output. It’s rare, but in complex projects with transformers or custom emit targets, you may get false negatives or miss real errors until build time.</p>
<p><strong>3. CI/CD Blind Spot</strong> If you mistakenly switch your build scripts to rely on <code>tsgo</code>, you risk subtle breakages in your pipeline. Most tooling expects canonical <code>tsc</code> behavior. Keep <code>tsgo</code> scoped to local development only.</p>
<p><strong>4. IDE Dependency</strong> The performance gain only applies within VSCode. External tooling, test runners, and linters still rely on <code>tsc</code>, so global performance won’t change unless you’re running everything in the editor.</p>
<p><strong>5. Extension and SDK Sync</strong> The <code>@typescript/native-preview</code> version and the VSCode extension must stay in sync. If the SDK updates but the extension doesn’t, or vice versa, you may see version mismatches or degraded editor support.</p>
<p><strong>6. Fixing Auto-Import Issues</strong> If auto-imports stop working after switching to <code>tsgo</code>, install the <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=steoates.autoimport">Auto Import — steoates</a> <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=steoates.autoimport">extension for VSCode.</a> It restores import suggestions using your <code>tsconfig</code> paths and works well with <code>tsgo</code>.</p>
<p>Use <code>tsgo</code> as a scoped optimization, not a build foundation. Treat it as a dev-only patch layer.</p>
<h2 id="heading-results-takeaways"><strong>Results / Takeaways</strong></h2>
<p>After integrating <code>tsgo</code> into my editor workflow, TypeScript feedback became near-instant. Error squiggles, autocomplete, and refactor previews all responded faster, especially in large monorepos or deeply nested modules.</p>
<p>Build times remained untouched. CI pipelines stayed stable. No regressions appeared, since <code>tsc</code> still handled all production and testing tasks.</p>
<p>The separation proved effective:</p>
<ul>
<li><p>Faster iteration during development</p>
</li>
<li><p>Full correctness during build</p>
</li>
<li><p>Zero change to deployment logic</p>
</li>
</ul>
<p>The only caveat: treat the setup as non-global. If you work across multiple repos, you’ll need to configure each one independently. This is a one-time cost that pays off with every keystroke.</p>
<h2 id="heading-further-exploration"><strong>Further Exploration</strong></h2>
<p>Want to try this setup in your project? Start with a side branch. Run <code>npx tsgo --project ./tsconfig.json</code> to confirm compatibility before enabling it in the editor.</p>
<p>If you've used <code>tsserver</code> performance hacks before, compare them directly with <code>tsgo</code> and watch the difference.</p>
<blockquote>
<p>Pro Tip: Keep your <code>.vscode/settings.json</code> project-scoped and committed. That way, your entire team benefits from the same dev feedback loop without affecting builds.</p>
</blockquote>
<p>Repo: <a target="_blank" href="https://github.com/microsoft/typescript-go">tsgo on GitHub</a> Related: <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.native-preview">TypeScript (Native Preview) Extension</a> Reading: <a target="_blank" href="https://www.typescriptlang.org/tsconfig#incremental">TypeScript Performance Docs</a></p>
]]></content:encoded></item></channel></rss>