The 'XX' Typescript type does not match the type import ("/Volumes/D/test").XX.ts(2322)

I wrote a piece of code to customize the default configuration for a Class, but I encountered an unusual error message:

Type 'IConfig' is not assignable to type 'import("/Volumes/D/www/js/tsc_1/test").IConfig'.ts(2322)

It seems that I cannot simply assign the same variable type to another. Please refer to the attached screenshots for details.

export default interface IPlugin {
  setConfig<T>(config: T): T
}

export interface IConfig {
  port: number
}

const _config: IConfig = {
  port: 7001
}

class Server implements IPlugin {

  public config : IConfig
  constructor() {
    this.config = _config
  }

  setConfig<IConfig>(configNew: IConfig) {
    this.config = configNew
    // ERROR - Type 'IConfig' is not assignable to type 'import("/Volumes/D/www/js/tsc_1/test").IConfig'.ts(2322)

    return configNew
  }
}

https://i.sstatic.net/rMJaZ.png https://i.sstatic.net/9jUVR.png

Answer №1

After making some adjustments, the issue is now resolved in this way. It's important to note that I relocated the definition of the generic type to the IPlugin itself and specified the type when extending:

export interface IConfig {
  port: number
}

export declare interface IPlugin<T> {
setConfig(config: T): T
}

const _config: IConfig = {
  port: 7001
}

class Server implements IPlugin<IConfig> {

  public serverConfig : IConfig
  constructor() {
    this.serverConfig = _config
  }

  setConfig(config: IConfig) : IConfig {
    this.serverConfig = config
    return config
  }
}

[Playground][1]

  [1]: https://www.typescriptlang.org/play/?ssl=24&ssc=2&pln=1&pc=1#code/KYDwDg9gTgLgBASwHY2FAZgQwMbDgSQGEIl0EBzOAbwCg45JYAuOJAVwFsAjNGgXxo1QjeABNg2ADaYoeZKgw48%20AAqS25ZAB4AKgD5qNAM7AYxUhQAU2EmXIsdASgf9BNpEfgB9d3ZZFbCjgAXkN6ERYAdgAGaIBGVxopTCMjOABlNAA3NEQOMElgDmAUNNV1TSQtAItyA1o6BjYuSQRsOBMoHKhzOzh-XopG908oNmwYaEtHMPo4GAALBCMAOk7uwcpQn0DyRoFGkzNd612B3Znz2tn6ReW17LRNkLhfIbm4WRg2KCRX3f2riAA

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorrect typings being output by rxjs map

combineLatest([of(1), of('test')]).pipe( map(([myNumber, myString]) => { return [myNumber, myString]; }), map(([myNewNumber, myNewString]) => { const test = myNewString.length; }) ); Property 'length' does not ...

Typescript's contravariant object values

Here is an example of an overloaded Typescript function: function clearField(o : Record<"field", string>, nullify : false) : void function clearField(o : Record<"field", string | null>, nullify : true) : void function clearF ...

Transforming an array into an object using TypeScript

I am attempting to create a generic type for a function that transforms an array into an object, like so: type ObjectType = { id: number; name: string; status: string }; const xyz: ObjectType[] = [ { id: 1, name: "X", status: " ...

Separate files containing TypeScript decorators are defined within a project

(Let's dive into Typescript and Angular2, shall we?) Having primarily coded in Symfony2 with annotations, I found it convenient to configure entity mapping, routing, and other features using yaml, xml, or plain PHP. This flexibility was great for cre ...

Embracing the "export ... from" feature in the TypeScript compiler

Can the tsc compiler handle this particular export statement? export {PromiseWrapper, Promise, PromiseCompleter} from 'angular2/src/facade/promise'; Your assistance is greatly appreciated! ...

What could be causing my Svelte store's subscribe() method to trigger despite no change in value?

One of the Svelte stores I am using is called activeAccountIndexStore: export const activeAccountIndexStore: Writable<number | "native" | null> = writable(null); Initially, the value of the store is null, but it gets set to either a spec ...

TypeScript is throwing an error because a value has been declared but never actually used in the

private tree_widget: ITreeWidget; private $ghost: JQuery | null; private drag_element: DragElement | null; private previous_ghost: IDropHint | null; private open_folder_timer: number | null; constructor(tree_widget: ITreeWidget) { this.tree_widget = t ...

Requesting Next Page via Angular GET Method for Paginated API

Having trouble loading data from a paginated REST API using the code below. Any suggestions for a better approach are welcome! component.ts import { Component, OnInit } from '@angular/core'; import {HttpClient} from '@angular/common/http&a ...

Is there a way to access the result variable outside of the lambda function?

My goal is to retrieve data from an external API using Typescript. Below is the function I have written: export class BarChartcomponent implements OnInit{ public chart: any; data: any = []; constructor(private service:PostService) { } ngOnInit( ...

"Launching" conduit for Observable

Is there a way to attach two pipes to an HttpClient request in order to execute functions at the beginning and end of the request? I have discovered the "finalize" operator for executing a function when the request is finished, but I am looking for an equi ...

An issue arising with the TypeScript antlr4ts listener type

I am currently attempting to incorporate the antlr4 parser into an angular project. Within a dataservice class, there is a function being called that appears as follows: parseRule() { const ruleString = ' STRING TO PARSE'; const inputS ...

Determine the data type of an individual attribute within a collection of classes

I am working with a series of classes that have a body property defined within them. Here is an example: class Foo { body: {foo: string} constructor(body: Record<string, string>) { this.body = { foo: body.foo } } } class Bar { body: {ba ...

Error encountered in jquery.d.ts file: Unresolved syntax issue

I am currently in the process of transitioning my jQuery project into a Typescript project. I encountered an issue when attempting to include the jQuery typings from the DefinitelyTyped Github by using the following method: ///<reference path="../../ty ...

Extract the content of a nested JSON object in ReactJS using map function

I am encountering an issue while attempting to map nested JSON data, specifically the error 'Element implicitly has an 'any' type'. The problem arises within the search component at: Object.keys(skills[keyName]).map() Below is the cod ...

Issue with Angular 5 EventEmitter causing child to parent component emission to result in undefined output

I've been trying to pass a string from a child component to its parent component. Child Component: //imports... @Component({ selector: 'child', templateUrl: './child.component.html', styleUrls: ['./child.c ...

Organizing a mat-table by date does not properly arrange the rows

My API retrieves a list of records for me. I would like to display these records sorted by date, with the latest record appearing at the top. However, the TypeScript code I have written does not seem to be ordering my rows correctly. Can anyone assist me ...

Tips for merging arrays conditionally in JavaScript

Currently facing a dilemma without a clear solution, aiming to provide minimal context and focus solely on the problem at hand A worker logs their daily hours at work, stored in the "dayli_data" array. If the worker misses logging hours, it triggers the " ...

Passing data and events between components in React

I'm currently working on developing a dashboard app that includes a basic AppBar and a drawer. I based my design on this Demo. https://codesandbox.io/s/nj3u0q?file=/demo.tsx In the Demo, the AppBar, Drawer, and Main content are all contained within ...

Strategies for implementing searchbar filtering in Ionic3 and Angular5 data manipulation

I'm having trouble displaying product names on my search.html page based on the search bar input. I've tried using the Ionic searchbar component but it's not working. Can anyone help me with this issue? If there's an alternative solutio ...