Variant accessors for index signatures and mapped types

Suggestion

🔍 Search Terms

variant accessors index signatures record

✅ Viability Checklist

My suggestion meets these guidelines:

• 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 feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

Support for having Variant Accessors with index signature.

📃 Motivating Example

// Simple  usage

interface NumberMap { 
  get [k: string](): number;
  set [k: string](val: string | number);
}

const a: NumberMap = {} 

a.test = '1';
a.test === 1;


// more complex

// makes number properties of an object to allow set `string`
type MakeStringAsNumber<T extends Record<string, any>> = {
  get [ K in keyof T]: T[K]
  set [ K in keyof T]: T[K] extends number ? T[K] | string : T[K]
}

declare const a: MakeStringAsNumber<{ a: boolean, b: number, c: string }>
a.b = '42'; // I want to have this avalible

a.c = '112'

// @ts-expect-error 'a' is boolean
a.a = '2'

💻 Use Cases

The use case for this feature is vue 3 reactivity.

In Vue 3 there's Ref<T> (simplified as { value: T}) and Reactive<UnwrappedRef<T>> (unwraps {value: T} to T, recursive)

This feature would allow us to generate a type which can accept a Ref<T> | T

Basically:

const r = ref({ a: 1} )

r.value.a = 1

const a = reactive(r)
a.a // 1

On a reactive/ref object the set in typescript must be UnwrappedRef<T> which is not true, because when you assign to a reactive it will unwrap the value:

const r = ref({a:1});
const a = ref({
  r
}) // results in `{ r: { a: 1 } }` 

a.r = r; // typescript error  because `r` is `Ref<T>` instead of `UnwrappedRef<T>`, but it works at runtime.

まず PR #42425 のバリアントアクセサー提案と、この issue にあるインデックスシグネチャおよび mapped type の例を確認します。両方の形式で getter と setter の型がどのように振る舞うべきかを判断し、次に Vue のリアクティビティのユースケースに照らして期待される動作を検証し、JavaScript の出力が変更されないことを確認します。