How can I write a definition file in typescript for a javascript file?

Question

My ultimate goal is to execute some initialization code for materialize-css inside an aurelia project. I have a related question on this matter, but it was never solved. The problem is the following: I am using typescript, and have so far been unable to execute functions such as:

$('slider').slider;

So I decided to have these in a javascript file (which sees the materialize directives from the import in index.html) and lay a definition file on top. When I tried to write said declaration file, I followed the instructions provided at typescriptlang.org and wrote this:

module initializers {
  function setUpHome(): void;
}

declare module "initializers" {
    export = initializers;
}

But I get the following error:

A 'declare' modifier is required for a top level declaration in a .d.ts file

I would appretiate any guidance.

EDIT: function setUpHome

function setUpHome() {
  console.log("hello");
    $('.slider').slider();
    $('select').material_select();
    $('.button-collapse').sideNav();

    var slider = document.getElementById('wordCountSlider');
    noUiSlider.create(slider, {
      start: [0, 6000],
      connect: true,
      step: 50,
      range: {
        'min': 0,
        'max': 6000
      },
      format: wNumb({
        decimals: 0
      })
    });

    slider = document.getElementById('timeRangeSlider');
    noUiSlider.create(slider, {
      start: [0, 5],
      connect: true,
      step: 1,
      range: {
        'min': 0,
        'max': 5
      },
      format: wNumb({
        decimals: 0
      })
    });
    setUpTagSearchFilter();
};

function setUpTagSearchFilter() {
  var cities = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'assets/cities.json'
  });
  cities.initialize();

  var tagfilter = $('#tag-filter');
  tagfilter.materialtags({
    itemValue: 'value',
    itemText: 'text',
    typeaheadjs: {
      name: 'cities',
      displayKey: 'text',
      source: cities.ttAdapter()
    }
  });
  tagfilter.materialtags('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
  tagfilter.materialtags('add', { "value": 4 , "text": "Washington" , "continent": "America" });
  tagfilter.materialtags('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
}

score 2 · Answer 1 · answered Jul 20 '16 at 06:26

2

The error simply says that you need to declare a module firstly and then you are able to use it. You can do both of these in a one step:

declare module initializers {
    export function setUpHome(): void;
}

It is also good idea to turn strict mode on if you are using ECMAScript 5. Furthermore, keep in mind that internal modules are namespaces since TypeScript 1.5 and it is a good idea to declare it as a namespace then. Quotation from TypeScript doc:

A note about terminology: It’s important to note that in TypeScript 1.5, the nomenclature has changed. “Internal modules” are now “namespaces”. “External modules” are now simply “modules”.

To sum it up I would go with this:

declare namescpace initializers {
   'use strict';

    export function setUpHome(): void;
}

answered Jul 20 '16 at 06:26

Knut Holm

3,988
4
32
54

The only thing I am not clear about is how to import and use the function in another file. Should I do this: /// Or use an import/require statement and/or assign the function to a variable? I am new to typescript and cannot find this information. Thanks – fpluis Jul 20 '16 at 07:03
@The lightbringer Yes, `/// ` is correct. Just be sure to use a real path to a file. You can use a function then like this: `initializers.setUpHome();`. – Knut Holm Jul 20 '16 at 07:33
The problem is that using /// and then calling it like this: initializers.setUpHome(); gives me 'aurelia-logging-console.js:54 ERROR [app-router] Error: Error invoking Home.' (Home is the view module that calls the function). The error output refers to aurelia's libraries and provides no information. I am sorry to keep bothering you, but I cannot find any more information on the subject. – fpluis Jul 20 '16 at 07:45
@The lightbringer How do you have implemented that function? – Knut Holm Jul 20 '16 at 08:22
I edited my answer with the contents of initializers.js. They are basically jquery calls to materialize, materialize-tags and nouislider initializing functions. – fpluis Jul 20 '16 at 09:18

Matthew James Davis · Accepted Answer · 2016-07-21T18:38:09.520

2

My ultimate goal is to execute some initialization code for materialize-css inside an aurelia project. I have a related question on this matter, but it was never solved. The problem is the following: I am using typescript, and have so far been unable to execute functions such as:

$('slider').slider

Actually, there is no reason typescript would keep you from doing this. It is diffcult to understand what problem you're experiencing, as "unable to execute" needs more information (like the error message) to diagnose.

My guess is you mean VSCode / Visual Studio is giving you "red squigglies." If this is the case, this just means the typings haven't been installed. If you're familiar with the typings cli, then you'll just need to install materialize typings:

typings install dt~materialize-css --global --save

Edit:

In the comments you highlighted a new error message, which actually represents an entirely different problem.

Error TS2339: Property 'slider' does not exist on type 'ElementFinder.

What this means is that $ in your code is Protractor, not jQuery. You will need to make sure that you exclude any references to the protractor d.ts in your non-testing code. I'm not sure where your protractor typings are, so you will have to search for them. If they are installed via typings:

typings remove dt~angular-protractor

edited Jul 21 '16 at 18:38

answered Jul 20 '16 at 23:26

Matthew James Davis

12,134
7
61
90

You were right, the problem were the red squigglies. I ran the typings install then checked the typings folder, and the installation (or so it seems) has been successful. However, the red squigglies and the console error: Error TS2339: Property 'slider' does not exist on type 'ElementFinder. Still persist. Should I include any additional imports to the typescript file where I call the materialize functions? Thanks for the help. – fpluis Jul 21 '16 at 07:00
It's super hard to say. Reviewing the [dts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/72c15a7cb356aa85b19d3f144f0cbb3347818f78/materialize-css/materialize-css.d.ts#L398), my guess is that the dts was written for jquery 2 and you're using jquery 3. Try that. Also, upvote for effort? – Matthew James Davis Jul 21 '16 at 17:46
Ok, you at least pointed me in the (apparently) right direction. I'll open a separate question regarding this issue. – fpluis Jul 21 '16 at 18:33
I googled that for you, and found that `ElementFinder` is a reference to the Protractor element, and so now you're in the realm of a new question. I've updated the answer anyway. – Matthew James Davis Jul 21 '16 at 18:39

How can I write a definition file in typescript for a javascript file?

2 Answers2