What sets apart Records and Objects in TypeScript?

Question

What sets apart Records and Objects in TypeScript?

I am exploring how to define a conditional type in TypeScript that can differentiate between "record" types (with dynamic/unbounded keys) and plain object types (with predefined keys).

type R = { [x: string]: any }
type O = { a: string; b: number }

One approach is to extract the keys of the types and then verify using a nonexistent property:

type R = { [x: string]: any }
type O = { a: string; b: number }

type IsRecord<T> = '__NEVER__' extends keyof T ? true : false

type RR = IsRecord<R> // true
type OO = IsRecord<O> // false

However, this method feels somewhat hacky. Is there a cleaner solution for achieving this distinction?

typescript

Answer 1

Answer №1

When determining if a type is indexable, you can check if the key includes the type itself:

type IsRecord<T> = string extends keyof T ? true : false

type RR = IsRecord<R> // true
type OO = IsRecord<O> // false

Instead of using a fake key, consider using string to avoid any perceived "hackiness."

It's worth noting that there are types with number-indexes (like Array<any>), which won't be identified as records since string isn't necessarily a key in a number-indexed type:

type N = { [x: number]: any };
type NN = IsRecord<N>; // false

If you want to identify both string and number indexes as record-like, checking for number is sufficient since, from a key perspective, number is considered assignable to string. This might seem confusing, but JS objects ultimately use string or symbol keys, treating all string-indexed types as having both string and number keys. TypeScript supports this behavior:

type IsNumericIndex<T> = number extends keyof T ? true : false

type RRR = IsNumericIndex<R> // true
type OOO = IsNumericIndex<O> // false
type NNN = IsNumericIndex<N> // true

Check out this code on Playground

Answer 2

When determining if a type is indexable, you can check if the key includes the type itself:

type IsRecord<T> = string extends keyof T ? true : false

type RR = IsRecord<R> // true
type OO = IsRecord<O> // false

Instead of using a fake key, consider using string to avoid any perceived "hackiness."

It's worth noting that there are types with number-indexes (like Array<any>), which won't be identified as records since string isn't necessarily a key in a number-indexed type:

type N = { [x: number]: any };
type NN = IsRecord<N>; // false

If you want to identify both string and number indexes as record-like, checking for number is sufficient since, from a key perspective, number is considered assignable to string. This might seem confusing, but JS objects ultimately use string or symbol keys, treating all string-indexed types as having both string and number keys. TypeScript supports this behavior:

type IsNumericIndex<T> = number extends keyof T ? true : false

type RRR = IsNumericIndex<R> // true
type OOO = IsNumericIndex<O> // false
type NNN = IsNumericIndex<N> // true

Check out this code on Playground

What sets apart Records and Objects in TypeScript?

Answer №1

Similar questions

Testing the API client against a remote API with constantly changing endpoints

Inner output not displaying on the screen

The onChange function in React is not behaving as I anticipated

Converting a generic object from snake_case to camelCase using TypeScript

Beating the API call system: Utilizing the RxJS skip operator

Encountering a NextJS _app.tsx problem - error - Issue with ./pages/_app.tsx file: line 3

A reference to 'this' is not permissible within a static function in Types

Object autofill - Typescript utilizing Angular 5

Establish a many-to-many relationship in Prisma where one of the fields is sourced from a separate table

Encountering difficulties when attempting to load a module with the "js" extension in a TypeScript environment

The call to 'setRequestHeader' on 'XMLHttpRequest' was unsuccessful due to the object's state not being OPENED

Prohibit the use of screen printing in a modern web application developed with Angular or ReactJS

Building custom components in Ionic 4

Encountering a glitch while integrating the angular-select2 module into an Ionic 3 application

Compiling TypeScript code with Electron

"Error: The term 'Readable' is not

What is the solution to the TypeScript error stating that there is no index signature with a parameter of type 'string' on the 'Object' type?

SVG: What could be causing the shapes inside the svg to not be visible when overlaid on an image?

Applying REGEX on input text in React Native

Error: The function call does not match any of the overloads. 'VueRouter' is not recognized