2016-07-20 1 views
1

궁극적 인 목표는 aurelia 프로젝트 내에서 materialize-css에 대한 초기화 코드를 실행하는 것입니다. I have a related question on this matter하지만 결코 해결되지 않았습니다. 그래서에서 가져 오기에서 구체화 지침을 볼 수있는 (자바 스크립트 파일에 다음을하기로 결정javascript 파일의 타이프 스크립트에 정의 파일을 쓰려면 어떻게해야합니까?

$('slider').slider; 

:이 문제는 다음과 같다 : 나는 타이프 라이터를 사용하고, 지금까지와 같은 기능을 수행 할 수 없었다 index.html) 정의 파일을 맨 위에 놓습니다. 내가 말한 선언 파일을 작성했을 때, 나는 typescriptlang.org에서 제공하는 지침을 따라이 쓴 :

module initializers { 
    function setUpHome(): void; 
} 

declare module "initializers" { 
    export = initializers; 
} 

을하지만 다음과 같은 오류 얻을 :

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

내가 어떤 지침을 appretiate 것입니다.

편집 : 기능 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" }); 
} 

답변

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

사실, 이유의 타이프 라이터이 일에서 당신을 유지하지 않을 것이다있다. "실행할 수 없으므로"진단을 위해 더 많은 정보 (예 : 오류 메시지)가 필요하므로 현재 발생한 문제점을 이해하는 것이 쉽지 않습니다.

내 생각에 VSCode/Visual Studio에서 "붉은 불빛"을 보내고 있습니다. 이 경우 타이핑이 설치되지 않았다는 것을 의미합니다. 당신이 실제로 나타내는 새로운 오류 메시지가 강조 코멘트에서

:

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

편집 : 당신은 typings cli에 익숙하다면, 당신은 단지 실현 typings를 설치해야합니다 완전히 다른 문제. 이 의미

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

코드에서 $는, jQuery를 끄는되지 않는 것입니다. 비 테스트 코드에서 각도기 d.ts에 대한 언급을 제외해야합니다. 각도기 입력이 어디에 있는지 잘 모르겠습니다. 따라서 검색을해야 할 것입니다.그들은 typings를 통해 설치되어있는 경우 :

typings remove dt~angular-protractor

+0

당신이 옳았습니다. 문제는 빨간색의 삐걱 소리였습니다. 타이핑 설치를 실행 한 다음 타이핑 폴더를 검사하고 설치가 성공적으로 완료되었습니다. 그러나 빨간색 squigglies 및 콘솔 오류 : 오류 TS2339 : 'slider'속성 'ElementFinder 형식에 존재하지 않습니다. 여전히 계속됩니다. 구체화 함수를 typescript 파일에 추가로 가져와야합니까? 도와 주셔서 감사합니다. –

+0

말하기가 너무 어렵습니다. [dts] (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/72c15a7cb356aa85b19d3f144f0cbb3347818f78/materialize-css/materialize-css.d.ts#L398)를 검토하면 dts가 jquery 2 용으로 작성되었으며 3. jquery를 사용하고 있습니다. 또한 노력을위한 upvote? –

+0

좋아, 적어도 (분명히) 올바른 방향으로 나를 지적했다. 이 문제와 관련하여 별도의 질문을 드리겠습니다. –

2

오류는 단순히 당신이 먼저 모듈을 선언해야하고 당신이 그것을 사용할 수 있습니다 말한다. 또한 당신이 또한 인 ECMAScript 5를 사용하는 경우, 내부 모듈 타이프 1.5 이후 네임 스페이스는 것을 명심 좋은 생각 to turn strict mode on입니다

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

를하고 그것은 좋은 생각이다 : 당신은 한 번에이 두 가지 작업을 수행 할 수 있습니다 다음 네임 스페이스로 선언하십시오. 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”.

나는이 갈 것입니다 그것을 요약하면 :

declare namescpace initializers { 
    'use strict'; 

    export function setUpHome(): void; 
} 
+0

I에 대한 명확하지 않다 유일한 것은 가져 오기 및 다른 파일에있는 함수를 사용하는 방법입니다. 이 작업을 수행해야합니까 : /// 또는 import/require 문을 사용하거나 변수에 함수를 할당합니까? 나는 타이프 스크립트를 처음 사용하기 때문에이 정보를 찾을 수 없습니다. 감사합니다 –

+0

@ Lightbringer 네,'/// '가 맞습니다. 파일의 실제 경로를 사용해야합니다. 다음과 같이 함수를 사용할 수있다 :'initializers.setUpHome();'. –

+0

문제는 /// <참조 경로 = "initializers.d.ts"name = "초기화 프로그램"/> 을 호출하고 다음과 같이 호출하는 것입니다. initializers.setUpHome(); 'aurelia-logging-console.js : 54 ERROR [app-router] 오류 : Home 호출 오류.' (Home은 함수를 호출하는 뷰 모듈입니다). 오류 출력은 aurelia의 라이브러리를 참조하며 정보를 제공하지 않습니다. 계속 귀찮게해서 죄송하지만 주제에 대해 더 이상 정보를 찾을 수 없습니다. –

관련 문제