Type of variables lost when returning a function that reuses them

[MrChocolatine]

Bug Report

🔎 Search Terms

type
lost
unknown

🕗 Version & Regression Information

• This is a crash
• This changed between versions ______ and _______
• This is the behaviour in every version I tried, and I reviewed the FAQ for entries about "lost, type".
• I was unable to test this on prior versions because I started on v4.
  However I tried with every versions in the Playground and I get the same result.

⏯ Playground Link

Playground link with relevant code - v4.1.3

Playground link with relevant code - Nightly / v4.2.0-dev.20210108

💻 Code

function attachEvent(element: Element, params: Array<unknown>): undefined | (() => void) {
  let [ selector, eventType, fn ] = params

  if (
    typeof selector !== 'string'
    || typeof eventType !== 'string'
    || typeof fn !== 'function'
  ) {
    return
  }

  // `selector` is correctly seen as `string`
  let targetElem = element.querySelector(selector)

  if ( !targetElem ) {
    return
  }

  // Cast required as type `Function` is not enough for `addEventListener`
  let eventHandler = fn as () => unknown

  // `eventType` is correctly seen as `string`
  targetElem.addEventListener(eventType, eventHandler)

  // `targetElem` is back to `Object is possibly null`
  // `eventType` is now seen as `unknown` again
  return () => targetElem.removeEventListener(eventType, eventHandler)

  // Solution: non-null assertion operation + cast `as string`, but why?
  // return () => targetElem!.removeEventListener(eventType as string, eventHandler)
}

🙁 Actual behaviour

• Type of variable targetElem is lost and fallback to its initial type.
• Type of variable eventType is lost and fallback to its initial type.

🙂 Expected behaviour

Since the context does not change and their type has been narrowed down, the types of the variables targetElem and eventType should be kept.

Possible related issues

• Type inference/narrowing lost after assignment #27706

Thank you for your feedback.

[MartinJohns]

Duplicate of #9998.

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[MrChocolatine]

Despite this ticket having been closed, just a heads-up for whoever that might come across the same issue:

Declaring variables with const instead of let fixed my initial issue, see this playground with TypeScript v4.1.3.

---

To give a bit of a context, I was working on an Ember.js project and historically we had this lint rule that recommends to only use const at the top-level of any file:
https://github.com/DockYard/eslint-plugin-ember-suave/blob/5c1e256254768172aeba3e10843036d7b3503484/docs/rules/no-const-outside-module-scope.md

Since we migrated the codebase to TypeScript this rule was not relevant anymore and, as we can see, in this case it fixed the issue.