0

I'm using Googles "Material Design Lite" library with Microsoft's TypeScript inside of Visual Studio 2015. I have a script tag in my Index.html page as so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.0.6/material.min.js"></script>

Inside one of my typescript modules I hacked in a variable to get access to the Material Design Lite (MDL) library functions as so:

module Default {
  'use strict';

   export var componentHandler = window['componentHandler'];

This works as shown below to update the MDL DOM, but I would prefer a more elegant way. This way seems really "hacky". Is there some way to create this global variable to the MDL functions in a typescript definition file?

Default.componentHandler.upgradeDom();
Lambert
  • 2,233
  • 5
  • 29
  • 44

2 Answers2

2

Inside one of my typescript modules I hacked in a variable to get access to the Material Design Lite (MDL) library functions as so

The library exposes itself to the global namespace. This is evidenced by your usage : window['componentHandler']

So to be correct create a file globals.d.ts or vendor.d.ts and declare this fact: 

/** From MDL */
declare var componentHandler: any;

More :

Quick migration guide : https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html

Globals pattern: https://basarat.gitbooks.io/typescript/content/docs/project/globals.html

basarat
  • 261,912
  • 58
  • 460
  • 511
  • Yep. Thanks for the quick response. That fixed it. It's no wonder you have a 50,000 reputation. Do you know if it is a bad thing that I am using script tags to pull in my external libraries and then using the built-in Visual Studio bundling for my typescript modules? I hate NPM. – Lambert Jan 15 '16 at 01:56
  • 2
    Sadly NPM is the future. And hopefully its the *only* future for JavaScript. You wouldn't use Nuget for Haskell then why use it for JavaScript. – basarat Jan 15 '16 at 02:32
0

I downloaded a version of material-design-lite.d.ts and added the typescript include reference;

///<reference path="material-design-lite.d.ts"/>

Pete.

stackPete
  • 43
  • 6