12

I created a variable in a .ts file that has no module or class. It mostly looks just like a plain JavaScript file. I want this variable to accessible in another .ts file inside of a class that is inside of a variable.

So for example I have:

foo.ts

var foo = "some stuff";

bar.ts

module Bar {
    export class BarClass {
        function getFoo() {
             return foo;
        }
    }
}

I'm not sure this is the best way to do it. I've tried using the window.bar global but that doesn't seem to work. I'm new to TypeScript jumping into a larger codebase so please let me know if you need any further clarification on anything.

Thanks!

Ry-
  • 218,210
  • 55
  • 464
  • 476
Nolski
  • 443
  • 4
  • 8
  • 24

2 Answers2

14

TypeScript files don't know about anything you've done in other TypeScript files unless they have a reference to them. So at the top of bar.ts you should have a line

/// <reference path="foo.ts" />
Nolski
  • 443
  • 4
  • 8
  • 24
Jeffery Grajkowski
  • 3,982
  • 20
  • 23
  • 2
    Would I need to do `declare var foo:any;` too? – Nolski Jun 27 '13 at 21:26
  • 1
    Nope. Declare is for assuring the compiler that something is going to exist, that it doesn't otherwise know about. Usually something loaded by a 3rd party library. The compiler will know about foo because it will have a reference to the file where it's created. – Jeffery Grajkowski Jun 27 '13 at 21:34
  • Awesome. This answer helped clear up a lot of problems for me. Thanks! – Nolski Jun 27 '13 at 21:34
  • 6
    What if the external variable is a simple JavaScript variable? – Mathias Lykkegaard Lorenzen Nov 25 '14 at 11:32
  • @MathiasLykkegaardLorenzen you need to create a declaration file (.d.ts) if it doesnt exist yet (look on https://github.com/borisyankov/DefinitelyTyped) – joe Nov 11 '15 at 10:42
5

From your question, not sure if it was a compilation, IDE or runtime issue that you had. Still, thought I'd share that a good way to avoid some of these issues with globals is to create your own "types" file and list it in your typeRoots property in your tsconfig.json.

For example, something I've done in the past is create a shortcut to console.log that also colours messages with a style I wish. Like so...

const pretty = (style: string, ...anything) => {
  anything.forEach(something => 
    console.log(`%c ${something} `, style));
  return moment().format('[Logged @] HH:MM:SS');
}

So I don't have to declare var pretty in every TS file I use it, I'd create src/myTypes/globals/index.d.ts

...
declare function pretty(style: string, ...anything);
...

And then in my tsconfig.json

{
  "compilerOptions": {
    ...
    "typeRoots": ["src/myTypes"]

So, in your case, if foo was a var that you know would be there in runtime you could simply declare var foo: string; in your types file, list it in your typeRoots and use it happily in all your project files without any further config.

Roy Art
  • 578
  • 5
  • 10