I might be approaching this pletely incorrectly, so any advice is appreciated. I'm currently trying to dig in deep to Typescript, and have decided to simultaneously use Sql.js (the JS version of SQLite) at the same time...

My first instinct to use Sql.js was to search for a .d.ts set of bindings around Sql.js so that I could easily start using it with TS. I've e up with no bindings so far (I don't think one exists yet), but figured I could just start "define"-ing in the stuff that I need from the library...

Starting with one of the simple examples from the "sql.js" docs, you have something like this:

var sql = window.SQL;
var db = new sql.Database();

Moving to the typescript side, I wanted to let TS know that after the sql.js library is included, the window object now has a property called SQL, which is essentially the hook to the rest of the library. I figured I needed to do this because, of course, when I type "window." (window-dot) in Visual Studio in my TS file, the Intellisense presented doesn't know about the SQL property now hanging off of "window". So... I dug around Stack, and concluded that I could solve this with a "declare" which I basically see as a way to tell TS just enough about the libraries that I don't have binding files for (.d.ts files).

However, in doing this, I can't seem to construct the syntax for such a declaration. I've tried:

declare var window.SQL : any;
declare var window.SQL;
declare var SQL = window.SQL;
declare window.SQL;

None of these work, of course.

So, the question is, how can I let TS know about new properties introduced by JS libraries on standard objects like "window", and the follow up question is, of course, is this even the right way to be approaching this?

Thanks for any insight.

I might be approaching this pletely incorrectly, so any advice is appreciated. I'm currently trying to dig in deep to Typescript, and have decided to simultaneously use Sql.js (the JS version of SQLite) at the same time...

My first instinct to use Sql.js was to search for a .d.ts set of bindings around Sql.js so that I could easily start using it with TS. I've e up with no bindings so far (I don't think one exists yet), but figured I could just start "define"-ing in the stuff that I need from the library...

Starting with one of the simple examples from the "sql.js" docs, you have something like this:

var sql = window.SQL;
var db = new sql.Database();

Moving to the typescript side, I wanted to let TS know that after the sql.js library is included, the window object now has a property called SQL, which is essentially the hook to the rest of the library. I figured I needed to do this because, of course, when I type "window." (window-dot) in Visual Studio in my TS file, the Intellisense presented doesn't know about the SQL property now hanging off of "window". So... I dug around Stack, and concluded that I could solve this with a "declare" which I basically see as a way to tell TS just enough about the libraries that I don't have binding files for (.d.ts files).

However, in doing this, I can't seem to construct the syntax for such a declaration. I've tried:

declare var window.SQL : any;
declare var window.SQL;
declare var SQL = window.SQL;
declare window.SQL;

None of these work, of course.

So, the question is, how can I let TS know about new properties introduced by JS libraries on standard objects like "window", and the follow up question is, of course, is this even the right way to be approaching this?

Thanks for any insight.

• javascript
• sqlite
• typescript

3 Answers 3

Now that we have type definitions for SQL.js, and as of Typescript 2.0, the ability to install them easily, you can just do this:

npm install @types/sql.js

Then, that typings file will automatically be picked up by the piler, and it will know that there is a SQL object. Here is the full definition: https://github./DefinitelyTyped/DefinitelyTyped/blob/master/sql.js/sql.js.d.ts

window is declared to be of type interface Window (in lib.d.ts). So you need to add to that if you want to use window.SQL :

interface Window{
    SQL:any;
}

var sql = window.SQL;
var db = new sql.Database();

Remend:

Personally I would remend not using it off of window and just do

declare var SQL:any;
var db = new SQL.Database();

By default the variable access in the browser is on window.

OK, I think I've figured it out, although I'm still not sure if this is the preferred method.

In inspecting lib.d.ts, which is pretty much the heart of the sun as far as declarations go, I found the declaration of the interface for Window more than once. That led me to the conclusion that TS interface declarations (and likely other declarations) can essentially be "partials". It appears that the definition of any interface can be extended by simply adding extra items in a brand new declaration...

So, currently, my angry red squiggly line under "window.SQL" has gone away by simply adding the following:

interface Window {
    SQL: any;
}

This seems to work because in lib.d.ts, the "window" variable is defined as a "Window" like this:

declare var window: Window; 

... on line 9867 of the file in case others are looking for it. So, the net effect seems to be, I extended the definition of "Window" based on knowing that sql.js would make a new property called "SQL" on it.

HTH, in case anyone else is spelunking the same concepts.