microsoft / microsoft/TypeScript

Cannot assign to ... because it is a read-only property when using type guard in ctor

Open
#37,823 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Domain: classes Help Wanted
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

A common pattern is declaring narrower types for members in derived classes. However, when combined with type guards, assignement to readonly members fails with an unexpected "Cannot assign to ... because it is a read-only property" error.

TypeScript Version: 3.7.2

Search Terms:
class member read-only property type narrowing covariant type guard

Code

class Foo {
    public readonly x: string | number;

    constructor() {
        if (isBar(this))
            // error TS2540: Cannot assign to 'x' because it is a read-only property.
            this.x = 'string';
        else
            // no error here
            this.x = 123;
    }
}

class Bar extends Foo {
    // Declare narrower type for member in derived class
    public readonly x: string;
}

function isBar(foo: Foo): foo is Bar {
    return foo instanceof Bar;
}

Expected behavior:

Assignment to this.x should be allowed with or without type guard in the constructor

Actual behavior:

error TS2540: Cannot assign to 'x' because it is a read-only property.

Playground Link:

https://www.typescriptlang.org/play/?ssl=2&ssc=1&pln=22&pc=1#code/FAYwNghgzlAEBiB7RsDexadgBwK4CMwBLEWAJwFMIATRAOzAE9YAPALligBcyi6BzWAB9YdXAFt8FMgG5gGLCHrcyuEF0RkAFAEo0CrFiIAzWFqJQAQhG1cAFhZ06Dh1wHo3saWU2wAKgDKAEwArAAsAAwcAMIQdHSIXLDQUET8dLAasADkLNmwUiAQuFAUsERJFsnkVNQAtPRMOD7Y0lyMAHQurlj2Fh0ssAC8sACMQQDMcj2YFGCl3TMeoijevnbSFIs9fVADw2OT01gAvsBnoJAwsNZkXixcFHTUcEgo6IZ4hCQ1NI3M7E4PD4-DkF2MuDo6iI9HKVhsWmMyA4bx0HCRKCqt30hkoXFwZAyGPKdG4cRAFEQpluYOAQA

Related Issues:

It is as if the type guard creates an invisible alias (cf https://github.com/microsoft/TypeScript/issues/14241), and asignment inside the type guard fails.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the TypeScript 3.7.2 example in the linked Playground and compare the guarded and unguarded assignments. Trace the compiler's type-guard and readonly-property checks, then add a regression test for the example. Done means both constructor assignments are accepted without producing TS2540.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
compilers
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.