An alternative solution to Typescript enums

Paul Guilbert — Sat, 09 Dec 2023 23:07:28 +0000

Enums are quite handy to define a set of named constants. In the TypeScript world, enums hold a unique position as both a type and a value.

However, enum comes with drawbacks...

Enums and const enums, are an exception to the Typescript structural typing. Meaning that Level1.INFO !== Level2.INFO !== 'INFO' even when both Level1.Info and Level2.INFO are set to 'INFO'.
Enums are not necessarily enumerable at runtime, and Object.values(MyEnums) can have unexpected results.
Enums and const enums, are more a legacy feature than a recommended one.

Let's take an example:

enum Level {
  VERBOSE = 'VERBOSE',
  NORMAL = 'NORMAL',
  DEBUG = 'DEBUG'  
}

function log(level: Level) {}

log('DEBUG') // 💥 Argument of type '"DEBUG"' is not assignable to parameter of type 'Level'
log(Level.DEBUG) // ✅

const allLevels = Object.values(Level) 
// allLevels = ["NONE", 0, "VERBOSE", "NORMAL", "DEBUG"] 🤔

While it operates as intended, the behavior of enums may seem somewhat strange to a TypeScript user.

The alternative solution

Fortunately, TypeScript offers features that, when combined, provide similar functionality to enums:

const object
union type
value and a type can coexist with the same name

This leads to the following code that "fixed" the unwanted behavior of enums:

const Level = {
  NONE : 0,
  VERBOSE: 'VERBOSE',
  NORMAL: 'NORMAL',
  DEBUG: 'DEBUG'
} as const
type Level = (typeof Level)[keyof typeof Level]

function log(level: Level) {}

log('DEBUG') // ✅
log(Level.DEBUG) // ✅


const allLevels = Object.values(Level) 
// [0, "VERBOSE", "NORMAL", "DEBUG"] ✅

The clear advantage of this approach is that, in most cases, it's possible to seamlessly replace enums without modifying existing code that uses them.

Additionally, the union type can be simplified using the utility type:

type UnionOfPropertyTypes<T extends object> = T[keyof T]

Resulting in a cleaner declaration:

const Level = {
  NONE : 0,
  VERBOSE: 'VERBOSE',
  NORMAL: 'NORMAL',
  DEBUG: 'DEBUG'
} as const
type Level = UnionOfPropertyTypes<typeof Level>

A reason to choose React Native over Flutter for your next web application

Paul Guilbert — Thu, 18 May 2023 10:15:54 +0000

This post aims to summarize my thoughts on Flutter vs. React Native specifically for web development.

Flutter

The purpose of Flutter Web is not to create websites; rather, it focuses on making apps available in the browser. Embracing web standards is not the objective here, instead, the goals are to ensure fidelity and consistency across platforms. For that, with the help of CanvasKit, the browser functions as a Flutter screen, enabling the rendering of your mobile/desktop app within a canvas, and bypassing many built-in browser features. This is why the Flutter documentation states the following:

Not every web page makes sense in Flutter, but we think Flutter is particularly suited for app-centric experiences:

Progressive Web Apps

Single Page Apps

Existing Flutter mobile apps

React Native

React Native shares a similar objective, which is to ensure cross-platform consistency. However, when it comes to web development, React Native has a significant advantage: it relies on JavaScript, HTML, and CSS. No need to download a 2MB web assembly; no need to reimplement the wheel to make the scrollbar work or hack the accessibility tree to make the canvas accessible: React Native Web relies on the browser rendering engine and existing javascript APIs.

Conclusion

It makes a lot of sense to choose Flutter if you are already familiar with Dart or if you intend to migrate an existing Flutter app to the web. But otherwise, if you make a web app and plan to target other platforms in the future I would not hesitate to go with React Native!

Obviously, you should compare Flutter and React Native on Android and iOS to make a final choice (and that would deserve another post). However, whatever you read elsewhere, don't forget that you can use skia (Flutter's engine) inside a React Native application.😉

Notes: