Currently, my code looks like this:
import * as Types from '../schema/types';
and I'm looking to achieve something along the lines of:
let a: Types;
This would signify that a should be one of the various types exported from the file types.ts. Is there a way to accomplish this? (By the way, it's for a graphql server)
It appears that your goal is to implement union types. To define union types in TypeScript, you can follow the example below:
Scenario 1: Define individual types in a separate module and use unions when needed:
types.ts
type TypeA = {
name: string;
}
type TypeB ={
name: number;
}
export type {TypeA, TypeB}
You can then use these types like this:
import {TypeA, TypeB} from './types';
let myVar: TypeA | TypeB;
Or
import * as types from './types';
let myVar: types.TypeA | types.TypeB;
Scenario 2: Create union types directly in a module for ease of use:
types.ts
type TypeA = {
name: string;
}
type TypeB ={
id: string;
}
export type Types = TypeA | TypeB
To use them:
import {Types} from './types';
let myVar: Types;
If you need to utilize union types in GraphQL, check out the resources mentioned here.
Update: Regarding accessing all types within a module, it's not possible with interfaces or types as they are only compile-time entities for specifying object structures. Unlike classes, you cannot extract all types at runtime using methods like Object.keys or Object.entries.
Your best approach would be to define union types in the types file or create the union type directly there and import/use them in your main file.
Automating this process may prove challenging, but the key solution lies in utilizing a union type.
If you have previously defined types in the file ../schema/types, such as:
interface Foo {
...
}
interface Bar {
...
}
You can import them using
import * as Types from '../schema/types';Subsequently, you can create a union type like so:
type GqType = Types.Bar | Types.Foo;
Finally, by declaring a with this new type:
let a: GqType;
index.component.ts initialize() { // Execute necessary functions after loading this.index.ready().then(() => { if(this.index.is('core')){ // this.menu.enable(false, 'mobileOnlyPages'); }else{ ...
Currently, I am diving into Typescript with the help of this informative guide on indexer types. There is a specific piece of code that has me puzzled: interface NumberDictionary { [index: string]: number; length: number; // okay, length shoul ...
Currently, I am implementing aria autocomplete and facing an issue while trying to populate data from the server into the selection of aria autocomplete. I have tried setting the selected property of the aria autocomplete object, but it doesn't seem t ...
I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...
Can you help me figure out how to fix the issue I'm having with loading images in this component? Currently, when I refresh the page, the image does not load properly and appears resized to 1 pixel width. Should I wait for the image to fully load befo ...
We have set up a git hook in our app using Husky for pre-commit actions. Whenever someone commits code, it triggers the pre-commit code - #!/bin/sh . "$(dirname "$0")/_/husky.sh" export NVM_DIR="$HOME/.nvm" [ -s "$NVM_ ...
If I have a component with a template containing an Edit button. When the user clicks on it, I want to load another component as a dynamic modal template. The component is named ProfilePictureModalComponent and it includes the Edit button: (Angular code h ...
After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...
In my current setup, I am utilizing jest for testing with React and Typescript. import configureStore from "redux-mock-store"; import thunk from "redux-thunk"; const mockStore = configureStore([thunk]); it("should handle fetchCha ...
When attempting to set the 'role' and 'active' values on a form, I encountered a couple of issues. The first problem arises from the fact that the selectors' original values are not being properly set. These values are fetched in ...
Currently, I am working on a microservices application where I have two very similar services that use practically the same packages. To perform some testing, I decided to add a function to the global scope and modified it slightly to prevent any TypeScrip ...
I desperately need assistance. I have been struggling with this issue for a while now, but all my attempts have ended in failure. My objective is to retrieve API data that corresponds to an array containing name, id, and email, and then display this inform ...
I currently have a unique data structure as shown below: type MyDataType = | { type: "pro"; content: { signedAt: string; expiresOn: string }; } | { type: "default" | "regular"; content: { signed ...
The process involves calling two different APIs. The first API gathers user information such as name, ID, and the IDs of applications where the user is registered. The second API retrieves details from each application based on its ID. Despite successfully ...
I'm facing a major challenge in creating a boilerplate for a comprehensive React application using GraphQL (React Apollo) and Material-UI. Despite numerous attempts, I keep encountering the same issue: Warning: Prop "className" did not match. Server: ...
Is it possible for TypeScript to automatically determine the generic argument of assertTypeof based on the value of expectedType? I am looking for a way to use the function below without having to specify number multiple times. playable example type Typ ...
Currently facing an issue with mapping an http object to a specific model of mine, here is the scenario I am dealing with: MyObjController.ts class MyObjController { constructor ( private myObj:myObjService, private $sco ...
I am trying to access data from a list, but I am having trouble using square brackets []. The getTalonPaie function calls the get method from the HttpClient service and returns an observable with multiple values. However, when I try to store these values i ...
Seeking clarity on a fundamental TypeScript concept here. I've noticed that Google Cloud examples use JavaScript, and I'm in the process of converting one to TypeScript. Source: https://cloud.google.com/storage/docs/listing-buckets#storage-list ...
In my project, I have noticed that a listener in one of the tabs causes the entire tab to refresh, resulting in it displaying information from the first tab until I switch to another tab and then go back. 1) Is there a way to refresh only the current tab? ...