0

I'm trying to create a proof-of-concept app with Angular 2 and Typescript. I'm wanting to incorporate the toastr notification library and was hoping there would be a simple way to get it running without the definition files.

I've created a file in my common services directory called toastr.d.ts]:

  declare module "toastr" {
//   var noTypeInfoYet: any; 
//   export = noTypeInfoYet;
}

which is called from the service common.ts

 /// <reference path="toastr.d.ts" />
import {Injectable} from 'angular2/core';
import {toastr} from 'toastr';

@Injectable()
export class Common {

  constructor() {}
  
  log(message:string){
      toastr(message);
      console.log(message);
  }

}

however I get the compilation error: [DiffingTSCompiler]: Typescript found the following errors: app/services/common/common.ts (3,9): Module '"toastr"' has no exported member 'toastr'.

All of the code can be found on Cloud 9

Mark
  • 2,392
  • 4
  • 21
  • 42
  • Honestly, I would use tsd and the actual Toastr definition file. I was a bit down on having to use them at first, myself. Take a look at the [actual Toastr](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/toastr/toastr.d.ts) definition file, it exports a module and yours does not. – Sunil D. Jan 18 '16 at 17:44
  • Unfortunately that also means I have to include the definition for jquery too. I was hoping it might be straight forward for when I was working with 3rd party libs just to stub them out – Mark Jan 18 '16 at 17:51
  • I am using official Toastr definition file ( alongside with jQuery ). I have different problems, i include it with ```import * as toastr from "toastr"``` and use like toastr.info(... But, toastr.options is not working, whatever i set it seams that toastr use default settings. It seams that each time it create new variable... I didn't debug it yet... – Vlado Tesanovic Jan 18 '16 at 18:11
  • In my opinion, the time it takes to install and figure out `tsd` is well worth it. You install `tsd`, run a command: `tsd install toastr --save` and you're done. – Sunil D. Jan 18 '16 at 18:16
  • 1
    Not really, I actually had tried that after your first post only to receive an error in the JQuery typedefs. After a bit of research it appears to be an issue with Angular2 and JQuery type definitions when they're installed using TSD. Further research suggests that 'typings' is going to replace tsd. I'm about to embark down the typings road. – Mark Jan 18 '16 at 18:28
  • Ok, point taken! It works great with Angular 1.x :) I guess that's part of living on the edge w/Angular 2. There's no reason you can't stick w/your own declarations file, the error you got was pretty clear ... you just need to export something from the definitions file, and make sure you put the methods/properties of Toastr that you're going to use in there too. – Sunil D. Jan 18 '16 at 18:38
  • This answer by thierry templier may be relevant: http://stackoverflow.com/a/34872063/3546482 – Fan Li Jan 19 '16 at 12:37

1 Answers1

1

The following: 

import {toastr} from 'toastr';

is wrong. toastr doesn't export a variable toastr in fact the root level export IS toastr. Fix: 

import * as toastr from 'toastr';
basarat
  • 261,912
  • 58
  • 460
  • 511