Tips for bringing in a class that has been exported from a module

I have a typescript file (generated) that is being used in my angular project.

The contents of this file called contracts.ts are as follows:

export module A.B.C.Models {
  export class Activity {
    prop1: number;
    ...
  }
}

I am attempting to use these classes in another file within the same folder, but I am struggling to correctly import the classes and would also like to create an alias for the overly lengthy module name.

import { Activity } from './contracts';

However, the code does not compile and shows the following error:

Can't find module 'contracts'

Since the file is generated each time our database model changes, I am unable to modify it.

Any assistance would be greatly appreciated. Thank you in advance.

typescript

Answer №1

If you find yourself utilizing an outdated typescript feature known as internal modules or namespaces (export module A.B.C.Models is similar to export namespace A.B.C.Models), you may choose to import and utilize the class in the following manner:

import * as c from './contracts'

c.A.B.C.Models.Activity

However, it is not recommended to mix JavaScript modules and namespaces. For more insight on this matter, refer to this discussion:

While namespaces are likely here to stay, it is advisable not to use them due to the availability of better, more standardized, and contemporary patterns through module usage. Exporting the class directly allows for easier utilization with the import syntax:

//contacts.ts
export class Activity {
  prop1: number;
   ...
}
//usage.ts
import { Activity } from './contracts';

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

When I try to add data in Typescript, I am receiving an undefined value

I'm currently dealing with a state in my code: const [file, setFile] = React.useState() This is the function I use to set the state: const fileselectedHandler = (event: any): void => { setFile((event.target.files[0])) } However, I enco ...

reactjstypescript

Caught up: TypeScript not catching errors inside Promises

Currently, I am in the process of developing a SPFx WebPart using TypeScript. Within my code, there is a function dedicated to retrieving a team based on its name (the get() method also returns a promise): public getTeamChannelByName(teamId: string, cha ...

javascriptreactjstypescriptes6-promisespfx

Guide to creating a Unit Test for an Angular Component with a TemplateRef as an Input

Looking to create unit tests for an Angular component that can toggle the visibility of contents passed as input. These inputs are expected to be defined as TemplateRef. my-component.component.ts @Component({ selector: "my-component", templateUrl ...

angulartypescriptunit-testingkarma-jasmineangular2-template

Using the spread operator to modify an array containing objects

I am facing a challenge with updating specific properties of an object within an array. I have an array of objects and I need to update only certain properties of a single object in that array. Here is the code snippet I tried: setRequiredFields(prevRequir ...

javascriptreactjstypescript

Using Vue in conjunction with TypeScript and CSS modules

I am facing an issue with my SFC (single file vue component) that utilizes TypeScript, render functions, and CSS modules. <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ props: { mode: { type: String, ...

typescriptvue.jscss-modules

Watching - transforming / combining

I am a beginner when it comes to working with Observables. Here's the Effect that I am using: My goal is to dispatch the PositionUpdateAction or PositionFailedAction before the SunriseSunsetAction is dispatched. Currently, what happens is that the r ...

typescriptobservablengrxngrx-storengrx-effects

Creating a new generic class in Angular 7 by extending an existing generic class

In TypeScript, I have defined the following interfaces and classes: export interface PageInterface<T> { count: number; previous: string; next: string; results: T[]; } export class Page<T> implements PageInterface<T> {} ...

angulartypescriptclassgenericsinterface

Retrieving the computed value created from an axios get request in Vue

I am attempting to retrieve the computed value in created for a GET request. I have declared the classroomBackground as a string in my data. data() { return { classroomBackground: '' as string, ...

typescriptvue.jslifecycle

Error Encountered with Next.js 13.4.1 when using styled-components Button in React Server-Side Rendering

I am currently working on a React project using Next.js version 13.4.1 and styled-components. One problem I'm facing is with a custom Button component that I've created: import React from 'react'; import styled from 'styled-compone ...

javascriptreactjstypescriptnext.jsnext.js13

Adding TSLint to AngularCLI for on-the-fly code analysis (step-by-step guide)

Desired Outcome: I am using sublime IDE and would like my typescript code to be automatically linted as I type, instead of relying on a watcher or any ng commands. I have an angularcli project and I am examining the .angular-cli.json file. In the lint a ...

angulartypescriptsublimetext3linttslint

Unable to locate module: Issue: Unable to locate '@angular/cdk/tree' or '@angular/material/tree'

Currently utilizing Angular 5 and attempting to create a tree view that resembles a table layout. https://stackblitz.com/edit/angular-hhkrr1?file=main.ts Encountering errors while trying to import: import {NestedTreeControl} from '@angular/cdk/tree ...

angulartypescripttreeviewangular-material

Pipe for Angular that allows for searching full sentences regardless of the order of the words

I am looking to create a search bar that can search for the 'title' from the table below, regardless of the word order in the sentence. I attempted to use a filter pipe to check if the search string exists in the title. I also experimented with ...

angulartypescript

Having trouble retrieving image information within the Asp.net core controller

I am facing an issue trying to store image details in the database through Angular and ASP.NET Core. I am unable to retrieve the image data sent from Angular in the controller. Although I am able to obtain the image information using the [FromForm] attribu ...

angulartypescriptasp.net-core

Navigating a faulty index.d.ts file that came with the npm package

Recently, I came across an npm package that did not have TypeScript but provided its own index.d.ts file. However, the types in this file were incorrect and contributed by someone who was not actively maintaining the package. When I attempted to reference ...

typescriptdefinitelytyped

I need to explicitly tell TypeScript that there are optional numeric properties on two objects that need to be compared

I am faced with the challenge of sorting an array of objects based on an optional integer property called order, which falls within the range of [0, n]. To achieve this task, I am utilizing JavaScript's Array.prototype.sort() method. Given that the p ...

typescript

When using react-admin with TypeScript, it is not possible to treat a namespace as a type

Encountering issues while adding files from the react-admin example demo, facing some errors: 'Cannot use namespace 'FilterProps' as a type.' Snippet of code: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orde ...

typescriptreact-admin

An error message stating 'Cannot read the name property of undefined' is being displayed, despite it being expected to be defined

interface InputField { readonly label : string; readonly data : string; readonly displayInline ?: boolean; } class FormField implements InputField { readonly label : string; readonly data : string; readonly displayInline ?: boolean; constru ...

typescript

Personalizing Dialog Title in material-ui

While delving into the world of React and Material-UI, I encountered a challenge in updating the font color in the DialogTitle component. After browsing through various resources, I came across a helpful link that suggested overriding the dialog root class ...

reactjstypescriptmaterial-ui

Techniques for simulating functions in Jest

I have a pair of basic components that I'm currently creating tests for using jest. My goal is to verify that when I click on a currencyItem, the corresponding array gets added to the select state. To achieve this, I am passing the handleCurrencyToggl ...

javascriptreactjstypescriptjestjsts-jest

Creating a dynamic matrix table in Angular 2

I am looking to create a dynamic matrix table using Angular 2 that displays test results in a specific format: Test1 Test2 Test3 A 1,5 1,8 1,6 B 1,8 1,6 1,9 C 1,6 1,6 1,8 This example data demonstrates the structure ...

angulartypescript