When you import objects in Typescript, they may be undefined

I have a file called mock_event that serves as a template for creating an event object used in unit testing. Below, you can find the code snippet where this object is initialized:

mock_event.ts

import {Event} from "../../../models/src/event";
import {EventUserView} from "../../../models/src/event_user_view";

let validEvent: Event;
validEvent = new Event({
    'eventId': '123',
    'organizer': new EventUserView({
        'displayName': 'Jim'
    })
});

export {validEvent};

However, I am encountering an issue where upon importing the validEvent object, it appears to be undefined. Being relatively new to TypeScript, I suspect that I might have overlooked something simple. Even setting a breakpoint at the export statement reveals that the object remains undefined, despite being instantiated on the line just before. No exceptions are thrown either. Can anyone shed light on what might be causing this unexpected behavior?

typescriptimport

Answer №1

It appears you may have some confusion about the functionality of export {validEvent};. It seems like it might not be achieving the results you desire.

If you're looking for a default export with the validEvent as part of an object:

export default { validEvent }

// To import:
import MockEvent from './mock_event'
MockEvent.validEvent

Alternatively, if you prefer a named export:

export let validEvent: Event;
validEvent = new Event({
    'eventId': '123',
    'organizer': new EventUserView({
        'displayName': 'Jim'
    })
});

// To import:
import { validEvent } from './mock_event'

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

Base URL for making Http Requests in an Angular application

I am currently working on an angular application that is hosted on a test server running IIS with a .net core backend. The application is set up on a virtual directory, for example www.myTestApp/crm (the actual domain name being fictional). During the buil ...

.netangulartypescriptiis

"Implementing type definitions for a function that updates records with nested properties and callback support

I am currently working on a function that updates nested values within a record. I have different versions of this function for paths of varying depths. My main struggle is figuring out how to properly type the callback function used when updating the val ...

typescripttypescript-generics

"Create a separate function for the pipeable operator in RXJS for enhanced code

After working on some code, I came up with the following implementation this.form.valueChanges.pipe( take(1), map(val => // doSomething), exhaustMap(val => // someInner observable logic return of({someValue}) ) ).subscrib ...

angulartypescriptrxjs

Using the Ajax method from a separate class in TypeScript: A step-by-step guide

Recently, I started learning about typescript and ajax. One of the challenges I encountered was while creating a method in typescript for making ajax calls that can be used across classes: myFunc(value: string): JQueryPromise<any> { var dfd = $. ...

javascriptjqueryajaxtypescript

Next.js's router.push method directs the user to the specified URL and refreshes the page

I am facing an issue with my page structure: pages [re] login [slug.tsx] When I navigate from http://localhost:3000/in/login/data1 to http://localhost:3000/in/login/data2 using router.push on button click, the route is updated but th ...

reactjstypescriptnext.jsrouter

The Enum object in TypeScript has not been declared or defined

For my TypeScript application, I am utilizing WebPack to transpile and bundle the code. The final result is intended to be used in a pure JavaScript website. One of the components in my application is an enum defined as follows: export const enum ShapeTyp ...

javascripttypescriptwebpack

Encountering a "property does not exist" error while using VS Code TypeScript within a Vue.js project

I am working on a Vuejs project in Typescript. The project compiles and runs perfectly without any errors. However, I am facing an issue with the TS linter. In my individual component files, I am using the component decorator as shown below: //videocard.c ...

typescriptvue.js

Creating a versatile protractor framework to streamline multiple project implementations

There's a concept in the works for creating a 'protractor core' that will be utilized by various projects for UI testing. Currently, I have an Angular project called 'project1' with e2e tests (cucumber-protractor-typescript) that c ...

angularjstypescriptprotractorcucumber

Enhance the navigation scroll bar with a blur effect

I'm looking to create a navigation bar with a cool blur effect as you scroll. Everything seems to be working fine, except when I refresh the page the scrollbar position remains the same and window.pageYOffset doesn't give me the desired result. T ...

reactjstypescriptnext.js

Navigating through the Angular Upgrade Roadmap: Transitioning from 5.0 to 6

As per the instructions found in this helpful guide, I executed rxjs-5-to-6-migrate -p src/tsconfig.app.json. However, an error is appearing. All previous steps were completed successfully without any issues. Any suggestions on how to resolve this? Please ...

angulartypescriptrxjsangular5angular6

Angular8 does not recognize custom paths that have been added to the tsConfig file

Hey there! I'm facing an issue with Angular not recognizing a custom path I added to my tsConfig file. It seems like Angular already has a baseUrl property set to ./, starting from the current folder where the tsConfig file is located. The code snippe ...

angulartypescript

Issue: Unable to assign value to 'googleUri' property of null. Resolving with Interface for two-way binding?

Can anyone help me figure out why I keep getting a 'set property of null' error while attempting 2way binding in my interface? Whenever I submit the form and trigger the onSave function, I encounter the error "Cannot set property 'googleUri ...

angulartypescriptangular5

Unable to locate the term "module"

I've been working on a TypeScript file that includes an exported function called sum: This script is meant to be run in Node.js. function sum(a:number):number{ return a; } module.exports.sum=sum; I'm encountering some issues and I'm not ...

node.jsunit-testingtypescriptmocha.jschai

Is there a way to verify a user's authorization status within Next.js 12.1.6 middleware?

I'm implementing a Nextjs middleware to redirect unauthenticated users to the login page. It's currently working locally, but not on the remote server: export async function middleware(req: NextRequest) { const { cookies } = req if (!cook ...

typescriptnext.js

Incorporating timed hover effects in React applications

Take a look at the codesandbox example I'm currently working on implementing a modal that appears after a delay when hovering over a specific div. However, I've encountered some challenges. For instance, if the timeout is set to 1000ms and you h ...

javascripthtmlcssreactjstypescript

How can a border be applied to a table created with React components?

I have been utilizing the following react component from https://www.npmjs.com/package/react-sticky-table Is there a method to incorporate a border around this component? const Row = require("react-sticky-table").Row; <Row style={{ border: 3, borderco ...

javascriptreactjstypescript

What is the best way to change the name of an imported variable currently named `await` to avoid conflicting with other variables?

Here is the given code snippet: import * as fs from 'fs'; import {promises as fsPromises} from 'fs'; // ... // Reading the file without encoding to access raw buffer. const { bytesRead, buffer as fileBuffer } = await fsPromises.read( ...

node.jstypescriptasync-awaitlint

Oops! The 'map' property cannot be found in the type 'Observable<User>'

In my online shopping project that combines Angular and Firebase, I implemented the AuthGuard to verify user login status before accessing various links including ./check-out. However, I encountered an issue with importing map for Observable.User. All comp ...

angulartypescriptfirebaserxjsangularfire2

Tips for accessing the 'index' variable in *ngFor directive and making modifications (restriction on deleting only one item at a time from a list)

Here is the code snippet I'm working with: HTML: <ion-item-sliding *ngFor="let object of objectList; let idx = index"> <ion-item> <ion-input type="text" text-left [(ngModel)]="objectList[idx].name" placeholder="Nam ...

htmlangulartypescriptindexingngfor

Determine the data type based on the object property

Can a versatile function be created to automatically determine the type based on an "external" object property? Consider the following scenario: const resolversMap: { overallRankingPlacement: (issuer: number, args: Record<string, any>, context: Re ...

typescripttyping