TypeScript's new type

Issue #259.February 1, 2024.2 Minute read.
Bytes

Today’s issue: Discovery’s new JavaScript series, new ways to cheat on technical interviews, and the open source urge to start a hosting company.

Welcome to #259.


Eyeballs logo

The Main Thing

Gus Fring taking a fake snapchat that says, oh u freaky freaky

When you see someone on your team using beta utility types in production

TypeScript’s new type

As the forces of technological and societal entropy plunge our world into increasing chaos, at least we know there are three things we can always count on: Linus Torvalds flaming Linux contributors, women getting snubbed by the Oscars, and TypeScript’s steady release schedule.

The TS team has released a new update every quarter like clockwork for the past seven years — and they’re back at it with a brand new 5.4 (beta) release that introduces some meaningful new features you should know about:

  • NoInfer utility type: This gives you a more straightforward way to specify which types you want TypeScript to infer vs ignore in a generic function. Just surround a type with the NoInfer<...> utility, and that tells TypeScript not to dig in and match against the inner types of the function to find candidates for type inference.

  • Type narrowing improvements: This refers to TypeScript’s ability to figure out a more specific type for your variable based on checks you perform. But historically, these narrowed types weren’t always preserved within function closures, which was annoying to deal with. TS 5.4 introduces improvements that make type narrowing smarter, so it just works in this scenario 🙏.

  • Checked import attributes: Runtimes can now customize and more accurately describe their import attributes, because import attributes and assertions are now checked against the global ImportAttributes type.

Bottom Line: TypeScript releases are a lot like the show New Girl — it’s not the most exciting thing in the world, but it’s remarkably consistent. Also, neither of them follow SemVer.

        

Pieces logo

Our Friends
(With Benefits)

One professional wrestler tagging another one into the ring

Pieces and Gemini teaming up to make me a 10x developer

Pieces joined forces with Gemini to create the ultimate copilot

Just download the free Pieces desktop app, and you’ll instantly get the power of Google’s Gemini LLM embedded into your entire workflow.

Here’s how it works:

  • The app integrates seamlessly with your IDE, browser extensions, and other devtools - so you can ask Gemini for personalized help anywhere in your workflow, without context switching (see docs).

  • Pieces uses Retrieval Augmented Generation (RAG) to add relevant context, allowing Gemini to provide more accurate code generation, debug code for you, and answer questions about entire repos.

  • The app understands code, text, screenshots, and videos - and it learns from your conversations to help Gemini become more helpful over time.

Download the app for free on macOS, Windows or Linux – and see for yourself why it’s significantly more powerful than other copilot tools.


Spot the Bug logo

Spot the Bug

Sponsored by Datadog

Their Google Kubernetes Engine Cheatsheet shows you how to visualize performance of your GKE containers to improve your application’s performance.

const products = [
  { name: "Shirt", price: 20, discount: true },
  { name: "Pants", price: 50, discount: false },
  { name: "Hat", price: 15, discount: true },
  { name: "Socks", price: 5, discount: true },
];

const discountThreshold = 30;
const discountRate = 0.1;

const totalCost = products.reduce((acc, product) => {
  if (product.discount) {
    if (product.price > discountThreshold) {
      acc += product.price * (1 - discountRate);
    } else {
      acc += product.price;
    }
  } else {
    acc += product.price;
  }
}, 0);

console.log(`Total cost: ${totalCost}`);

Cool Bits logo

Cool Bits

  1. The Nx team is hosting Launch Nx all next week. They’re announcing new features every day and hosting a free online conference with lots of great speakers on Thursday. It’s the perfect thing to watch while you pretend to work on all those Jira tickets you’ve been procrastinating. [sponsored]

  2. Roman Maksimov wrote an in-depth article about The myths vs the realities of the event loop. If this post does numbers, the Discovery Channel promised to turn it into a pilot episode of MythBusters: JavaScript Edition.

  3. Nuxt 3.10 just came out with experimental shared asyncData when pre-rendering, client-side Node.js support, better cookie reactivity, and more.

  4. Coherence created a Platform-as-a-Service with automated environments and pipelines that let you easily deploy and scale your cloud infrastructure using AWS or GCP. It gives you a similar experience to platforms like Vercel and Heroku, but much more flexible and with no vendor lock-in. [sponsored]

  5. Michael Mroczka ran an experiment to answer the question we’re all thinking but too afraid to ask, How hard is it to cheat with ChatGPT in technical interviews?

  6. Josh Goldberg wrote about Why you probably don’t need eslint-config-prettier or eslint-plugin-prettier.

  7. StyleX just released v0.5.0 of their styling system that powers most of Meta’s applications. It comes with a new stylex.attrs function, a new official Esbuild plugin, and more.

  8. Stephanie Eckles wrote about 12 Modern CSS One-Line Upgrades that even the laziest developers can get behind.

  9. React Cosmos just launched v6.0 of their sandbox for developing and testing UI components in isolation. This release has been baking for two years and includes a full-stack plugin system and first-class support for RSC.

  10. Vite just hit 10 million weekly npm downloads. What’s even more impressive is how they’ve managed to repress the urge to start a hosting company and raise 10 million dollars.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Datadog

Total cost is undefined. The reduce function is missing a return statement. The reduce function should return the accumulator after the iteration is complete.

const products = [
  { name: "Shirt", price: 20, discount: true },
  { name: "Pants", price: 50, discount: false },
  { name: "Hat", price: 15, discount: true },
  { name: "Socks", price: 5, discount: true },
];

const discountThreshold = 30;
const discountRate = 0.1;

const totalCost = products.reduce((acc, product) => {
  if (product.discount) {
    if (product.price > discountThreshold) {
      acc += product.price * (1 - discountRate);
    } else {
      acc += product.price;
    }
  } else {
    acc += product.price;
  }
  return acc;
}, 0);

console.log(`Total cost: ${totalCost}`);