Type Inference Enhancement of Handler Args

🔍 Search Terms

"type inference", "type narrowing"

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

Introduction

When I write React codes with TypeScript, I sometimes define Props as the following.

type Props = ({
  parentIds: string[];
  onChange: (event: { id: string }) => void
  onChange2: () => void
} | {
  parentIds?: never;
  onChange: (event: { id: number }) => void;
})

It says, "When parentId is passed, string id is passed to onChange handler and you can use onChange2. If it is not passed, number is is passed to onChange handler".

But it doesn't work correctly. When I use it, as the following

function Component(props: Props) {
  return null
}

function App() {
  return (                                 
    <Component 
      parentIds={[]}
      // Expected: Parameter e is { id: string }
      // Actual: Parameter 'e' implicitly has an 'any' type.(7006)
      onChange={e => {
        if (e.id) {
          // Do nothing
        } else {
          // Do nothing
        }
      }}
      onChange2={() => {
        console.log("parentId is detected as string[]")
      }}
    />
  )
}

The parameter e of onChange is inferred as any, not { id: string }.
I can pass onChange2 handler so it seems type narrowing works, but type inference of the args of handler doesn't work.

Suggestion

How about enhancing type inference in such case?

demo:
https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSYBPMJOABRzAGc4BeOACgG9S44wURAHYwAkgBMAXHCYwowIQHMA2gF0A3LzgQhAYQAWKJUmkckANyQjpXOMCky5CxXAC+ASjYA+OOYj2tHQMjRSQAJlNPVh8-ANc4AB84Hj4BYTFxAH5pIQskKE0+IMNjUzzrZLsHIQBXEAAjfLcomP9xTQ9yTBqhDGAdOAA5HQBxK3zgNF1cSFyRDjBGJmkGCGZPFLgiGBqoIThagBtD0lcunr6BgEEwMA4NrW3d-Y4+N-ePz6-PrT4AHmGQjGuXkUxmOis8F+bzSkIkrC4ajOnwA9Ci4ABRAAeNAwSAcdEEKBASBgTVowBYtns0lk8iUbmhfDRcCuGBqKEOKyJJLJUDgAHIkAK7OBDpNgDBDpQ4IYWEZBUZKCKqDQAHQcADsAAZtQA2dxM7R6EqhBG0aLJI18YCYThINX2B7fZnogAiEAOEBg+mc1rccCQhyYtE23xZHq9Pr932RH1ccfexRC4QR928Vu+aB0TAghwdhwgig4+FhIgkdhY4lJSDx4jgKBYdOcanwhs+CehKK8WkNriAA

📃 Motivating Example

When you want to use same function or component for various purposes.

💻 Use Cases

1. What do you want to use this for?
2. What shortcomings exist with current approaches?
3. What workarounds are you using in the meantime?

リンクされた TypeScript Playground の例を再現し、handler パラメーターに対する implicit-any 診断 (7006) を確認します。ソースファイルもテストも指定されていないため、まず type-inference と contextual-typing のエントリーポイントを特定し、その後、既存の narrowing の動作を維持しながら、パラメーターが { id: string } として推論されることを示すテストを作成します。