Welcome to the Mastering TypeScript series, there are dozens of articles in this series. To help readers better consolidate their knowledge of TypeScript, I have selected a few dozen challenges from the type-challenges repository on Github to complete the type challenge with you.

Challenge

Implement a generic PartialByKeys<T, K> which takes two type argument T and K.

K specify the set of properties of T that should set to be optional. When K is not provided, it should make all properties optional just like the normal Partial<T>.

For example:

interface User {
  name: string
  age: number
  address: string
}type UserPartialName = PartialByKeys<User, 'name'> 
// { name?:string; age:number; address:string }

Solution

Our type challenge is to implement the PartialByKeys<T, K> generic, When K is not provided, it should make all properties optional just like the normal Partial<T>. So let’s first understand what Partial<T> generic does.

Partial<T>

Constructs a type with all properties of Type set to optional.

Partial<T> is TypeScript’s built-in utility type, which is defined in the typescript/lib/lib.es5.d.ts file:

/**
 * Make all properties in T optional. 
 * typescript/lib/lib.es5.d.ts
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

The Partial<T> generic uses TypeScript’s mapped type internally, and its syntax is as follows:

Where P in K is similar to the JavaScript for...in statement, which is used to iterate through all types in type K, and the type variable T, which is used to represent any type in TypeScript.

You can also use the additional modifiers read-only and question mark (?) in the mapping process. The corresponding modifiers are added and removed by adding the plus(+) and minus(-) prefixes. The default is to use the plus sign if no prefix is added.

After introducing the relevant knowledge of mapped types, the idea of ​​​​implementing the PartialByKeys<T, K> generic is very simple.

As can be seen from the above figure, we only need to select the properties associated with K, set them as optional and generate a new object type, then build another object type based on the remaining properties, and finally use the & operator to convert the above two object types are combined into a new object type.

If you want to learn more about intersection types, you can read this article.

Complete code

Finally, let’s look at the complete code:

TypeScript 4.1 allows us to remapping keys in mapped types using the as clause. Its syntax is as follows:

type MappedTypeWithNewKeys<T> = {
    [K in keyof T as NewKeyType]: T[K]
    //            ^^^^^^^^^^^^^
    //            New Syntax！
}

where the type of the NewKeyType must be a subtype of the string | number | symbol union type. In the process of remapping the keys, we can filter the keys by returning the never type.

The role of the Merge generic is to merge object types. In addition to the above solutions, there is a more concise way.

type PartialByKeys<T, K = keyof T> = Merge<
  {
    [P in keyof T as P extends K ? P : never]?: T[P]
  } & Pick<T, Exclude<keyof T, K>
>

In the above code, we are using TypeScript’s built-in Pick utility type, if you want to learn more about this generic type, you can read the following article:

The main knowledge involved in this challenge is TypeScript’s mapped types. If you want to learn more about mapped types, you can read the following article:

If you have other solutions, you can give me a message. you also can follow me on Medium or Twitter to read more about TS and JS!

Resources

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo