Recently diving into Typescript has been an interesting journey, especially when stumbling upon weird language behaviors. After writing the following code snippet, I was surprised to see that it compiled and executed successfully:
let x: { [key: string]: any } = {'hi': 'bye'}
let y: { [key: number]: any} = x;
Explore in Typescript Playground
It's puzzling how an object like {'hi': 'bye'} can be assigned to a variable of type {[key: number]: any}. Logically, 'hi' is not a number.
When comparing { [key: string]: any } and { [key: number]: any }, it is important to note that they define different sets of keys. Just because you can assign y = x, it doesn't necessarily mean that the types of those variables are identical. This simply indicates that they are "compatible" or "assignable". If you can assign x = y, then we can say that y is assignable to x (or the type of y is assignable to the type of x). Often, this implies that y is a subtype of x. Therefore, { [key: string]: any } can be assigned to { [key: number]: any }. But why? What does { [k: K]: V } actually mean?
An index signature in the form of {[k: K]: V} does not require every property key to be of type K. It simply enforces that if a key is of type K, then the corresponding value must be of type
V</code. This specification does not address how keys of other types should be handled. TypeScript's <a href="https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#structural-type-system" rel="nofollow noreferrer">structural type system</a> generally allows for "extra" or "excess" properties, <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-6.html#stricter-object-literal-assignment-checks" rel="nofollow noreferrer">with exceptions involving object literals</a>.</p>
<p>Therefore, <code>{ [key: number]: any}number* will have values of type any. You can access such an object with any numeric key. However, this declaration does not restrict keys like "hi". Hence, an object of this type could potentially contain a key like "hi". The following assignment would succeed:
let x: { [key: string]: any } = { 'hi': 'bye' };
let y: { [key: number]: any } = x; // valid
Despite this assignment, attempting to index into y with a non-number key will trigger a compiler error since the type of y cannot predict what lies behind such a key:
y[1]; // valid
y.hi; // error
If you try to directly assign {hi: "bye"} as an object literal to y, it will fail due to excess property checking:
y = { 'hi': 'bye' }; // error;
This failure does not imply that {hi: "bye"} is incompatible with the type of y</code (since <code>y = x works). Instead, it signals a potential developer mistake, as after assigning y = { hi: "bye" }, the compiler no longer recognizes the hi key when accessing y.hi. In contrast, y = x avoids this issue by retaining access to the hi key provided by x.
* In JavaScript, there aren't keys of type number; rather, there are numeric strings like "0" and "1". TypeScript treats them as numbers for ease of iteration over arrays with numerical indices.
Currently, I'm immersed in a Next.js project where the main goal is to eliminate a post by its unique id. To carry out this task efficiently, I make use of Prisma as my ORM and Zod for data validation. The crux of the operation involves the client-sid ...
I have created a key value pair in Angular. The key represents the questionId and the value is the baseQuestion. The baseQuestion value may be null. One issue I am facing is that after insertion, the key value pairs are automatically sorted in ascending ...
Currently, I am facing a scenario where I need to handle two different cases using the same component depending on a boolean value. The technologies I am working with include React, Typescript, and Formik. In one case, I have a simple select box where th ...
While in the process of converting JavaScript code to TypeScript, I encountered a challenge with extending built-in objects using Object.defineProperty, such as String.prototype. Object.defineProperty(String.prototype, 'testFunc', { value: funct ...
Here is the code snippet I've been working on: file.js const channel = {}, arr = [string,string,string]; for(let i = 0;i < arr.length;i++ ){ channel[arr[i]] = "Amo" //equal string value } I have an array that contains only string values, for ...
I am currently working on a ReactJs project where I am creating a game, but I have encountered an issue. I need to alternate turns between players and generate a random number between 1 and 10 for each player, storing this random number inside their respec ...
When I first initiate index.html in AngularJS2, the structure looks something like this: <!doctype html> <html> <head> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scal ...
Is there a way to add a checkbox in the header of ag-grid for selecting all options when using an infinite row model? It seems that the headerCheckboxSelection=true feature is not supported in this model. Are there any alternative methods to include a che ...
Hey there! I've incorporated the ng4-autocomplete component into my custom component and now I'm trying to figure out how to detect when the autocomplete dropdown closes. Can you help me out with implementing the "closeAutocomplete" method? Let& ...
I'm in the process of creating a TypeScript package for publication on NPM. My plan is to utilize this package in upcoming web development endeavors, most likely utilizing Vite. As I look ahead to constructing a future website with this module, I am c ...
Just starting out with RxJS version 6.5.5, I'm encountering an issue with the groupBy operator. Here's a simplified example to showcase the problem. I have a function called retrieveFiles() that retrieves an array of strings. function async ret ...
I've been working on creating a new array with children from the data fetched from my database. While my initial attempt was somewhat successful, I believe there are some missing pieces. Could you assist me with this? Here is the raw data retrieved f ...
Recently, I released an npm package that was written in typescript. However, I have been facing difficulties in getting the definition recognized by typescript (webback and vscode). The only workaround that has worked for me so far is creating a folder wit ...
Is there a method to access a service provided at bootstrap within static class methods? I don't have any code to share right now, but I've been experimenting with the standard syntax using Injector (you can find more information here). Whenever ...
Can someone please help me understand how to retrieve keys from this union type? The Value is currently being assigned as a never type. I would like the Value to be either sno, key, or id type Key = { sno: number } | { key: number } | { id: number }; typ ...
Imagine I have an enum called E { A = "a", B = "b"}. I want to enforce that certain interfaces or types (for clarity, let's focus on interfaces) include all the keys of E. However, I also need to specify a separate type for each field. Therefore, usi ...
I currently have the 'mime' library in my node_modules directory and I am looking to completely remove it from my project, along with its @types files. The reason for this is that the old mime package is not functioning correctly for me, so I wan ...
I have been studying AngularJS 17 and recently developed a login application. However, I am facing an issue where the server response is not being properly mapped to the object in the Model Class. Response: { "id": 1, "userName& ...
Our company is currently focusing on developing our design system as a package that can be easily installed in multiple projects. While the process of building the package is successful, we are facing an issue once it is installed and something is imported ...
Below is the code snippet in question: type FormValues = { files: File[]; notify: string[]; }; const validationSchema = yup.object({ files: yup .array<File[]>() .of( yup .mixed<File>() .required() .t ...