Latest React, Electron, and TypeScript Releases + Must‑Know Tools

News

React 18 Enters Beta

On the 16th of this month, the React team announced that React 18 has progressed from Alpha to Beta, improving stability for upcoming releases.

Electron 16.0.0 Released

Electron version 16.0.0 is now available, bringing updates and bug fixes to the popular desktop application framework.

TypeScript 4.5 Released

Key updates in this release include:

Template literal types can be used as discriminants for type inference.

New module configuration es2022 enables top‑level await syntax.

Tail‑call recursion elimination in conditional types.

Support for the new type import modifier.

Example of discriminated union usage:

export interface Success {
  type: `${string}Success`;
  body: string;
}

export interface Error {
  type: `${string}Error`;
  message: string;
}

export function handler(r: Success | Error) {
  if (r.type === 'HttpSuccess') {
    // r is inferred as Success
    let token = r.body;
  }
}

New module configuration example:

import type { BaseType } from './some-module.js';
import { someFunc } from './some-module.js';

export class Thing implements BaseType {
  // ...
}

Rewritten import using the new type modifier:

import { someFunc, type BaseType } from "./some-module.js";

export class Thing implements BaseType {
  // ...
}

Open Source

Zod

Zod is a static type‑validation library for TypeScript, useful for building end‑to‑end type‑safe frameworks such as BlitzJS. The repository is colinhacks/zod .

tsd

tsd provides a command‑line tool for testing TypeScript type definitions, allowing unit testing of utility types. Repository: SamVerschueren/tsd .

Vitedge

Vitedge adds Edge‑Side Rendering (ESR) support to Vite, enabling full‑stack rendering capabilities. Repository: frandiox/vitedge .

Article

TypeScript – More on Functions

An article exploring advanced function patterns in TypeScript.

TypeScript – Narrowing

The article demonstrates various type‑narrowing techniques with case‑by‑case examples.

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

Using discriminated unions to resolve type inference errors:

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

function isFish(pet: Fish | Bird): pet is Fish {
  return Boolean((pet as Fish).swim);
}

function petFuncCall(pet: Fish | Bird) {
  if (isFish(pet)) {
    // pet is Fish
    pet.swim();
  } else {
    // pet is Bird
    pet.fly();
  }
}

If the return type of isFish is declared simply as boolean instead of pet is Fish, TypeScript cannot correctly narrow the type.

Svelte Implementation Principles

The article examines Svelte's compilation output to explain how the framework works, offering a clear and accessible overview.