types(shared): Improve LooseRequired<T>

[browsnet]

Improve the implementation of LooseRequired<T>.

The purpose of LooseRequired<T> is to change the Optional Properties in an Object Type to required, while keeping the undefined type.

In the current version, LooseRequire is implemented as follows.

type LooseRequired<T> = { [P in string & keyof T]: T[P] }

This implementation has problems when it encounters index signatures, consider the following code.

type Result = LooseRequired<{
  [x:string]:any
  a?:1
  b:false
}>

The result here is { [x: string]: any; }

This is because when the object type contains a string index signature, the keyof T will return string, so all other properties cannot be mapped

But TypeScript keyof T is a lazy value in the case of [P in keyof T], so we can guarantee that every property can be mapped as long as we don't expand it by using keof T.

To achieve the purpose of LooseRequired<T>, we can first set all the properties of T to required and then map the corresponding types.

Here is the improved LooseRequired<T>:

type LooseRequired<T> = { [P in keyof (T & Required<T>)]: T[P] }

We can do a few tests

type Test1 = LooseRequired<{
    [x: string]: any;
    a?: 1;
    b: false;
}>

The result is :

{
    [x: string]: any;
    a: 1 | undefined;
    b: false;
}

Another example is

type Test2 = LooseRequired< {
    [x: `on${string}`]: Function;
    onHandle: () => number;
}>

The result is

{
    [x: `on${string}`]: Function;
    onHandle: () => number;
}

You can see that it avoids the attribute value merging problem caused by the keyof T being computed.

[netlify]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	489df2e
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/62c97ce44c877a000886e055

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	489df2e
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/62c97ce49ec006000a0889b5