How to create instance of class TypeScript?

Question

I have the following class:

export declare class FlashMessagesService {
    show: (text?: string, options?: Object) => void;
    grayOut: (value: boolean) => void;
}

And I try to create instance of class:

 import { FlashMessagesService } from 'angular2-flash-messages';
    let _flashMessagesService = new FlashMessagesService();

It invoke an error:

Cannot read property 'show' of undefined

I use this library

I think we need to see the show method or how it's invoked — Frank Modica
– Frank Modica, Commented Oct 7, 2017 at 16:00
... btw I don't think you need the declare keyword - I think that is generally only for ambient context. i.e. it doesn't emit javascript — Meirion Hughes
– Meirion Hughes, Commented Oct 7, 2017 at 16:13

Felipe Sabino · Accepted Answer · 2017-10-07 16:58:16Z

1

I don't think you problem is typescript per se, but with angular dependency injection and how components are composed instead.

If you look at the source code of the package you are using you will see that show function is actually implemented by the FlashMessagesComponent and not by FlashMessagesService itself.

So to create an instance of it on your own without angular's dependency injection it is going to be tricky because you would also need to provide an instance of the abstract class ChangeDetectorRef, which itself might depend on other stuff, so it might get really messy pretty quickly.

something like the code bellow might help you to start playing with it, but it is far from something you would want to use in the real world.

import { FlashMessagesService, FlashMessagesComponent } from 'angular2-flash-messages';
let _flashMessagesService = new FlashMessagesService();
let component = new FlashMessagesComponent(_flashMessagesService, { detectChanges: () => {}} );
console.log(_flashMessagesService.show) // [Function show]

EDIT:

I coded directly here on SO and could not test it (sorry :( ), now checking it more thoroughly it seems that FlashMessagesComponent it not exported, so I don't clearly see a way for you to create an instance without using FlashMessagesModule and angular dependency injection lifecycle.

edited Oct 7, 2017 at 16:58

answered Oct 7, 2017 at 16:27

Felipe Sabino

18.3k6 gold badges80 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

POV Over a year ago

I can not find FlashMessagesComponent

POV Over a year ago

What is it? ` { detectChanges: () => {}} ;`?

Felipe Sabino Over a year ago

I can not find FlashMessagesComponent - sorry, I just checked and ]it is not exported](sourcegraph.com/github.com/moff/…) 😥

Felipe Sabino Over a year ago

{ detectChanges: () => {}} ; it is just a hack to avoid having to create an instance of whatever class is ChangeDetectorRef that is a dependency on the constructor.

POV Over a year ago

It is des not work for me, I put null and it gives me core.es5.js:1020 ERROR TypeError: Cannot read property 'detectChanges' of null

|

Muayyad Ayesh · Accepted Answer · 2017-10-07 15:57:44Z

0

You should create a constructor for your class before :

export class Flashmessages { 
    ...
    //other vars
    constructor(){
        this.myvar = "value";
    }
}

answered Oct 7, 2017 at 15:57

Muayyad Ayesh

1222 bronze badges

3 Comments

POV Over a year ago

Where? And what should be in construct?

Frank Modica Over a year ago

I wouldn't expect lack of constructor to cause this error

POV Over a year ago

I think is is declaration(interface): export declare class FlashMessagesService {}

Collectives™ on Stack Overflow

How to create instance of class TypeScript?

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related