Unraveling the complexities of Typescript's Advanced Type NonFunctionPropertyNames

Question

Unraveling the complexities of Typescript's Advanced Type NonFunctionPropertyNames

Delving deeper into the realm of advanced types in Typescript, I came across an intriguing type called NonFunctionPropertyNames. This type is designed to extract only the properties of a given object that are not functions.

type NonFunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : K }[keyof T];

Understanding the initial part within the curly brackets

'{ [K in keyof T]: T[K] extends Function ? never : K }'

is relatively clear - we are constructing an object and filtering out properties that extend Function. However, the section following the curly brackets [keyof T] appears to define an array {...}[keyof T], but it ultimately returns an object. Can someone clarify why merely using the curly brackets is insufficient for defining the type, and elucidate the purpose of [keyof T].

typescript typescript-typings

Answer 1

Answer №1

The code snippet provided demonstrates the concept of indexing into an object type to extract specific property types. For instance:

type Foo = { foo: number }['foo'] // results in 'number'

When indexing with a union of properties, the result becomes a union of all the property types involved:

type FooBar = { foo: number, bar: string, baz: boolean }['foo' | 'bar']  // yields 'string' or 'number'

Expanding this to index using all keys returns a union of all the property types present:

type FooBarBaz = { foo: number, bar: string, baz: boolean }['foo' | 'bar' | 'baz']  // provides 'string', 'number', or 'boolean'

To obtain a union of all property names, the keyof operator can be utilized as shown below:

type O =  { foo: number, bar: string, baz: boolean }
type FooBarBaz = O[keyof O]  // results in 'string', 'number', or 'boolean'

In conjunction with conditional types, it is possible to selectively assign key types based on certain conditions, such as excluding functions:

type O =  { foo: number, bar: string, baz: () => boolean }
type NonFunctionPropertyNames = { [K in keyof O]: O[K] extends Function ? never : K } // yields '{ foo: "foo", bar: "bar", baz: never }'

By combining these concepts, we can create reusable type definitions for extracting non-function keys:

type NonFunctionPropertyNames<O> = { [K in keyof O]: O[K] extends Function ? never : K }[keyof O]
type Foo =  { foo: number, bar: string, baz: () => boolean }
type NonFUnctionKeysOfFoo = NonFunctionPropertyNames<Foo> // results in 'foo' and 'bar'

Answer 2

The code snippet provided demonstrates the concept of indexing into an object type to extract specific property types. For instance:

type Foo = { foo: number }['foo'] // results in 'number'

When indexing with a union of properties, the result becomes a union of all the property types involved:

type FooBar = { foo: number, bar: string, baz: boolean }['foo' | 'bar']  // yields 'string' or 'number'

Expanding this to index using all keys returns a union of all the property types present:

type FooBarBaz = { foo: number, bar: string, baz: boolean }['foo' | 'bar' | 'baz']  // provides 'string', 'number', or 'boolean'

To obtain a union of all property names, the keyof operator can be utilized as shown below:

type O =  { foo: number, bar: string, baz: boolean }
type FooBarBaz = O[keyof O]  // results in 'string', 'number', or 'boolean'

In conjunction with conditional types, it is possible to selectively assign key types based on certain conditions, such as excluding functions:

type O =  { foo: number, bar: string, baz: () => boolean }
type NonFunctionPropertyNames = { [K in keyof O]: O[K] extends Function ? never : K } // yields '{ foo: "foo", bar: "bar", baz: never }'

By combining these concepts, we can create reusable type definitions for extracting non-function keys:

type NonFunctionPropertyNames<O> = { [K in keyof O]: O[K] extends Function ? never : K }[keyof O]
type Foo =  { foo: number, bar: string, baz: () => boolean }
type NonFUnctionKeysOfFoo = NonFunctionPropertyNames<Foo> // results in 'foo' and 'bar'

Unraveling the complexities of Typescript's Advanced Type NonFunctionPropertyNames

Answer №1

Similar questions

Can the GitHub URL be utilized for installing TypeScript npm dependencies?

Integrate the implementation of a class into an abstract controller implementation using an interface with NestJS

Alter the navigation but keep the URL intact without modifying the view

Challenges in integrating a PrimeNG Angular2 component with DynamicDialogRef, as well as the difficulties encountered when attempting to do

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

Troubleshooting import errors with Typescript for C3 and D3 libraries

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

Explicit final argument in TypeScript

Here's how you can transfer the AceEditor value to the component state in ReactJS by utilizing the onClick event of a button

Why does my array seem to update only once in the view?

Change an array of objects into a map where each object is indexed by a unique key

tsc is not recognizing the configurations in my tsconfig.json file

Deleting specialized object using useEffect hook

Accessing properties using bracket notation in Typescript is a powerful feature that

In order for the expansion parameter to be successfully used, it must be either of tuple type or passed to the

What is the best way to mandate the declaration or type of a function in TypeScript?

Dynamic table row that expands to show additional rows sourced from various data sets

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

Tips for incorporating nested generics in Typescript

How to dynamically insert variables into a separate HTML file while creating a VS Code extension