1

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"
  },
Taro
  • 1,432
  • 1
  • 16
  • 15
  • Which version of typescript are you using? with `1.8.10` and `2.0.3` it seems to be working fine for me. Are you sure that this is the exact code you're trying to compile? – Nitzan Tomer Oct 23 '16 at 19:35
  • I'm using version 2.0.3 – Taro Oct 23 '16 at 20:22
  • Sorry, yes, that's the exact code. – Taro Oct 23 '16 at 20:28
  • I works well for me, the only difference is that I don't have the game module. Maybe try to add `export {};` in your `window.d.ts`? – Nitzan Tomer Oct 23 '16 at 21:42
  • Not working either... even if I remove the import and export from window.d.ts and declare game as any, turning it into a script... – Taro Oct 27 '16 at 01:24
  • You must have an import/export to make it a module. But as I wrote, I can't reproduce it. It would be good if you could share a sample that reproduces your problem – Nitzan Tomer Oct 27 '16 at 09:16
  • That's all the relevant code, really. Maybe it's related to me running it with tsify? I've updated the question with this. I'll also try to get an example that runs tsc from the terminal... – Taro Nov 02 '16 at 02:44
  • I've never worked with `tsify`, but it shouldn't matter, it uses `tsc`. But you can test it yourself, just run `tsc` yourself and see if you get that error or not – Nitzan Tomer Nov 02 '16 at 15:12
  • This actually works when running this code isolated, with tsc. Maybe it's a problem with my gulp file, or my tsconfig.json... – Taro Nov 06 '16 at 20:07
  • It's not a problem with your `tsconfig.json`, otherwise `tsc` wouldn't have worked as well. It's either webpack or gulp – Nitzan Tomer Nov 06 '16 at 20:26
  • The import paths in your question don't look right. If `window.d.ts` imports `Game` from `./game`, it must be in the same directory. However, `main.ts` imports `Game` from `./game` and imports `interfaces/window`. What is `interfaces/window`? Is that just a typo in your question? Also, you should include your `tsconfig.json` in your question. (It's unfortunate that your question was not tagged with `tsify` when you first posted it. I'm a maintainer and would have seen this a lot sooner.) – cartant Nov 06 '16 at 23:21

0 Answers0