IntelliJ not capturing interface with imported reference path

Directory Layout

frontend
  | static
    | ts
      | react
        |components
          AnotherFile.d.ts
          Index.d.ts

Situation

While implementing AnotherFile.d.ts and Index.d.ts, there are no errors flagged by IntelliJ for the following code:

Index.d.ts

interface myFuncType {
  (n: number): void;
}

AnotherFile.d.ts

/// <reference path='./Index.d.ts'/>
interface AnotherType {
  f: myFuncType
}

However, if Index.d.ts imports and uses a class as shown below, IntelliJ highlights 'myFuncType' in AnotherFile.d.ts with error 

TS2304: Cannot find name 'myFuncType'
.

Index.d.ts

import {MyClass} from "static/ts/MyClass";

interface myFuncType {
  (n: MyClass) : void;
}

AnotherFile.d.ts

/// <reference path='./Index.d.ts'/>
interface AnotherType {
  f: myFuncType;
}

Observations

  1. Replacing the <reference path.../> line in AnotherFile.d.ts with 
    import {myFuncType} from "static/ts/react/components/Index";
    resolves the error, but the use of <reference path.../> is preferable.
  2. Setting frontEnd as 'Resources Root' allows for relative paths in import statements (e.g., 
    import {myFuncType} from "./Index"
    rather than 
    import {myFuncType} from "static/ts/react/components/Index";

Query

Is there a way to resolve the issue in the second scenario without adding an "import" statement in AnotherFile.d.ts.

typescriptintellij-ideatypesimport

Answer №1

When you include the import statement in your Index.d.ts file, it transforms it into a module. Modules can only be imported explicitly using one of the import forms, unlike namespaces.

It is important to determine the type of application you are developing when defining your interface in the d.ts files. For modular applications, modules must be used. For global apps intended to be accessible from the global scope (such as through <script src=...> in a browser), namespaces should be utilized. Mixing both in the same code will lead to errors.

For further information, refer to https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html

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

Retrieving specific properties from a JSON object and logging them

I am attempting to access JSON Object properties directly and log them using the following function : loadProcesses(filter?){ this._postService.getAllProcess(filter) .subscribe( res=> { this.processListe = res; // console.log(this.p ...

jsontypescriptangular

"Is it possible in Typescript to set the parameters of a returning function as required or optional depending on the parameters of the current

I am currently exploring Typescript and attempting to replicate the functionality of styled-components on a smaller scale. Specifically, I want to make children required if the user passes in 'true' for the children parameter in createStyledCompo ...

javascriptreactjstypescriptstyled-components

Conditional Return Types in a Typescript Function

There is a function that can return two different types, as shown below: function doSomething(obj: {a: string, b?: string}): string | number { if (obj.b) { return 'something' } return 1 } When the function is called with an object cont ...

typescripttypescript-typingstypescript-generics

Using TypeScript controllers to inject $scope

Currently, I am in the process of creating my initial typescript controller and encountering a slight challenge in comprehending how to utilize $scope effectively in order to reference elements within various code blocks. Below is the relevant snippet of c ...

angularjstypescript

Display the information within an array

Using React with TypeScript to set an image file to useState Initially, I set it directly like this: <div> {img[0]} </div> When viewing the webpage: <div> 'string =>'<img src={require("../../asset/images/img_pictu ...

reactjstypescript

Develop interactive web applications using Typescript

Having difficulty compiling and executing the project correctly in the browser. The "master" branch works fine, but I'm currently working on the "develop" branch. It's a basic web project with one HTML file loading one TS/JS file that includes i ...

javascripthtmltypescriptweb

When attempting to parse JSON using Json.parse, it throws an error saying: "SyntaxError: Unexpected end of JSON input

Hello everyone on stackoverflow, The Issue I am currently facing an problem when trying to parse a string into JSON. The string that needs to be parsed is sent from the client to the server using a POST method. The server handles this request with the fo ...

node.jsjsontypescriptfetch

Equivalent Types that Do Not Compile

After reading the article on Building Complex Types in TypeScript Part 2, I encountered issues with the Equal Type code provided: Implementing Type Equality type Equal<A, B> = (<T>() => T extends A ? true : false) extends (<T> ...

typescript

Raycast failing to detect objects that have been displaced from their original starting position

I am facing a challenge with using a raycast to locate objects under the mouse cursor. The issue arises when the objects are not positioned at (0, 0, 0) as they cannot be detected by the raycast. Once I move the object to any other position, it no longer r ...

typescriptthree.js

Modify the name of the document

I have a piece of code that retrieves a file from the clipboard and I need to change its name if it is named image.png. Below is the code snippet where I attempt to achieve this: @HostListener('paste', ['$event']) onPaste(e: ClipboardE ...

javascriptangulartypescript

The custom pagination feature in MUI DataGridPro does not display the rowsPerPageOptions dropdown as expected

I am currently utilizing React in my project. "react": "^18.2.0", "@mui/material": "^5.10.7", "@mui/x-data-grid-pro": "^5.16.0" An issue arises with the visibility of the rowsPerPageOptions dr ...

javascriptreactjstypescriptreact-hooksmaterial-ui

How to handle an already initialised array in Angular?

I came across an interesting demo on exporting data to Excel using Angular 12. The demo can be found at the following link: This particular example utilizes an array within the component TypeScript file. import { Component } from '@angular/core' ...

angulartypescriptweb

Show an array of arrays using a visual table representation

I am working with an Array of arrays in my data, and they are structured like this : https://i.sstatic.net/3grh6.png Now, I am trying to showcase this array in a table, but all I am getting is a blank page. Here is the HTML code for the table (I have incl ...

angulartypescripthtml-table

Parameter types retain their generality when constrained by other types

In my function, I have a generic parameter T and another parameter that is restricted based on the passed T. For example: const example = { x: 'hello', y: 'world', } as const function test<T extends object, K extends keyof T> ...

typescript

Unable to display surface chart using Plotly in Angular 12

I've been attempting to display a 3D model using Plotly (https://github.com/plotly/angular-plotly.js/blob/master/README.md), but unfortunately, the chart is not appearing. component.component.ts import { Component } from '@angular/core'; @ ...

angulartypescriptchartsplotlyangular12

What is the recommended approach in Angular for unassigned @Input() variables when using TypeScript strict mode?

Issue at Hand After upgrading my Angular version from 10 to 13, I encountered a problem with the new TypeScript strict compiler mode. The upgrade required me to assign values to all declared variables upon initialization, causing issues with properties de ...

angulartypescriptcompiler-errorsangular13

What is the best way to allocate string types from an enum using Typescript?

Within my code, I have an enum that includes a collection of strings export enum apiErrors { INVALID_SHAPE = "INVALID_SHAPE", NOT_FOUND = "NOT_FOUND", EXISTS = "EXISTS", INVALID_AUTH = "INVALID_AUTH", INTERNAL_SERVER_ERROR = "INTERNAL_ ...

typescript

When using Angular version 13 alongside rxjs 7.4 and TypeScript 4+, an issue arises with the error message: "Declaration file for module 'rxjs' not found"

Currently embarking on a new Angular app using V13 and rxjs7.4, I encountered the error shown above when trying to import: import { BehaviorSubject } from 'rxjs'; Initially, I attempted to address this by creating a typings.d.ts declaration as s ...

angulartypescriptrxjs

Is it feasible to access a service instance within a parameter decorator in nest.js?

I am looking to replicate the functionality of Spring framework in nest.js with a similar code snippet like this: @Controller('/test') class TestController { @Get() get(@Principal() principal: Principal) { } } After spending countless ho ...

javascriptnode.jstypescriptdecoratornestjs

Typescript error message TS2693: The identifier 'Note' is used as a value although it refers to a type

I have been attempting to incorporate Typescript into my Firebase project, but unfortunately I am encountering the following errors: error TS2693: 'Note' only refers to a type, but is being used as a value here. The code snippet I used is as fo ...

angulartypescript