enum X {
A = 'x',
B = 'y'
}
type A<T> = {
prop1: T
prop2: X
}
let r:A<X> = {
prop1: X.A,
prop2: X
}
What specific type must be assigned to A.prop2 in order for only X and no other item to also be assigned to it?
(without resorting to any additional methods or techniques)
It is not feasible as requested. When you define an enum like
enum X {
A = 'x',
B = 'y'
}
You are creating a value named X (the enum object, with keys A and B) and a type named X (the union of types of the enum values, such as "x" | "y"). Types and values exist in separate namespaces, so there is no direct link between them in the language.
Generic types, on the other hand, function like this:
type A<T> = {
prop1: T
prop2: ⋯
}
They accept type arguments, not value arguments. So when you use it like this:
type B = A<X>;
You are passing the type named X, which results in "x" | "y", into A. This does not include the necessary information to enforce that prop2 must be of type represented by the value named X. Essentially, the type "x" | "y" has no knowledge of the keys "A" and "B".
If you wish to maintain the usage of X, the closest workaround involves specifying that prop2 should be an object type with properties of type X, but with any keys. Here is how it can be done:
type A<T> = {
prop1: T
prop2: Record<string, T>
}
let r: A<X> = {
prop1: X.A,
prop2: X // permissible
}
r.prop2 = { whoopsieDaisy: X.A } // also allowed
However, this method does not mandate the correct keys.
If you modify the code to pass in typeof X instead of X, then you can come closer to the desired outcome:
type A<T extends object> = {
prop1: T[keyof T]
prop2: T
}
Now, prop1 is of type T[keyof T], indicating it is the union of property types of T. If T is typeof X, then T[keyof T] will indeed be X. This enforces supplying the right keys:
let r: A<typeof X> = {
prop1: X.A,
prop2: X
}
r.prop2 = { whoopsieDaisy: X.A } // error
Nevertheless, this still does not fully meet the requirements; it only ensures that the passed value is of the expected type or a subtype of that type. It remains possible for a user to bypass these restrictions. To prevent this would require further complicated measures, likely more trouble than it's worth due to TypeScript's type system limitations.
I am trying to display a random array of images in the UI, but I'm encountering an error with innerHTML when using the code below in TypeScript. randomPic(){ this.randomNum= Math.floor(Math.random() * this.myPix.length); console.log(this.rando ...
When exporting a function and type from the library in the convertToUpper.ts file, I have the following code: export function Sample() { console.log('sample') } export type IProp = { name: string age: number } The index.ts file in my lib ...
Just started using TypeScript and in the process of migrating my React app to incorporate it. Encountering some type issues with Firebase auth service that I can't seem to find a solution for. Any suggestions? import React, { useEffect, useState } f ...
"use client"; -- Imports and interfaces const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => { const [data, setData] = useState<SubscriptionData>({}); -- Functions return <> ...
I am in need of a function that will assess various conditions to determine if an object is eligible for editing. These conditions may exist on both the server and client sides. Certain conditions should halt further validation and return a value. ...
When working with ajax calls in typical javascript, I have been using a specific pattern: myFunction() { var self = this; $.ajax({ // other options like url and stuff success: function () { self.someParsingFunction } } } In addition t ...
Why isn't the transition working as expected? Even though the animate function is set with a time of 2 seconds, the transition happens instantly. trigger('showMenu', [ state('active', style({ marginLeft: '0px' }) ...
I have implemented a service in Angular that I want to be a singleton. Following the guidelines provided in the official documentation, I have set the providedIn property to "root" as shown below: @Injectable({ providedIn: "root" }) export class SecuritySe ...
In my current project, I am faced with the challenge of writing unit tests in Typescript for an existing library that was originally written in plain JS. Most of our page logic is also written in plain JS. Some functions in this library throw exceptions if ...
Is there a way to assign a variable to be of type interface A OR interface B? interface A { foo: string } interface B { bar: string } const myVar: A | B = {bar: 'value'} // Error - property 'foo' is missing in type '{ bar: s ...
There are some projects that include all types declarations within the index.d.ts file. This eliminates the need for programmers to explicitly import types from other files. import { TheType } from './somefile.ts' Is this the proper way to use ...
I am currently facing an issue with validating a group of checkboxes. The main problem is that even though the 'this.dataService.minRequired' variable updates in the service, the validation state does not reflect these changes. I initially though ...
Currently, I am facing an issue where all the collapses in my list are linked to one state for "open." This means that if I open one list, all the other lists also open. I am looking for a way to keep the collapses separate from each other without needing ...
I am currently in the process of upgrading from material v4 to v5. The problem I am encountering is related to a styles.ts file that I used to import into my component. Initially, the beginning of the class looked like this: import { defaultFont, prima ...
I successfully transformed an array of type A into an object with instances of the Person class. However, I'm facing an issue where I can't invoke methods of the Person class using the transformed array. Despite all console.log checks showing tha ...
In my project using Ionic React, I am developing an application to showcase temperature data. To achieve this, I have established an API that transmits MQTT temperature information and utilize Axios for data retrieval. Despite my efforts, I am encountering ...
Currently, I am involved in a project that utilizes Typescript and React. However, I have encountered an issue while working with the 'react-code-blocks' library. The structure of my container component is as follows: interface ICodeBlockProps { ...
Currently, I am exploring different strategies to ensure that a function remains pure while depending on object updates. Would creating a deep copy be the only solution? I understand that questions regarding object copying are quite common here. However, ...
I'm puzzled by the variable declaration within an Angular component and I'd like to understand why we declare it in the following way: export class AppComponent { serverElements = []; newServerName = ''; newServerContent = &apos ...
Recently, I've been working on developing custom functions for my Angular application. Following the official guidelines, I have created an independent library. My goal is to create chainable functions similar to this: var obj = { test : function( ...