mailwal

Bytes: TypeScript Can Read Your Weird Files

Tyler from Fireship
Bytes

Today’s issue: JPEG’s new t-shirt size, a TypeScript pregnancy test, and a classic case of bundle phobia.

Welcome to #533.

Eyeballs logo

The Main Thing

White-haired man in sunglasses holds up a can of white Monster Energy

Nectar of the gods

TypeScript Can Read Your Weird Files:

What happens when you give a bunch of millennial JavaScript developers White Monsters, gas station Tornados, and access to the internet? They’re going to try and stick their JavaScript into every imaginable type of file, which explains why .jsx, .mdx, .astro, .svelte, and .vue exist.

But as we “matured” into TypeScript developers, this created a bunch of problems. In order to type check these random file types, you either needed to wrap the compiler and ship something like vue-tsc or use a project like @volar/typescript to build a language server for your project. That was until TypeScript 7.1 beta shipped this past week, which introduced a new feature called Content Mappers.

What are content mappers?

Content mappers are a new type of plugin that teaches TypeScript how to translate an arbitrary file type into a virtual TypeScript file that the type checker can use. It’s what powers reylo’s type inference for .sql files.

Here’s how they work:

  • Register a mapper: Content mappers are added via tsconfig.json and specify the file extensions they are designed to handle. They are then executed by running tsc --runExternalCode.

  • Transform the source: The mapper converts matching files into virtual TypeScript files with references to the original source. If you’re code curious, here’s an example for HTML.

  • Check the types: TypeScript checks the virtual files and uses span mappings to report errors at the correct locations in your original file. These mappings also enable code completions, hover hints, and click-to-definition navigation (if anyone still uses their IDE).

Bottom Line: Content mappers are TypeScript’s midlife crisis marathon: you atone for the sins of your past, but it’s maybe a few years too late for it to really matter 🫠.

CodeRabbit logo

Our Friends
(With Benefits)

Liam Neeson holds a phone to his ear with a stern expression

When you have someone with a "particular set of skills" watching over your codebase

Fewer findings. Only real risks.

AI-generated code can introduce vulnerabilities that are easy to miss in a pull request. CodeRabbit Security continuously reviews your codebase for complex bugs and security risks, using full-codebase context to follow data flows, dependencies, and patterns beyond the latest diff.

Run CodeRabbit Security on your own repositories today

Spot the Bug logo

Spot the Bug

Spot the Bug – Sponsored by Jam

Make your team’s bug reports easier to solve than this challenge we’re sponsoring. Use Jam’s new Mac app to record your screen with Chrome, Safari or Electron logs so devs and agents fix stuff fast.

function buildSearchUrl(tags) {
  const params = new URLSearchParams();
  tags.forEach((tag) => params.set("tag", tag));
  return `/search?${params}`;
}

console.log(buildSearchUrl(["js", "ts"]));
Cool Bits logo

Cool Bits

  1. Tanner released the well-named redact, a smaller, synchronous version of React, for those of you who still suffer from bundle phobia.

  3. Equip your AI on Apify for Black Friday and get live prices, availability, and ratings from Amazon, Walmart, eBay, or any other online store. Use code BYTES for $25 in credits. [sponsored]

  4. Remix released version 3.1, patching up some post-launch issues and making it faster so now it’s really actually ready… probably.

  5. Jake Archibald explains when to use JPEG XL rather than AVIF in his latest blog post. JPEG is also wearing size XL? The post-COVID years have been rough for all of us.

  6. James Long compared Rune’s text render to macOS text rendering, pixel by pixel. Developers with OCD are the best.

  7. Hyperagent lets you hire AI staff to take on roles across your business. They run in the cloud with their own browser, shell, and file system, connect to your tools, and hand work off to each other. Your whole team can work with the same agents—not just the person who set them up. [sponsored]

  8. Shu Ding, inspired by Cheng Lou’s latest wizardry, compiled a dashboard UI into a single math function giving new meaning to the trope UI = fn(state).

  9. Firefox 159 is out, which means scroll-driven-animations are now supported in all major browsers. I think this is a good thing.

  11. Vercel Labs created wterm, a terminal emulator for the web that renders DOM so text selection actually works 🥲.

  12. tsts is another slopfork of the TypeScript compiler, but this time it’s running inside TypeScript’s own type system? I think this is the equivalent of Doom running inside of a pregnancy test.

Spot the Bug logo

Spot the Bug: Solution

Spot the Bug – Sponsored by Jam

The URL only contains tag=ts. URLSearchParams.set() replaces the previous value for a key, so the second tag overwrites the first. Use append() to keep both values:

function buildSearchUrl(tags) {
  const params = new URLSearchParams();
  tags.forEach((tag) => params.append("tag", tag));
  return `/search?${params}`;
}

console.log(buildSearchUrl(["js", "ts"]));
Bytes
Want us to say nice things
about your company?

Built with ❤️ by Fireship

50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101