Distinguish between two varieties using parameters

Question

Distinguish between two varieties using parameters

Let's consider the following simplified example:

type Reference<T extends {identifier: string}> = T['identifier']

In this type, TypeScript recognizes that it is a reference to an object where the identifier property is of type string. However, how can we make TypeScript treat two different identifiers as distinct strings?

For example, if we have the following incorrect assignment:

let blogRef: Reference<Blog> = ...
let userRef: Reference<User> = ...

// TypeScript allows this even though they are both strings:
blogRef = userRef

This is logically incorrect. Is there a way to enforce this as a compile-time check in TypeScript?

typescript types

Answer 1

Answer №1

type simply creates a type alias for another type. In this scenario, both Ref<Blog> and Ref<User> are essentially the same as the type string, making them fully interchangeable.

To make differently branded strings (or any type) incompatible, you can utilize branded types. These types leverage TypeScript's method of determining type compatibility (structural compatibility):

class Blog {
    id: string  & { brand: 'blog' }
}

class User {
    id: string  & { brand: 'user' }
}

type Ref<T extends {id: string}> = T['id']

function createUserId(id: string) : Ref<User> {
    return id as any
}

function createBlogId(id: string) : Ref<Blog> {
    return id as any
}

let refBlog: Ref<Blog> = createBlogId("1");
let refUser: Ref<User> = createUserId("1");


refBlog = refUser // error

You will need to define helper functions that generate instances of the types or use type casting, but with this approach, the types will be incompatible.

This article delves further into this topic. Additionally, the TypeScript compiler employs this strategy for handling paths.

Answer 2

type simply creates a type alias for another type. In this scenario, both Ref<Blog> and Ref<User> are essentially the same as the type string, making them fully interchangeable.

To make differently branded strings (or any type) incompatible, you can utilize branded types. These types leverage TypeScript's method of determining type compatibility (structural compatibility):

class Blog {
    id: string  & { brand: 'blog' }
}

class User {
    id: string  & { brand: 'user' }
}

type Ref<T extends {id: string}> = T['id']

function createUserId(id: string) : Ref<User> {
    return id as any
}

function createBlogId(id: string) : Ref<Blog> {
    return id as any
}

let refBlog: Ref<Blog> = createBlogId("1");
let refUser: Ref<User> = createUserId("1");


refBlog = refUser // error

You will need to define helper functions that generate instances of the types or use type casting, but with this approach, the types will be incompatible.

This article delves further into this topic. Additionally, the TypeScript compiler employs this strategy for handling paths.

Distinguish between two varieties using parameters

Answer №1

Similar questions

Trouble with Typescript in VSCode made easy

Is there a way to duplicate the method signature and apply it to a different method?

What is the best method for transferring chosen items to a different multiple select using Angular?

What is the best way to track events in angular-meteor when a user logs in, logs out, or when there is a change in the user

Transforming TypeScript snapshot data in Firebase Cloud Functions into a string format for notification purposes

What is the best way to create an array of strings that can include multiple elements from a set of strings?

The setInterval function continues executing even after the page has been changed

When the child component's form is marked as dirty, the parent component can access it

TS1057: It is required that an async function or method has a return type that can be awaited

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

Detecting the language of a browser

How can I implement a dynamic progress bar using Ionic 4?

Utilizing the Filter Function to Eliminate an Element from an Array

What is the recommended TypeScript type to be returned from a GraphQL resolver when using ESLint?

Issue regarding retrieving the image using TypeScript from an external API

Is there a way to dynamically change an icon based on certain conditions using typescript?

Is there a way to transform a complex nested class object into a simple object without losing its methods

Improving the management of user input in Lit components

Angular 7: Polyfill required for npm package to support 'Class'

What is the reason behind typescript making it necessary for me to find a way to set a value of type