Typescript 泛型不适用于 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

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
}

Answer 2

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]; } { 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 3

This seems to be a limitation of type aliases.

interface Foo  { name: string }

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




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

Behaves as expected.