Wie kann ich eine Definitionsdatei in Typoskript für eine Javascript-Datei schreiben?

Question

Mein Ziel ist es, einen Initialisierungscode für materialize-css innerhalb eines Aurelia-Projekts auszuführen. I have a related question on this matter, aber es wurde nie gelöst. Das Problem ist folgendes: Ich Typoskript benutze und bisher nicht in der Lage gewesen, Funktionen auszuführen, wie:

$('slider').slider; 

So entschied ich, diese in einer Javascript-Datei (die die materialisieren Richtlinien aus dem Import sieht in index.html) und legen Sie eine Definitionsdatei oben drauf. Als ich versuchte, die Deklarationsdatei zu schreiben, folgte ich den an typescriptlang.org Anweisungen und schrieb dazu:

module initializers { 
    function setUpHome(): void; 
} 

declare module "initializers" { 
    export = initializers; 
} 

Aber ich erhalte den folgenden Fehler:

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

Ich würde jede Führung appretiate.

EDIT: Funktion 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" }); 
} 

Answer 1

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

Eigentlich gibt es keinen Grund, Typoskript Sie tun dies halten würde. Es ist schwierig zu verstehen, welches Problem Sie haben, da "nicht ausführbar" mehr Informationen benötigt (wie die Fehlermeldung), um zu diagnostizieren.

Meine Vermutung ist, du meinst VSCode/Visual Studio gibt dir "rote Squigglies." Wenn dies der Fall ist, bedeutet dies nur, dass die Typisierung nicht installiert wurde. Wenn Sie mit dem typings cli vertraut sind, dann werden Sie nur materialisieren Typisierungen installieren müssen:

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

Edit:

In den Kommentaren Sie eine neue Fehlermeldung hervorgehoben, die eigentlich repräsentiert ein ganz anderes Problem.

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

Was dies bedeutet, ist, dass $ in Ihrem Code Protractor ist, nicht jQuery. Sie müssen sicherstellen, dass Sie alle Verweise auf den Winkelmesser d.ts in Ihrem nicht testenden Code ausschließen. Ich bin mir nicht sicher, wo die Winkelmesser-Typen sind, also musst du nach ihnen suchen.Wenn sie über Typisierungen installiert sind:

typings remove dt~angular-protractor

Answer 2

Der Fehler sagt einfach, dass Sie zunächst ein Modul deklarieren müssen und dann sind Sie in der Lage, es zu benutzen. Sie können in einem Ein-Schritt beides tun:

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

Es ist auch eine gute Idee, wenn Sie to turn strict mode on ECMAScript 5. Weiterhin im Auge verwenden, halten die internen Module sind Namespaces seit Typoskript 1.5 und es ist eine gute Idee um es dann als Namespace zu deklarieren. Zitat aus 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”.

Um es zusammenzufassen würde ich mit diesem gehen:

declare namescpace initializers { 
    'use strict'; 

    export function setUpHome(): void; 
}