Typescript: using externally declared variables
I have an application that is ported to typescript. In my index.html file, I have 2 files (actually, much more, but they are significant):
- static.js - which contains the: declaration
var staticData = {...};
, automatically generated bygrunt-json
the grunt task (it doesn't matter what it does, it's just dynamically generated) - app.js is the typescript source to dump to js.
There is a .ts file that is used for the build app.js
which has the following content:
mp.core.CoreModule
.constant('CONFIG', staticData.config)
.constant('lodash', _)
It just declares angular constants. When I try to compile this typescript file I get the following error:
Running "typescript:app" (typescript) task
>> app/modules/core/coreModuleConfig.ts(2,21): error TS2304: Cannot find name 's
taticData'.
>> app/modules/core/coreModuleConfig.ts(3,21): error TS2304: Cannot find name '_
'.
Warning: Task "typescript:app" failed. Use --force to continue.
I can understand the problem - typescript doesn't know what these variables are. The problem is staticData is a js file variable and I have no idea how I can get these files to deal with each other ... Lodash case is the same - it is loaded into HTML as an external script.
source to share
A quick solution is to use ambient definitions with type any
:
declare var staticData: any;
declare var _: any;
This will allow you to use these variables in whatever way you want to use in TypeScript. From this you can start building the type information for staticData
if you like.
Note that for, _
you can simply include the definition file lodash.d.ts
in your project. This already has all the type information for lodash defined for you. You can find it here .
source to share