Narrowed const variables are widened in block-scoped closures

[kirkwaiblinger]

🔎 Search Terms

narrowing, cfa, closure,

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about n/a

⏯ Playground Link

https://www.typescriptlang.org/play/?noUncheckedIndexedAccess=true&target=99&ts=5.8.0-dev.20250209#code/CYUwxgNghgTiAEYD2A7AzgF3mgXNjMAligOYDcAUBYQGbwAUa8AvK-AOQ1JLsCU8AbwrwRiVJmwBBCIShNm2SqPg0ArijAZCqeACMowevyHLlydFi5I8nbuxaLhogL5VlajVp0luh409MxCxVuGyt7BTRpWTQlFwpXChAADwAHJBgsAWcgA

💻 Code

declare const s: string;

if (s === 'foo') {
    function bad() {
        const foo: 'foo' = s;
    }
}

// in non-strict code bad() might be accessible outside of the narrowed branch,
// so make sure we're strict
export {}

🙁 Actual behavior

error trying to use the variable as its narrowed value.

🙂 Expected behavior

No error. bad() is a local function only reachable within the scope in which s has been definitely narrowed to 'foo'.

Additional Information

Found organically in typescript-eslint/typescript-eslint#10182 (comment) (with a narrowed member access corollary)

[felipe-gustavo]

Same for "strictNullChecks":

declare const foo: {
  bar?: symbol[]
}

function main() {
  if (!foo.bar) {
    throw new Error()
  }

  const fooBar = () => {
    foo.bar
    //  ^? (property) bar?: symbol[] | undefined

    foo.bar.push(Symbol())
    // ~~~~ 'foo.bar' is possibly 'undefined'. (18048)
  }
}

TS Playground

---

Workaround

Redefine the variable in the narrowed scope

declare const foo: {
  bar?: symbol[]
}

function main() {
  if (!foo.bar) {
    throw new Error()
  }

  const { bar } = foo

  const fooBar = () => {
    bar
    //  ^? const bar: symbol[]

    bar.push(Symbol())
  }
}

In @kirkwaiblinger's case:

declare const s: string;

if (s === 'foo') {
    const aliasForS = s
    function bad() {
        const foo: 'foo' = aliasForS;
    }
}

[milkcask]

Same for

(() => {
    if (s !== 'foo') return;
    const sAlias = s;
    function bad() {
        const foo: 'foo' = s;
    }

    function good() {
        const foo: 'foo' = sAlias;
    }
})()

TS Playground