Typescript generics does not work with Readonly

Question

Let's have the following simplified example in TypeScript:

type Foo = { name: string } | undefined

function fooWorks<T extends Foo>(input: T) {
    return input?.name // ok
}

function fooErrors<T extends Foo>(input: Readonly<T>) {
    return input?.name // error
}

Why fooWorks works, but fooErrors does not?

Answer 1

The following will preserve the Readonly type and undefined as desired:

function fooErrors<T extends Readonly<Foo>>(input: T) {
    return input?.name // works
}

Note: we set Readonly in the generic constraint and don't wrap it around the parameter type.

The reason, why fooErrors<T extends Foo>(input: Readonly<T>) causes issues is: TypeScript does not process unresolved generic type parameters (like T) further. Readonly essentially is a mapped type. So in the function body, input has type { readonly [P in keyof T]: T[P]; }, which unfortunately is not assignable back to T and its constraint Foo. From the compiler's perspective property name on the parameter cannot be found anymore.

Playground code

Answer 2

It gives the following error:

Property 'name' does not exist on type NonNullable.

The problem is, that the TypeScript compiler does not understand the subtle type narrowing here and throws a compile-time error as stated here (though, I am not 100% sure about how helpful this blog post is for you).

Removing undefined from Foo works:

type Foo = { name: string }

function fooWorks<T extends Foo>(input: T) {
    return input?.name
}

function fooErrors<T extends Foo>(input: Readonly<T>) {
    return input?.name
}

Or you can add the NonNullable type excluding null and undefined from T, which results in input being { name: string }:

type Foo = { name: string } | undefined

function fooWorks<T extends Foo>(input: T) {
    return input?.name
}

function fooErrors<T extends Foo>(input: Readonly<NonNullable<T>>) {
  return input.name
}