JQuery (.d.ts dosyalarıyla birlikte) gibi TypeScript ve kitaplıklar

Question

Tüm internete baktım ama jQuery gibi bir kitaplığı nasıl alacağımı ve nasıl kullanacağımı gösteren kapsamlı bir kılavuz bulamadım. TypeScript projesi. Anlıyorum

1. .d.ts dosya alırım gerekiyor yani ne sadece intellisense için olduğunu: Ben bu gerçekten bilmem gereken şeyler nerede aksi bilmek isteriz var olan bir rehber varsa gerçekten çalışmak için jquery (ts derlemesi yapalım)
2. VS2013'ü kullanırken requires veya //reference'a ihtiyacım var mı ve eğer öyleyse gerçekten ne yapıyor?
3. Bu .d.ts ve jquery js dosyalarından, ts projemdeki kitaplığı (veya herhangi bir kitaplığı) kullanmaya gideceğiniz her şey.

Hemen hemen her şeyi anlayabiliyorum ama bu oldukça sinir bozucu oldu.

Answer 1

, sadece typescript nasıl JavaScript kitaplık çalışmalarını anlatan bir tanım dosyası kullanmak gerekir. Burada

alın tanımları: https://github.com/borisyankov/DefinitelyTyped

veya Nuget dan Visual Studio kullanarak eğer.

Sonra sadece normal olarak typescript yazmak ve gerekirse kütüphanenizi beyan: örnek jQuery'nin d.ts için

declare var library : libraryTypedName

dosyası zaten (altını kontrol edin) sizin için yapar:

declare module "jquery" { 
    export = $; 
} 
declare var jQuery: JQueryStatic; 
declare var $: JQueryStatic; 

senin .ts dosyada Şimdi

https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts

senyazın 210 size kod bilgisi vermeli.

Şimdi, bundleconfig/<script>'a eklemek istediğiniz tek şey .js dosyaları, hem sizin hem de jquery/diğer kitaplıklardır. Typescript sadece COMPILE zamanıdır!

Answer 2

TypeScript'teki kural, projenizde bu dış referansları getirecek olan bir reference.ts veya reference.d.ts dosyasına sahip olmaktır.

Yani reference.ts dosyasında (reference.ts dosyasına göre olacak yolu) sizin jquery.d.ts yolunu ekleyin:

/// <reference path="../relative/path/to/jquery.d.ts"/> 

Sonra projenizde jQuery tanımlarını kullanmak gerekir.

Not: reference.ts dosyası bir sözleşmedir, ancak gerekirse herhangi bir TypeScript dosyasına <reference path="..."/> yönergesini ekleyebilirsiniz. TypeScript Language Specificiation (PDF) 11.1.1 itibaren

---

: Sen typescript için jquery derlemek gerekmez

A comment of the form /// <reference path="…"/> adds a dependency on the source file specified in the path argument. The path is resolved relative to the directory of the containing source file.

Answer 3

VS 2015'te kullanıyorum ve typescript.I için yeniyim. Projemde jQuery ve leaflet kullanıyorum. Benim çözüm: Bu eğitimde anlatıldığı gibi VS Nuget yöneticisinden

1. İndir tüm bu libraies 2015.

2. Drag kütüphane dosyaları (.js):

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

inde değiştirin

Bu satırları ekleyerek x.html dosyası.

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> 
<link rel="stylesheet" href="css/leaflet.css" /> 

<script src="scripts/jquery-2.2.3.min.js"></script> 
<script src="scripts/jquery.mobile-1.4.5.min.js"></script> 
<script src="scripts/leaflet-0.7.3.min.js"></script> 

1. Dizin.ts dosyasını değiştirin. Önce kütüphanelerinize başvurmak için bu satırları üstüne ekleyin. Yolu değiştirmeniz gerekebilir.

   

2. aksi takdirde sysmbol gibi, javascript çalışma zamanı hatası alabilirsiniz, onDeviceReady() içinde kazanılan kodu ekleyin "$" tanımlı değil. Bunun nedeni, cihazın henüz hazır olmadığı zaman kodların bazı işlevleri yüklemeye çalışmasıdır. Bu benim için çalıştı. Umarım size de yardımcı olur.

   function onDeviceReady() { 
   
       document.addEventListener('pause', onPause, false); 
       document.addEventListener('resume', onResume, false); 
   
   
       var parentElement = document.getElementById('deviceready'); 
       var listeningElement = parentElement.querySelector('.listening'); 
       var receivedElement = parentElement.querySelector('.received'); 
       listeningElement.setAttribute('style', 'display:none;'); 
       receivedElement.setAttribute('style', 'display:block;'); 
   
       // your code goes here 
   
       } 
   

Answer 4

bu çözüm typescript püristleri :) için değil, ancak bir satır çözümü tercih eğer, sadece ts dosyasına bu satırı ekleyin: Sonra

declare var $: any

ve kullanımı Kod kodunuzdaki gibi $ js kodundaymışsınız.