Retrieve a specific key from a TypeScript interface

Question

Retrieve a specific key from a TypeScript interface

It seems like there might be a problem with this code snippet:

interface

import {BrowserService} from "../services/browser/index";

export interface IPrimaryNavigation {
    opts:IPrimaryNavigationOpts;
}

export interface IPrimaryNavigationOpts {
    ...
    browserService:BrowserService;
    ...
}

class:

import {IPrimaryNavigation, IPrimaryNavigationOpts} from "./interface";

export class PrimaryNavigation implements IPrimaryNavigation {
   public opts:IPrimaryNavigationOpts;
   ...
   mounted():void {
        ...
        this.listenForBootstrap(this.opts.bsNav, this.opts.browserService);
    }
    listenForBootstrap(menuName:string,browserService:<???>):void {
                                                       ^^^ here is the issue - 
    // There seems to be a problem accessing IPrimaryNavigationOpts.browserService here. 
    // Any suggestions on how to solve this? Examples or tips are greatly appreciated as I am new to this.
    }
}

Does anyone have any insights or solutions for overcoming this particular challenge? Your guidance would be greatly valued.

typescript interface

Answer 1

Answer №1

We have the ability to export pre-owned items. Thus, within the "./interface" directory, we can execute the following steps (refer to the last lines):

import {BrowserService} from "../services/browser/index";

export interface IPrimaryNavigation {
    opts:IPrimaryNavigationOpts;
}

export interface IPrimaryNavigationOpts {
    ...
    browserService:BrowserService;
    ...
}
// exporting the used interface once again
export { BrowserService }

Subsequently, it is possible for us to even import this type

// importing the re-exported type
import {IPrimaryNavigation, IPrimaryNavigationOpts
        BrowserService } from "./interface";

export class PrimaryNavigation implements IPrimaryNavigation {
   public opts:IPrimaryNavigationOpts;
   ...
   mounted():void {
        ...
        this.listenForBootstrap(this.opts.bsNav, this.opts.browserService);
    }
    listenForBootstrap(menuName:string,browserService:BrowserService):void {
    //listenForBootstrap(menuName:string,browserService:<???>):void {
    //                                                   ^^^ here lies the issue - 
    // I aim to achieve what IPrimaryNavigationOpts.browserService does but encountering difficulties.
    // Importing IBrowserService explicitly doesn't seem necessary.

    }
}

Answer 2

We have the ability to export pre-owned items. Thus, within the "./interface" directory, we can execute the following steps (refer to the last lines):

import {BrowserService} from "../services/browser/index";

export interface IPrimaryNavigation {
    opts:IPrimaryNavigationOpts;
}

export interface IPrimaryNavigationOpts {
    ...
    browserService:BrowserService;
    ...
}
// exporting the used interface once again
export { BrowserService }

Subsequently, it is possible for us to even import this type

// importing the re-exported type
import {IPrimaryNavigation, IPrimaryNavigationOpts
        BrowserService } from "./interface";

export class PrimaryNavigation implements IPrimaryNavigation {
   public opts:IPrimaryNavigationOpts;
   ...
   mounted():void {
        ...
        this.listenForBootstrap(this.opts.bsNav, this.opts.browserService);
    }
    listenForBootstrap(menuName:string,browserService:BrowserService):void {
    //listenForBootstrap(menuName:string,browserService:<???>):void {
    //                                                   ^^^ here lies the issue - 
    // I aim to achieve what IPrimaryNavigationOpts.browserService does but encountering difficulties.
    // Importing IBrowserService explicitly doesn't seem necessary.

    }
}

Answer 3

Answer №2

Here's one way to write it:

browserNavService: typeof IPrimaryNavigationOpts.browserService

Answer 4

Here's one way to write it:

browserNavService: typeof IPrimaryNavigationOpts.browserService

Retrieve a specific key from a TypeScript interface

Answer №1

Answer №2

Similar questions

Error: The lockfile and package.json file are not synchronized when running npm

Converting CommonJS default exports into named exports / Unable to load ES module

Inference in Typescript - Detecting unknown key in an object

Unable to open Bootstrap modal using jQuery within a TypeScript class in AngularJS2 (rc5)

Is there a way to display the number of search results in the CodeMirror editor?

The TypeScript compiler is tolerant when a subclass inherits a mixin abstract class without implementing all its getters

Can you tell me the appropriate type for handling file input events?

Modify the name of the variable when sending the object to an HTTP service in Angular version 6

Encountering a TS(2322) Error while Implementing Observables in Angular 12

Building a customized Mui clip with child support: A step-by-step guide

Unlocking the potential of the date-range picker in Material Angular: extracting value between selected dates

Extracting data from an array using Angular

Some files are missing when performing an npm install for a local package

What is the process of integrating SCSS into an Angular2 Seed Project?

Encountering a WriteableDraft error in Redux when using Type Definitions in TypeScript

Guide on creating proxy functions with parameter tuples for complex functions in TypeScript

Mastering the Correct Usage of AuthGuard

When another page is refreshed, Angular routing redirects back to the home page

Obtain PDF File using Typescript

Can the type of a template literal be flipped in any way?