How can I add a typed property to the window object in a module?

1.5k Views Asked by At

I currently have a file main.ts with code as follows:

import Game from './game';

declare global {
    interface Window {
        game: Game;
        throttleScreenResizeRender: number;
        resizeTimeout: number;
    }
}

 ...

window.throttleScreenResizeRender = 0;

This works fine, but I'm trying to get the Window typings in a separate file to avoid code duplication. My current attempt looks like this:

// window.d.ts

import Game from './game';

declare global {
    interface Window {
        game: Game;
        throttleScreenResizeRender: number;
        resizeTimeout: number;
    }
}

and:

// main.ts

import Game from './game';
import 'interfaces/window';

window.throttleScreenResizeRender = 0;

This gives me a Error TS2339: Property 'throttleScreenResizeRender' does not exist on type 'Window'. on compilation.

I'm using Typescript version 2.0.3

How can I achieve this?

EDIT

I'm using Browserify with tsify as indicated by the handbook. This is my gulp file:

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");

...

gulp.task('tsify', function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(destinationPath));
});

Relevant packages.json:

  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-typescript": "^3.0.2",
    "typescript": "^2.0.3"
  },
  "devDependencies": {
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "gulp-typescript": "^3.0.2",
    "tsify": "^2.0.2",
    "typescript": "^2.0.3",
    "vinyl-source-stream": "^1.1.0"
  },
0

There are 0 best solutions below