Use opaque types to improve typing on basic types

#typescript

Have you ever wanted to give a string field a type alias?

In TypeScript, these are interchangeable:

type Username = string;
type Password = string;

That means that even if we type parameters with A and B:

function logIn(username: Username, password: Password) {}

const username: Username = "username";
const password: Password = "password";

logIn(username, password);

TypeScript won’t stop us from mixing them up:

function logIn(username: Username, password: Password) {}

const username: Username = "username";
const password: Password = "password";

logIn(password, username);

Opaque types is a way to let TypeScript understand what we’re really after, and will make TS shout at us when using the types wrong, just as it would with any other complex type:

type Username = Opaque<string, "Username">;
type Password = Opaque<string, "Password">;

function logIn(username: Username, password: Password) {}

const username: Username = "username";
const password: Password = "password";

logIn(password, username); // 🚨🚨🚨