Getting started with imports in typescript package

Having trouble with imports in a TypeScript package.

I have two classes, A and B, located in the models directory.

Currently, I am importing class B into class A like this:

import B from "models/B"

interface A {
   b: B
}

export default A;

However, after building, the A.d.ts file cannot recognize the B interface.

I've attempted to set the exports in the package.json but it's still not resolving the issue.

How can I successfully import an interface into another interface? I need to be able to use these interfaces directly after installation, for example:

import A from "@space/my-package/models/A"
javascripttypescriptnpm

Answer №1

It's highly likely that there are some paths aliases set up in your tsconfig.json to map the absolute path models/B to an actual path on your system.

According to the TypeScript documentation on module and paths resolution: (emphasis added)

The TypeScript compiler has additional flags to indicate transformations that are expected during the source-to-output process.

It's important to note that the compiler does not execute these transformations; it simply uses this information to resolve module imports to their definition files.

Therefore, there are essentially two separate path resolution systems at work:

  • TypeScript compilation, governed by flags in tsconfig.json, preserves path structures without modification in its output
  • Your project's compilation (bundling, consumption, or another TypeScript compilation) relies on its own configuration (potentially another tsconfig.json if using TypeScript)

As outlined in the documentation, the TS flags in tsconfig.json should match the final compilation behavior.

If you define path aliases in the module's tsconfig.json without a corresponding setup in the consuming project, proper path resolution may not occur.

It's generally advisable to avoid absolute paths in libraries/modules intended for use by other projects, unless they rely on packages located in a node_modules directory (referencing them by package name rather than obscure aliases).

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

How to eliminate quotation marks from an array in JavaScript?

const original_data = ["alpha,beta,gamma","1,2,3","apple,banana,cake"]; updated_data = ["alpha,beta,gamma,1,2,3,apple,banana,cake"] The function is returning the original_data, but I require the updated_data. ...

javascriptjsonnode.jsmongodb

Script for converting Fixed Positioned Elements to Static

I am frequently finding that elements on web pages are causing disruptions due to their fixed positioning. I am exploring ways to disable the position: fixed CSS rules on any website I visit. To address this issue, I have developed a userscript specifical ...

javascriptcssfirefoxgreasemonkey

I am having trouble with an undefined variable in my expressjs server.js file. How can I properly reference

When setting up ExpressJS, I have a file named server.js where the following code is executed: import { call_method } from '../hereIam.mjs'; const process_db = async () => { console.log(this); // undefined call_method(this); }; console. ...

javascriptnode.jsexpressthis

What is the best way to send a function to the child component?

I need help with passing a function to a child component in React. Specifically, I have a component with a modal for confirming the deletion of an item. How can I pass a delete function to the modal so that when the "Agree" button is clicked, it triggers t ...

javascriptreactjsmaterial-ui

Using AJAX to Verify Google Recaptcha V3 Response

One of my functions is used to make an Ajax POST request : function ajaxPost(url, data, callback) { var req = new XMLHttpRequest(); req.open("POST", url, true); req.addEventListener("load", function () { if (req.status >= 200 && ...

javascriptphpajaxrecaptcha

verifying that all characters in an array are permissible

Can someone explain why this code always returns false even when I enter "abcdef" into the prompt, which should make it return true? var userinput = prompt('Enter characters:'); var lowercase = userinput.toLowerCase(); var allowedcharacters = ...

javascriptarraysstring-matching

What methods does Angular use to display custom HTML tags in IE9/10 without causing any issues for the browser?

Exploring web components and utilizing customElements.define tends to cause issues in IE9/10. I've noticed that Angular is compatible with IE9/10, and upon inspecting the DOM tree, it seems like Angular successfully displays the custom element tags. ...

javascriptangular

Is it possible to use cakephp and AJAX to determine if a table is empty?

Is there a way to determine if a table is empty using CakePHP and AJAX? In my index.ctp, I have included an image that, when clicked, will notify the user about the status of the table. If the table is empty, an alert box will pop up; otherwise, the user w ...

javascriptajaxcakephp

What is the most efficient way to restrict multiple input fields, each using v-model, to only accept numeric values in Vue.js without duplicating code for every input field?

I have several input fields in Vue.js that I want to restrict to only accept numbers. I want to prevent users from entering any characters except digits from 0-9. I managed to achieve this successfully with a solution that is resistant to copy-paste: C ...

javascriptvue.jsinputvuejs2v-model

Utilizing JavaScript to enable HTML checkbox to be checked automatically

I am currently working on a constructor that generates checkboxes within a loop. My issue lies in attempting to set these checkboxes as checked, however, it doesn't seem to be functioning correctly. Below is the code snippet: funct ...

javascripthtmlcheckbox

Encountering issues with `npm run build:prod` on Ubuntu 16.04, whereas it runs smoothly on

I've encountered errors when attempting to run "npm run build:prod" on Ubuntu 16.04, even though I don't face the same issues on Windows 10. Both npm and node are up-to-date. It's unclear whether the problem lies with npm or angular. After ...

angularubuntunpmnpm-run

Triggering the JavaScript KeyUp() event for input values consisting of multiple digits

I'm currently working on a JavaScript project that involves displaying numbers from 1 to N based on user input. I am utilizing the keyup() event for this functionality. When the input field is cleared, it correctly displays nothing thanks to the empty ...

javascriptjqueryjquery-eventskeyup

NodeJS: Extract images based on specified coordinates

Dealing with images that contain text can be a challenge, but by using tesseract and the imagemagick node module, I was able to extract the text successfully. The only issue I encountered was related to the image size. https://i.sstatic.net/XldZC.png For ...

javascriptnode.jsnpmimagemagicktesseract

Arranging icons at the bottom of the post with a text box that changes dynamically

My challenge is that when the content in a box overflows, the box size increases and pushes the icons out of place. I want to ensure that the icons remain in a fixed position. This is how it currently looks: The comment, delete, and likes count end up on ...

javascriptjqueryhtmlcss

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

javascripthtmljquerycss

Obtaining the MapOptions object from a map using Google Maps API version 3

Previously in Google Maps api v2, you were able to retrieve map parameters like the type and zoom directly from the map object. However, in version 3, the setOptions method is used to configure parameters, but there is no equivalent method like getOption ...

javascriptgoogle-mapsgoogle-maps-api-3

How can I add an element to the DOM in React before the render() method is executed?

Currently, I am working with React in conjunction with Rails and incorporating a charting library known as AnyChart. However, the AnyChart code in my render method automatically searches for a <div id="container"></div> element to connect the c ...

javascriptreactjs

include a new value to the current state array within a react component

I am working with an array in React State and I need to add a new property called Value. However, every time I try to add it, it creates a new item in the array. What I actually want is for the new property to be added as follows: value: '' Belo ...

javascriptreactjs

Instructions for applying a specific style to TextFields using a theme provider

Custom transitions and colors have been added to the textfields using the makeStyles hook in the component. The issue lies in needing to define these customs every time they are used in a component. There is a desire to establish them in the theme provid ...

javascriptreactjsmaterial-ui

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

I currently have two pages within my website, one is called details.page and the other is maps.page. In the details page, I have set up a search input as shown below : <form method="get" id="form-search" data-ajax="true" action="maps.page"> ...

javascriptjqueryhtmlajax