Is there a way to translate this code snippet from JavaScript to TypeScript?
const myMap = Immutable.Map({
item1: null,
item2: "hello",
item3: Immutable.Map({
item4: 2,
item5: true
})
});
Is there a way to translate this code snippet from JavaScript to TypeScript?
const myMap = Immutable.Map({
item1: null,
item2: "hello",
item3: Immutable.Map({
item4: 2,
item5: true
})
});
Although I haven't used the immutable.js framework before, I would recommend utilizing a standard JavaScript map instead. In Typescript, you can make use of the ReadonlyMap type which eliminates all setters from the map object. While the object won't be truly immutable (meaning no runtime error), the Typescript compiler will raise an error if you attempt to modify the values.
const myMap: ReadonlyMap<string, string> = new Map([
['item1', 'foo'],
['item2', 'bar']
]);
console.log(myMap.get('item1')); // output will be foo
myMap.set('item1', 'foobar'); // Error: Property set does not exist on type readonly map
Slightly unrelated, but I believe reconsidering your map structure might be beneficial. Using string | null is acceptable, but employing
seems like an unusual choice for a map.string | null | ReadonlyMap<string, number | boolean>
For more information, you can refer to the map documentation provided by Mozilla.
A possible solution could be:
type MakeImmutable<T> = {
readonly [Key in keyof T]: MakeImmutable<T[Key]>;
};
// Defining the Person interface
interface Person {
name: string;
lastName: string;
address: {
street: string;
zipCode: number;
}
}
const person: MakeImmutable<Person> = {
name: 'john',
lastName: 'doe',
address: {
street: 'main street',
zipCode: 12345
}
}
// Trying to mutate should result in a TypeScript error for read-only properties
person.name = 'jane';
person.address.street = 'new street'
Special thanks to the original author mentioned in this article: https://www.example.com/immutable-typescript-solution
While most developers have moved on to Angular 5, I was tasked with creating a project using Angular 4. After conducting research for several days, I discovered that downgrading the Angular CLI would allow me to accomplish this. By following this approach, ...
Let's say we have the following code snippet: type eventType = "ready" | "buzz"; type eventTypeReadyInput = {appIsReady: string}; interface mysdk { on:(event: eventType, cb: (input: eventTypeCallbackInput) => void) => void } mysdk.on("ready", ...
I'm attempting to convert a const object into a class in order to create readonly properties. The goal is to ensure that the values in these properties never change. Specifically, I'm trying to create a module property in my class that is define ...
Can a versatile function be created to automatically determine the type based on an "external" object property? Consider the following scenario: const resolversMap: { overallRankingPlacement: (issuer: number, args: Record<string, any>, context: Re ...
I am a beginner when it comes to working with Observables. Here's the Effect that I am using: My goal is to dispatch the PositionUpdateAction or PositionFailedAction before the SunriseSunsetAction is dispatched. Currently, what happens is that the r ...
One issue that I am facing is with the route containing a login and logout button, where the browser error states 'Property 'dispatch' does not exist on type '{}'. (home.tsx) import React, { useContext, useEffect, useRef, use ...
Currently, I am developing an Angular application to replicate certain features found on YouTube by utilizing data fetched from an API. This API provides video timestamps in a string format Each timestamp follows this structure : YYYY-MM-DDTHH:MM:SS For ...
Imagine having this efficient component that works perfectly: import clsx from "clsx"; import React from "react"; interface HeadingProps extends React.DetailedHTMLProps< React.HTMLAttributes<HTMLDivElement>, ...
After recently creating my first published npm package named "Foo", I encountered some difficulties while trying to consume it in a TypeScript project. The tutorials on how to declare modules with custom typings were not clear enough for me. Here are the k ...
Currently, I am working on integrating Firebase with AngularFire 2 and facing an issue. The problem arises when I try to refresh the page, as the auth instance returns null. Below is the code snippet for my AuthService: Everything functions correctly, b ...
I've encountered a puzzling issue lately in my work. Recently, I started using the new NextJS v13 with React server components. I'm integrating it into a project that depends on a small private third-party library I created and shared among mul ...
I'm currently utilizing Nuxt 2 with TypeScript and the most up-to-date dependency versions available. Even though my app is of medium size, the compilation time seems excessively slow. Here are my PC specs: Ryzen 7 2700X (8 Cores/16 Threads) 16 GB D ...
I'm currently trying to enhance the String class in TypeScript 2.5 by adding a static method, which will be compiled to ES5. Here's what I have in StringExtensions.d.ts: declare interface StringConstructor { isNullOrEmpty(value: string | nu ...
Can anyone lend a hand with some code? I'm working on a straightforward table using ngFor, but I'm facing an issue with input binding. The problem is that all the input fields generated by ngFor display the same value when typing. How can I preve ...
I'm currently facing an issue with deploying my website as the API call is not functioning properly. Specifically, I am receiving a 404 not found error message. Here is the structure of my project: . After running npm run build, this is how my nex ...
Managing multiple receiving bank accounts and enabling customers to transfer money to specific accounts is a key requirement in my application. Can Plaid help me achieve this functionality? Could you provide guidance on how to implement this feature using ...
My REST API returns data in the format shown below:- {"id": 1, "name": "New event", "date": "2020-11-14T18:02:00"} In my React frontend app, I have an interface like this:- export interface MyEvent { id ...
After conducting a search on Stack Overflow, I found a similar question that relates to my issue. Login OTP Component: onSubmitValidOTP() { this.authenticationService.ValidOTP(this.fo.OtpControl.value, username, role) .pipe(first ...
I recently came across a file from a tutorial that has left me confused due to the inconsistency between documentation, tutorials, and examples: /scripts/tsconfig.json: { "compilerOptions": { "emitDecoratorMetadata": true, "experiment ...
When running the code sample below, it outputs "[Function: Date]", which is as expected. import 'reflect-metadata' function logType(target : any, key : string) { var t = Reflect.getMetadata("design:type", target, key); console.log(`${k ...