What is the reason for Record accepting an array in TypeScript?

Question

What is the reason for Record accepting an array in TypeScript?

I'm puzzled as to why this code compiles in typescript. I've tried researching and checking the typescript documentation, but still can't find the answer.

type RecType = Record<string, any>
const arr: RecType = [1, 2, "three"] //or new Array(1, 2, 3)

console.log(arr)  // [1, 2, "three"] 
console.log(Array.isArray(arr)) // true
console.log(Object.keys(arr)) // ["0", "1", "2"]

If you want to experiment with the code, here is a typescript playground link

arrays typescript record

Answer 1

Answer №1

Surprising as it may seem, the Record type in TypeScript is not limited to just arrays and objects. In fact, you can use it with various types of assignments:

const a: Record<string, any> = []; 
const b: Record<string, any> = {}; 
const c: Record<string, any> = () => {};
const d: Record<string, any> = new Map();
const e: Record<string, any> = new Date();
const f: Record<string, any> = new Boolean(); 
const g: Record<string, any> = new String();
const h: Record<string, any> = class Klass{};

When using the new keyword with a constructor, the instanceof Object will return true for all cases:

function instanceOfObject(arg: Record<string, any>) {
    return arg instanceof Object;
}

// All results are true
console.log(
    instanceOfObject([]),
    instanceOfObject({}),
    instanceOfObject(() => {}),
    instanceOfObject(new Map()),
    instanceOfObject(new Date()),
    instanceOfObject(new Boolean()),
    instanceOfObject(new String()),
    instanceOfObject(class Klass{}),
)

Therefore, the Record acts as an alias for { [P in string]: any; }, representing an object with a string index signature. This allows the instanceOfObject function to accept any kind of objects or instances.

Remember that TypeScript follows structural typing, meaning it checks the interface of objects and looks for specific signatures within them. The core Object interface, referenced here, includes the required string signature.

A more apt name for Record could be Indexed to avoid confusion with dictionaries common in other languages but absent in JavaScript.

For instance, arrays can be indexed by numeric values, showcasing:

const arr: Record<number, unknown> = [1, 2, 3]; // Valid assignment

However, there are some surprises in store:

const arr: Record<number, unknown> = "hello"; // Also works!

This behavior stems from the fact that strings are indexable by numbers, as documented here. Literal types are automatically boxed in JavaScript, leading to failed instanceof checks when using constructors like String().

console.log("str" instanceof String); // Returns false
console.log(new String("str") instanceof String); // Returns true

That's why passing a string literal like "hello" to the previous function would result in an error:

// Argument of type 'string' is not assignable to parameter of type  
// 'Record<string, any>'
instanceOfObject("hello"); // Error

To distinguish between object literals and other instances, use Record<string, unknown>, which disallows objects like arrays and the ones mentioned above lacking the necessary string index signature:

// Attempting to assign an array to a type expecting object literals
// Results in a type error due to missing string index signature
const obj: Record<string, unknown> = [1];

Explore further on TS Playground:TS Playground

Answer 2

Surprising as it may seem, the Record type in TypeScript is not limited to just arrays and objects. In fact, you can use it with various types of assignments:

const a: Record<string, any> = []; 
const b: Record<string, any> = {}; 
const c: Record<string, any> = () => {};
const d: Record<string, any> = new Map();
const e: Record<string, any> = new Date();
const f: Record<string, any> = new Boolean(); 
const g: Record<string, any> = new String();
const h: Record<string, any> = class Klass{};

When using the new keyword with a constructor, the instanceof Object will return true for all cases:

function instanceOfObject(arg: Record<string, any>) {
    return arg instanceof Object;
}

// All results are true
console.log(
    instanceOfObject([]),
    instanceOfObject({}),
    instanceOfObject(() => {}),
    instanceOfObject(new Map()),
    instanceOfObject(new Date()),
    instanceOfObject(new Boolean()),
    instanceOfObject(new String()),
    instanceOfObject(class Klass{}),
)

Therefore, the Record acts as an alias for { [P in string]: any; }, representing an object with a string index signature. This allows the instanceOfObject function to accept any kind of objects or instances.

Remember that TypeScript follows structural typing, meaning it checks the interface of objects and looks for specific signatures within them. The core Object interface, referenced here, includes the required string signature.

A more apt name for Record could be Indexed to avoid confusion with dictionaries common in other languages but absent in JavaScript.

For instance, arrays can be indexed by numeric values, showcasing:

const arr: Record<number, unknown> = [1, 2, 3]; // Valid assignment

However, there are some surprises in store:

const arr: Record<number, unknown> = "hello"; // Also works!

This behavior stems from the fact that strings are indexable by numbers, as documented here. Literal types are automatically boxed in JavaScript, leading to failed instanceof checks when using constructors like String().

console.log("str" instanceof String); // Returns false
console.log(new String("str") instanceof String); // Returns true

That's why passing a string literal like "hello" to the previous function would result in an error:

// Argument of type 'string' is not assignable to parameter of type  
// 'Record<string, any>'
instanceOfObject("hello"); // Error

To distinguish between object literals and other instances, use Record<string, unknown>, which disallows objects like arrays and the ones mentioned above lacking the necessary string index signature:

// Attempting to assign an array to a type expecting object literals
// Results in a type error due to missing string index signature
const obj: Record<string, unknown> = [1];

Explore further on TS Playground:TS Playground

Answer 3

Answer №2

After taking a short break, returning to the issue and delving a bit deeper, I believe I have grasped it.

This is the definition of Record in typescript (taken from its source code)

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

An array can be assigned to this because

The keyof operator will return the array's indices as keys (similar to how Object.keys functions).
The accessor [P in K]: T is applicable for an array because array["0"] is a valid way to access index 0 of the array (as well as array[0])

I believe my understanding is correct now, but please feel free to point out any errors or provide corrections.

Answer 4

After taking a short break, returning to the issue and delving a bit deeper, I believe I have grasped it.

This is the definition of Record in typescript (taken from its source code)

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

An array can be assigned to this because

The keyof operator will return the array's indices as keys (similar to how Object.keys functions).
The accessor [P in K]: T is applicable for an array because array["0"] is a valid way to access index 0 of the array (as well as array[0])

I believe my understanding is correct now, but please feel free to point out any errors or provide corrections.

Answer 5

Answer №3

In order to create a string keyed object with unknown values while preventing arrays from being included, it is recommended to utilize Record<string, unknown>. This ensures that only non-array values can be passed in. For a hands-on example, check out this TS Playground link.

Answer 6

In order to create a string keyed object with unknown values while preventing arrays from being included, it is recommended to utilize Record<string, unknown>. This ensures that only non-array values can be passed in. For a hands-on example, check out this TS Playground link.

What is the reason for Record accepting an array in TypeScript?

Answer №1

Answer №2

Answer №3

Similar questions

Develop a TypeScript project in React that incorporates a dynamic country flag component

Getting the ID from an array of objects in AngularJS: A How-To Guide

Encountering a sign-in issue with credentials in next-auth. The credential authorization process is resulting in a

Tips for adjusting HighCharts layout with highcharts-vue integrations

Unforeseen outcomes when duplicating array elements in C

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

Unable to add value to array within PHP foreach loop

Effectively retrieving text from a sentence

I'm wondering how to convert JSON to an array list using Python. Can anyone help

A guide to seamlessly uploading files to s3 using nextjs, node, and typescript

Searching for a contiguous subarray with a specific sum in linear time complexity (O(n))

Breaking down a string into an array using Node.js

Unleashing the Power of Firebase Service in Angular Components: A Guide to Effective Unit Testing

Updating parent object data in child: A step-by-step guide

Troubleshooting the Issue with Angular Material Dialog Imports

Differences between Arrays of Numbers and Objects in Typegoose

Printing an array that contains multiple nested arrays efficiently with a single Foreach loop

Encountering TypeScript errors while trying to implement Headless UI documentation

JavaScript Equivalent to C#'s BinaryReader.ReadString() Function

Typescript question: What is the specific error type associated with the 'throw' function in express-validator?