I'm struggling to differentiate between index signatures and record types. Can someone clarify the distinctions and suggest when each should be used?
In particular, I want to specify the type of an object with random strings for keys and values that will be iterated over.
Are there noticeable differences between:
let objectVariable: Record<string, string> = {}
and
let objectVariable2: {[index: string]: string} = {}
The concept of Record can be defined as follows:
/**
* Create a type that consists of properties K of type T
*/
type Record<K extends keyof any, T> = {
[P in K]: T;
};
For example, when defining a type like
type MyType = Record<string, string>;Record results in the following type:
type MyType = {
[P in string]: string;
};
This essentially instructs to generate an object type with string-based property names within the set string. Since string is not limited, there is no restriction on the number or names of properties (unlike using a union of string literal types like "prop1" | "prop2"), indicating that the object can have any number of properties with any name, as long as they are of type string.
Hence, in terms of type checking, it is similar to having an index signature without a mapped type ({ [index: string]: string; }).
Instead of Using Record
While using Record in this manner might seem odd and unclear to some, a more conventional approach to convey the same idea for objects with variable properties could be achieved by utilizing a plain index signature:
type ObjectWithStringProperties = {
[index: string]: string;
};
Furthermore, this method helps clarify the intended key structure. For instance:
type PersonsByName = {
[name: string]: Person;
};
const collection: PersonsByName = {};
By specifying the key name in this manner, users interacting with objects of this type will have additional context available while working in their editor.
Proper Usage of Record
It's worth noting that Record is commonly used in scenarios like the following:
type ThreeStringProps = Record<"prop1" | "prop2" | "prop3", string>;
// translates to...
type ThreeStringProps = { [P in "prop1" | "prop2" | "prop3"]: string; };
// concludes to...
type ThreeStringProps = {
prop1: string;
prop2: string;
prop3: string;
};
There is a debate about whether using Record instead of a plain index signature is a good idea, as mentioned by David Shereet in his response. Additionally, the versatility of Record compared to a simple index signature should be noted.
The crux of this inquiry (as I understand it) revolves around determining if these two types are identical. While they may have different declarations, the question arises: are they truly the same type? Although they are compatible (allowing for assignment between them), it is important to consider potential scenarios where this compatibility breaks down.
While it's challenging to compile an exhaustive list of capabilities inherent to a type, Matt McCutchen offers a noteworthy example in his response, showcasing a type that can detect the presence of the readonly modifier – a distinction not captured solely through compatibility assessments. If we view Record and an index signature as equivalent, particularly within the context Matt employs them (as part of a generic function's signature), they essentially represent the same type but declared differently:
type IfEquals<X, Y> =
(<T>() => T extends X ? 1 : 2) extends
(<T>() => T extends Y ? 1 : 2) ? "Y" : "N";
let same : IfEquals<{x: string}, {x: string}>= "Y"
let notsame : IfEquals<{ y: string }, { x: string }>= "N"
let notsamero: IfEquals<{ readonly x: string }, { x: string }> = "N"
let samerecord: IfEquals<{ [x: string]:string }, Record<string, string>> = "Y"
In the final example, the variable samerecord is determined to be of type Y, indicating that the compiler treats the two types as equivalent. This leads to the conclusion that { [x: string]:string } and Record<string, string> are indeed one and the same.
Is it feasible to retrieve the type of object property when that object is nested within a table structure? Take a look at this playground. function table<ROW extends object, K extends Extract<keyof ROW, string>>({ columns, data, }: { col ...
I am currently stuck trying to assign values to a 2-dimensional object array in Angular/Typescript. I have noticed that the last assignment seems to override the previous ones, but I cannot pinpoint why this is happening. Could someone please review my cod ...
I am currently working on fetching data from Contentful using GraphQL within a Gatsby application, and here is my approach: type AllContentfulBlogs = { allContentfulBlogs: { nodes: Array<{ title?: string | null | undefined, ...
After implementing the following validator, I encountered an error message. The error states: "Expected 1 argument, but got 2 (ts 2554)." Although many sources mention overloading as a common issue, there is no overload present in this case. export const ...
I've scoured every available article and post on this topic, yet I am still unable to pinpoint where I am making a mistake with this seemingly simple task. (Particularly, following this example.) It seems like I am missing something obvious, but after ...
I am facing an issue while trying to debug a TypeScript project with FeathersJS using VSCode. Whenever I try to launch the program, I encounter the following error: "Cannot start the program '[project_path]/src/index.ts' as the corresponding J ...
Here is a simplified version of my server code: server.ts import google from "googleapis"; const androidPublisher = google.androidpublisher("v3"); app.use('something', function(req, res, n){ ... }) ...(only one of the dozens of other meth ...
I'm currently diving into typescript and struggling to understand how to resolve the error Type 'undefined' cannot be used as an index type.ts(2538) while keeping default prop values. Here is the code snippet: interface PVIconInterface { ...
Analysis I designed an interface that takes two type parameters, with the second parameter being optional and defaulting to void. Additionally, I created a utility type called CommandReturnType which employs conditional typing to ensure that void is not r ...
I'm struggling to understand why my SVG isn't showing up on the screen. The console log is displaying "false," which I believe indicates that a promise was rejected Here is the TypeScript file I am working with: export class PieChartComponent im ...
Is it possible to change the static resource file based on the URL query? Here is an example of my folder structure: /root -> server.ts -> /projects -> libraries used in index.html files -> /project1 -> index.html -> ...
After making adjustments to my TypeScript configuration, I am now encountering errors related to the no-namespace rule. Here is how my current setup involving namespaces looks like: Exporting classes within a namespace: namespace MyNamespace { export ...
I'm encountering an issue with a simple singleton called Paths: export default class Paths { private static _instance: Paths; private constructor() { console.log('paths constructor'); } public static get Instance() { consol ...
Hello, I have encountered an issue with my application that involves registration and login functionality. The problem arises when a new user logs in, as I must refresh the page to get the current user information. I am currently using interpolation on the ...
After declaring the data type of a variable in TypeScript and checking its type, it may show as undefined if not initialized. For example: var a:number; console.log(a); However, if you initialize the variable with some data, then the type will be display ...
When I make an HTTP POST request to the Microsoft login in order to obtain an access token for use with the mail API, the request is successful but my code still goes to the error clause. requestAccessToken(code: string) { console.log("Requesting access t ...
Incorporating Angular 15.2.10 and Typescript 4.9.5, the RegEx utilized in one of my libraries and exposed via a service is outlined as follows: private readonly _DISALLOWED_CHARS_REGEX_GENERAL = new RegExp(/^[^\\/\?\!\&\: ...
In my enum file, I have defined an object for PaymentTypes: export enum PaymentTypes { Invoice = 1, CreditCard = 2, PrePayment = 3, } When I fetch data as an array from the database, it also includes PaymentType represented as numbers: order: ...
When trying to run the seed command tsx prisma/seed.ts, it failed to create a post and returned an error. → 6 await prisma.habit.create( Validation failed for the query: Unable to match input value to any allowed input type for the field. Parse erro ...
Unraveling the Parent/Child Directive Mystery in Angular2/Typescript As I delve into the world of Angular2/Typescript/javascript, there is still much for me to learn. My current project involves a card game where each of the 2 players holds a hand of 5 ca ...