Is there a way to declare a generic type GetAppActions where if T is equal to trigger, only the trigger data property is displayed, and vice versa?
type GetAppActionType = 'trigger' | 'action'
interface AppActionInputField {}
type GetAppActions<T = GetAppActionType> = {
data: {
action: { inputFields: AppActionInputField[] }
trigger: { inputFields: AppActionInputField[] }
}
type: T
}
You have the option to implement a mapped type
interface AppActionInputField {}
type GetAppActions<T extends "trigger"|"action"> = {
data: {
[K in T]: { inputFields: AppActionInputField[] }
},
type: T
}
const sample: GetAppActions<"trigger"> = {
data: {
trigger: { inputFields: [{}] }
},
type: "trigger"
}
If you want to restrict the data property based on the type, you can utilize discriminating union. It essentially acts like a switch statement for your types.
interface AppActionInputField { }
type AppActions = {
type: "trigger"
data: {
trigger: { inputFields: AppActionInputField[] }
}
} | {
type: "action",
data: {
action: { inputFields: AppActionInputField[] }
}
}
type ActionType = AppActions["type"];
// "actions" | "trigger"
retrieve token state$.select(state => { retrieve user access_token !== ''}); This error message is what I encountered, [tslint] No Semicolon Present (semicolon) ...
In my React frontend application, I have the logo.png file being loaded in Header.tsx as an img element like this: <img className={classes.headerLogo} src={'logo.png'} alt={"MY_LOGO"}/> The directory structure looks lik ...
I've been working with Angular 6 and I've also looked into using pipes, but I couldn't find the correct syntax for writing a zip function and importing it properly. Error: Property 'zip' does not exist on type 'typeof Observ ...
Today's challenge is a strange one - I've encountered a bug where the code behaves differently if typeof(transaction) returns object instead of the object name. To work around this issue, I introduced a new parameter called transactionType to my ...
Presented here is a scenario I am facing: const customer = new Customer(); let customerViewModel = new CustomerLayoutViewModel(); customerViewModel = customer; Despite both Customer and CustomerLayoutViewModel being identical at the moment, there is no ...
Attempting to implement an infinite scroll feature in next.js, I am working on invoking my serverAction to load more data by using async/await to handle the API call and retrieve the response. Encountering an issue: "async/await is not yet supported ...
I'm facing an issue with my project where changes made in the edit dialog are immediately reflected in the UI, even before saving. This causes a problem as any changes made and then canceled are still saved. I want the changes to take effect only afte ...
Here is a snippet of code I'm working with in the TypeScript playground: interface IFoo { new?(): string; } class Foo implements IFoo { new() { return 'sss'; } } I noticed that I have to include "?" in the interface met ...
I've encountered an issue with a function that is supposed to generate a string value from an object argument. When I call this function and then try to use the argument in another function, it seems to be getting changed somehow. Here is the code fo ...
Seeking a more efficient solution to eliminate redundancy in my code. Currently, I am utilizing useState() for managing user data, which results in repetition due to numerous fields. Below is a snippet of my current code: const [lname, setLast] = useState& ...
While developing, I have encountered some issues with ts-node. When I need to test something, commenting out code is my usual approach. However, when using ts-node, I keep getting this error message: 'foo' is declared but its value is never rea ...
I have a variable called props. The type includes VariantTheme, VariantSize, VariantGradient, and React.DOMAttributes<HTMLOrSVGElement> Now I need to create another variable, let's name it htmlProps. I want to transfer the values from props to ...
Attempting to load Markdown files stored in the /legal directory, I am utilizing this code. Since loading these files requires server-side processing, I have implemented getStaticProps. Based on my research, this is where I should be able to utilize fs. Ho ...
Utilizing an external UI Library, I have access to a Button component within that library. My goal is to create a customized NewButton component that not only inherits all props from the library Button component but also allows for additional props such as ...
Whenever I run my code to search for a request and response from an express server, I encounter an issue where it cannot find declarations for the 'express' module. The error message transitions from Could not find a declaration file for module & ...
As I develop a Typescript component library, the API consists of two named exports: the component itself and a helper function to create an object for passing as a prop. The process is straightforward. For this library, I utilize an index.ts file as the m ...
Despite similar questions being asked before here, the solutions provided did not resolve my issue. Here is the scenario I am dealing with: https://i.sstatic.net/H9rcO.png Upon clicking save, I collect data from certain fields to generate a date using th ...
Hi there, I am new to Angular and JavaScript. Currently, I am working on achieving a specific goal with some data. data = ['middlename.firstname.lastname','firstname.lastname']; During the process, I am looping through the .html usin ...
Within our project, we have implemented a feature where user roles can be assigned to various elements in the application. These roles determine whether certain elements should be disabled or not. However, due to additional conditions that may also disable ...