How to Import a Module into a TypeScript Project?

I am currently working on creating a lookup table for some static data by defining an object in a TypeScript file:

newTSFile.ts

export declare module FontList { 
   export DEFAULT_DATA: {
       'james': {
           'age': '23'
        },
        'jack': {
           'age': '22'
        }
   }
}

When I try to import this in my main TypeScript file, I use the following syntax:

import { FontList } from './newTSFile';

// 
console.log("font list: ", FontList)

However, during compilation, I encounter the error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module .../FontList
. I am unsure about what mistake I might be making in the import process.

Answer №1

Here is a suggestion:

fontList.ts

export const FontList: { 
       'james': {
           'age': '23'
        },
        'jack': {
           'age': '22'
        }
   }

main TypeScript file

import { FontList } from './fontList';

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

What is the best way to simulate an observable variable in a unit test?

I am currently in the process of learning how to write unit tests. The following code snippet is part of the coursework that I am studying: #spec.ts ... beforeEach(waitForAsync(() => { const coursesServiceSpy = jasmine.createSpyObj("Cours ...

Enforcement of AJAX Header Modification

I am currently in the process of developing an Apache Cordova application for Android. My goal is to have the ability to customize the headers for the AJAX requests that are being sent out, which includes fields such as Host, Origin, and Referer. Due to ...

What is the best way to save the various canvas images within a division as a single png file?

Hey there, I currently have a setup with multiple canvas elements within a main division structured like this: <div id="main"> <canvas id="one"> <canvas id="two"> <div id="main_2"> <canvas id="three"> </div ...

What steps should I take to resolve issues with the npm installation on Linux?

I'm encountering an issue while attempting to use npm install in order to install a package. Despite my attempts to update and re-download from the root directory, I am unable to resolve the error. hackathonday1-2 git:(save-button) ✗ npm install f ...

Sort columns in DataTables.js that contain HTML links with numerical text

Is there a way to sort columns in DataTables.js that contain HTML anchor tags with numerical values, like <a href="#">123</a>? I'm looking to sort these columns numerically. I've looked at the DataTables HTML sorting auto-detection e ...

Encountering a Firebase error: createUser failed due to missing "password" key in the first argument in AngularJS

Recently, I started learning Angular and decided to follow an online tutorial on creating a chat application. However, I encountered an issue when trying to register with an email and password - the error message "Firebase.createUser failed: First argument ...

Class with abstract properties that are defined by its child classes

Is there a way to use TypeScript's abstract class to enforce defining functions and variables within the class for implementation? abstract class Animal { sound: string; speak() { console.log(this.sound); } } class Cat extends Animal { s ...

Using componentDidUpdate() to manage state changes in conjunction with the React-APlayer library

I'm currently facing an issue with updating the state in my parent component using data fetched from a fetch request. The audio player library I'm utilizing is 'react-aplayer' (https://github.com/MoePlayer/react-aplayer). While I can m ...

Where should one begin when embarking on the journey to create a real-time chat application using react-native?

My goal is to create a basic chat room application with real-time message functionality. What key aspects should I prioritize and tackle first in this project? ...

Using Vue Draggable in conjunction with VueJS V-if directive

I am facing the challenge of integrating a list with a v-if directive in a Vue-Draggable component. The scenario is that users can rearrange items in a lengthy list, as well as 'hide' certain sections of that list. The issue arises when hidden i ...

Issue with Ajax call not triggering the Controller Action in MVC

I am encountering an issue with making an ajax call to the controller action method that returns a json object. In addition, I need to pass the integer CheckID to the method. Any assistance would be greatly appreciated. Thank you in advance! ***View*** ...

Issues encountered when trying to execute npm start: "The function this.htmlWebpackPlugin.getHooks is not recognized."

My background in web development is weak, and I'm facing a challenging situation. I had to take over the work of a colleague who left, and now I'm trying to finish the site we were working on. Since then, I've been learning about web develop ...

Converting a mapped generic type into a union of tuples in TypeScript: A step-by-step guide

I'm currently in the process of developing a custom function similar to Object.entries, but I want to enhance its typing. My goal is to create a type that, given an object, can provide a strongly typed union of 2-tuples for that object's properti ...

Populate an array with user input values and shuffle the content for random display

I am currently encountering a challenge. I am aiming to design a form that gathers 4 nicknames after submitting the form, and then exhibits them randomly in HTML code using JavaScript My 4 input values are stored in an array. I need to display them random ...

What could be causing my jQuery to only toggle the first arrow in my HTML?

I am facing an issue with a series of divs generated from data, each containing an arrow that should toggle an expandable section. Strangely, only the first div is functioning properly: toggling the arrow icon and revealing the content upon click. When th ...

Exploring the intricacies of AJAX and jQuery: An example encountering a

After clicking the run button, an error appears in the Chrome console and there is no alert displayed. POST http://mysite/gd/add.php 503 (Service Unavailable) The issue seems to be with the index.php file: <html> <head> <script src ...

How can I retrieve a specific number of documents from a database using GraphQL?

I'm looking to create a query in my GraphQL API that retrieves a range of documents, for example fruits(0:30), which would return 29 fruit-related documents from the collection. While I have experience querying documents in graphql using TypeScript, I ...

Issue with A-frame Raycaster not functioning properly; specifically need to determine intersection point with a-sky

I am currently attempting to determine the coordinates where the ray caster intersects with the a-sky element. However, I am facing two main issues: 1) The ray caster is not visible even after adding showline:true 2) The intersection listener is never ...

File Uploading with JavaScript

Imagine you have an element on your webpage like this: <input id="image-file" type="file" /> With this element, users can click a button to select a file through their browser's "File open..." dialog. If a user selects a file and clicks "Ok" ...

What is preventing me from utilizing the import syntax to bring in a coffeescript file within typescript?

So here's the deal: I've got a typescript file where I'm importing various other typescript files like this: import ThingAMajig from '../../../libs/stuffs/ThingAMajig'; // a typescript file However, when it comes to importing my ...