After the curly brace in a type definition, what is the significance of [keyof T]?

Question

After the curly brace in a type definition, what is the significance of [keyof T]?

After reviewing the Typescript documentation found at this specific URL https://www.typescriptlang.org/docs/handbook/advanced-types.html

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

I'm curious about what exactly does that [keyof T] do after the closing brace. Can anyone provide an explanation of this syntax or point me to the relevant documentation?

typescript

Answer 1

Answer №1

That's known as a "lookup type".

keyof X retrieves all keys of a specific type
if

    interface sample {
       foo: never
       bar: string
       baz: number
    }

then type not_here = sample['foo'] will result in never

however, lookup types also allow using keyof Something, so

sample[keyof sample] would give the union of all types of properties in sample, which is never | string | number. In this case, never is excluded by TS automatically, resulting in string | number.

(you can even do sample[keyof anotherType], there's no limitation)

I find that breaking down complex types like this into smaller steps helps in understanding them better, just like I did here:

interface test {
    a: string
    b: () => void
    c: () => void
}

type T_A<T> = {
  [K in keyof T]: T[K]
};

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

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

type a = T_A<test>;
type b = T_B<test>;
type c = T_C<test>;

This approach allows you to see each step involved in achieving the desired outcome, which is "the union of keys that are functions".

Answer 2

That's known as a "lookup type".

keyof X retrieves all keys of a specific type
if

    interface sample {
       foo: never
       bar: string
       baz: number
    }

then type not_here = sample['foo'] will result in never

however, lookup types also allow using keyof Something, so

sample[keyof sample] would give the union of all types of properties in sample, which is never | string | number. In this case, never is excluded by TS automatically, resulting in string | number.

(you can even do sample[keyof anotherType], there's no limitation)

I find that breaking down complex types like this into smaller steps helps in understanding them better, just like I did here:

interface test {
    a: string
    b: () => void
    c: () => void
}

type T_A<T> = {
  [K in keyof T]: T[K]
};

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

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

type a = T_A<test>;
type b = T_B<test>;
type c = T_C<test>;

This approach allows you to see each step involved in achieving the desired outcome, which is "the union of keys that are functions".

Answer 3

Answer №2

keyof T refers to the valid keys for the type T (which you probably already knew). Adding [x] after an interface or union type selects the type of the property/member with the name x. For example (playground link):

interface Example {
    a: number;
    b: string;
}
type E1 = Example["a"];
/*
type E1 = number;
*/

The concept of "lookup types" seems to only be documented in the TypeScript 2.1 release notes here:

keyof and Lookup Types In JavaScript, it is common to have APIs that expect property names as parameters, but expressing the type relationships in those APIs has not been possible.

Index Type Query or keyof introduces indexed type query which yields the permitted property names type for T. A keyof T type is considered a subtype of string.

Example
interface Person {
  name: string;
  age: number;
  location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[]; // "length" | "push" | "pop" | "concat" | ...
type K3 = keyof { [x: string]: Person }; // string
This leads us to indexed access types, also known as lookup types. They are written exactly like element accesses but are intended as types:

Example
type P1 = Person["name"]; // string
type P2 = Person["name" | "age"]; // string | number
type P3 = string["charAt"]; // (pos: number) => string
type P4 = string[]["push"]; // (...items: string[]) => number
type P5 = string[][0]; // string
This pattern can be used within other parts of the type system to perform type-safe lookups.
function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]; // Inferred type is T[K]
}

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
  obj[key] = value;
}

let x = { foo: 10, bar: "hello!" };

let foo = getProperty(x, "foo"); // number
let bar = getProperty(x, "bar"); // string

let oops = getProperty(x, "wargarbl"); // Error! "wargarbl" is not "foo" | "bar"

setProperty(x, "foo", "string"); // Error!, string expected number

The core aspect of FunctionPropertyNames<T> generates an interface with members typed as never for properties of T that are not function-typed, while keeping the original member type for those that are. For example, as illustrated in the code snippet, by defining:

interface Part {
  id: number;
  name: string;
  subparts: Part[];
  updatePart(newName: string): void;
}

type T1 = FunctionPropertyNames<Part>;

The outcome for T1 will be "updatePart" since that's the only function-typed property of Part. Omitting the [keyof T] section would result in the interface containing the never members instead (playground link):

type FunctionPropertyNames<T> = {
  [K in keyof T]: T[K] extends Function ? K : never;
}[keyof T];
type Example<T> = {
  [K in keyof T]: T[K] extends Function ? K : never;
}/* Same as above, but without [keyof T] here*/;

interface Part {
  id: number;
  name: string;
  subparts: Part[];
  updatePart(newName: string): void;
}

type T1 = FunctionPropertyNames<Part>;
/*
type T1 = "updatePart"
*/
type E1 = Example<Part>;
/*
type E1 = {
    id: never;
    name: never;
    subparts: never;
    updatePart: "updatePart";
}
*/

The inclusion of [keyof T] ensures that FunctionPropertyNames delivers the names of the function-properties rather than the function-typed properties themselves (along with the never-typed ones).

Answer 4

keyof T refers to the valid keys for the type T (which you probably already knew). Adding [x] after an interface or union type selects the type of the property/member with the name x. For example (playground link):

interface Example {
    a: number;
    b: string;
}
type E1 = Example["a"];
/*
type E1 = number;
*/

The concept of "lookup types" seems to only be documented in the TypeScript 2.1 release notes here:

keyof and Lookup Types In JavaScript, it is common to have APIs that expect property names as parameters, but expressing the type relationships in those APIs has not been possible.

Index Type Query or keyof introduces indexed type query which yields the permitted property names type for T. A keyof T type is considered a subtype of string.

Example
interface Person {
  name: string;
  age: number;
  location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[]; // "length" | "push" | "pop" | "concat" | ...
type K3 = keyof { [x: string]: Person }; // string
This leads us to indexed access types, also known as lookup types. They are written exactly like element accesses but are intended as types:

Example
type P1 = Person["name"]; // string
type P2 = Person["name" | "age"]; // string | number
type P3 = string["charAt"]; // (pos: number) => string
type P4 = string[]["push"]; // (...items: string[]) => number
type P5 = string[][0]; // string
This pattern can be used within other parts of the type system to perform type-safe lookups.
function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]; // Inferred type is T[K]
}

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
  obj[key] = value;
}

let x = { foo: 10, bar: "hello!" };

let foo = getProperty(x, "foo"); // number
let bar = getProperty(x, "bar"); // string

let oops = getProperty(x, "wargarbl"); // Error! "wargarbl" is not "foo" | "bar"

setProperty(x, "foo", "string"); // Error!, string expected number

The core aspect of FunctionPropertyNames<T> generates an interface with members typed as never for properties of T that are not function-typed, while keeping the original member type for those that are. For example, as illustrated in the code snippet, by defining:

interface Part {
  id: number;
  name: string;
  subparts: Part[];
  updatePart(newName: string): void;
}

type T1 = FunctionPropertyNames<Part>;

The outcome for T1 will be "updatePart" since that's the only function-typed property of Part. Omitting the [keyof T] section would result in the interface containing the never members instead (playground link):

type FunctionPropertyNames<T> = {
  [K in keyof T]: T[K] extends Function ? K : never;
}[keyof T];
type Example<T> = {
  [K in keyof T]: T[K] extends Function ? K : never;
}/* Same as above, but without [keyof T] here*/;

interface Part {
  id: number;
  name: string;
  subparts: Part[];
  updatePart(newName: string): void;
}

type T1 = FunctionPropertyNames<Part>;
/*
type T1 = "updatePart"
*/
type E1 = Example<Part>;
/*
type E1 = {
    id: never;
    name: never;
    subparts: never;
    updatePart: "updatePart";
}
*/

The inclusion of [keyof T] ensures that FunctionPropertyNames delivers the names of the function-properties rather than the function-typed properties themselves (along with the never-typed ones).

Answer 5

Answer №3

This [keyof T] represents any attribute within T.

For a clearer understanding, consider the following example:

type AB = {
  aa: number,
  ab: () => number,
  cd: () => number,
  ef: () => number
}

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

/* In this example, the resulting value will be { aa: never, ab: 'ab', cd: 'cd', ef: 'ef' } */
const example: FunctionPropertyKeyToNames<AB> =

By using [keyof T], the values extracted would be
Theoretically never, 'ab', 'cd', 'ef', however since Typescript does not treat never as a valid value
Only 'ab', 'cd', 'ef' will remain.

Answer 6

This [keyof T] represents any attribute within T.

For a clearer understanding, consider the following example:

type AB = {
  aa: number,
  ab: () => number,
  cd: () => number,
  ef: () => number
}

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

/* In this example, the resulting value will be { aa: never, ab: 'ab', cd: 'cd', ef: 'ef' } */
const example: FunctionPropertyKeyToNames<AB> =

By using [keyof T], the values extracted would be
Theoretically never, 'ab', 'cd', 'ef', however since Typescript does not treat never as a valid value
Only 'ab', 'cd', 'ef' will remain.

Answer 7

Answer №4

If the [keyof T] is absent, an object will be returned in brief. Alternatively, if there exists a [keyof T], the key of the preceding object will be returned instead.

Answer 8

If the [keyof T] is absent, an object will be returned in brief. Alternatively, if there exists a [keyof T], the key of the preceding object will be returned instead.

After the curly brace in a type definition, what is the significance of [keyof T]?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for customizing the legend color in Angular-chart.js

Make sure to call the loader function in React Router only when there are path params present

Convert to a TypeScript map

Using the same component multiple times within a parent component in Angular 2

I seem to be missing something: Unhandled Rejection (TypeError): setToken function is not recognized

Seeking clarification on how the Typescript/Javascript and MobX code operates

Balancing website speed with capturing product impression

Expanding the properties of an object dynamically and 'directly' by utilizing `this` in JavaScript/TypeScript

Showing a whole number formatted with exactly three decimal places in Angular

Rearrange the provided string in a particular manner

The field '_id' is not present in the type Pick

Implementing angular-material-design into an Angular 4 application with the help of Angular CLI

Can this function be rewritten in a manner that does not involve returning undefined?

A simple guide on how to send an Angular component to the Nebular dialog service

Creating Pie Charts with Chart.js using an array of objects as the dataset

pay attention to fluctuations in the observable's value

Issue regarding locating Material-UI components while resolving TypeScript modules

Ways to get into the Directive class

What is the best way to incorporate modules into the client side of TypeScript projects?

Expanding upon React Abstract Component using Typescript