Varolan bir JavaScript kitaplığından bir .d.ts “typings” tanım dosyasını nasıl üretiyorsunuz?

Hem kendi hem de 3. partimde çok sayıda kütüphane kullanıyorum. "Daktilolar" dizini Jquery ve WinRT için bazı içerdiğini görüyorum ... ama nasıl oluşturulur?

Söz konusu kütüphaneye, nasıl yazıldığına ve aradığınız doğruluk seviyesine bağlı olarak, kullanabileceğiniz birkaç seçenek vardır. Seçenekleri, kabaca azalan bir arzu edilebilirlik sırasıyla gözden geçirelim.

Belki Zaten Var

Her zaman önce DefinitelyTyped ( https://github.com/DefinitelyTyped/DefinitelyTyped ) öğesini kontrol edin . Bu, kelimenin tam anlamıyla binlerce .d.ts dosyasıyla dolu bir topluluk deposudur ve kullandığınız şey zaten oradadır. NPM tarafından yayınlanan .d.ts dosyaları için bir arama motoru olan TypeSearch'ü ( https://microsoft.github.io/TypeSearch/ ) kontrol etmelisiniz ; bunun DefinitelyTyped'den biraz daha fazla tanımı olacaktır. Birkaç modül de NPM dağıtımlarının bir parçası olarak kendi tanımlarını gönderiyor, bu yüzden kendi kodunuzu yazmaya çalışmadan önce durumun bu olup olmadığını görün.

Belki birine ihtiyacın yok

TypeScript artık --allowJsbayrağı destekliyor ve .js dosyalarında daha fazla JS tabanlı çıkarımlar yapacak. Size --allowJsyeterince iyi tür bilgisi verip vermediğini görmek için ayarla birlikte derlemenize .js dosyasını dahil etmeyi deneyebilirsiniz . TypeScript, ES5 tarzı sınıflar ve JSDoc yorumları gibi şeyleri bu dosyalarda tanıyacaktır, ancak kütüphane kendisini garip bir şekilde başlatırsa devreye girebilir.

Kullanmaya Başlayın --allowJs

Eğer --allowJssize iyi sonuçlar verdi ve kendinizi, sen birleştirebilirsiniz daha iyi bir tanım dosyası yazmak istiyorum --allowJsile --declarationkütüphanenin türlerine typescript en "en iyi tahmin" görmeyi. Bu size iyi bir başlangıç ​​noktası verecektir ve JSDoc yorumları iyi yazılmışsa ve derleyici bunları bulabildiyse, elle yazılmış bir dosya kadar iyi olabilir.

Dts-gen ile Başlayın

Eğer --allowJsişe yaramadıysa, bir başlangıç ​​noktası almak için dts-gen ( https://github.com/Microsoft/dts-gen ) kullanmak isteyebilirsiniz . Bu araç, kullanılabilir tüm özellikleri doğru bir şekilde numaralandırmak için nesnenin çalışma zamanı şeklini kullanır. Artı tarafta bu çok doğru olma eğilimindedir, ancak araç henüz ek türleri doldurmak için JSDoc yorumlarını kazıma işlemini desteklemez. Bu şekilde çalıştırın:

npm install -g dts-gen
dts-gen -m <your-module>

Bu your-module.d.ts, geçerli klasörde oluşturulur .

Erteleme düğmesine bas

Hepsini daha sonra yapmak ve bir süre yazım yapmak istemiyorsanız, TypeScript 2.0'da artık yazabilirsiniz.

declare module "foo";

hangi izin vereceğim türüyle modülü . Daha sonra uğraşmak istediğiniz bir globaliniz varsa,import"foo"any

declare const foo: any;

ki bu size bir foodeğişken verecektir .

Ya kullanabilirsiniz tsc --declaration fileName.tsRyan açıklanır gibi, ya da belirtebilirsiniz declaration: truealtında compilerOptionssenin içinde tsconfig.jsonzaten bir yaşadım varsayarak tsconfig.jsonprojeniz altında.

Bununla başa çıkmanın en iyi yolu ( DefinitelyTyped'de bir bildirim dosyası yoksa ), tüm kütüphane yerine yalnızca kullandığınız şeyler için bildirimler yazmaktır. Bu işi çok azaltır - ve ayrıca derleyici eksik yöntemler hakkında şikayet ederek yardım etmek için oradadır.

Ryan'ın dediği gibi, tsc derleyicisinin --declarationbir .d.tsdosyadan dosya üreten bir anahtarı vardır .ts. Ayrıca (engelleme hataları) TypeScript'in Javascript'i derleyebileceğini, böylece mevcut javascript kodunu tsc derleyicisine aktarabileceğinizi unutmayın.

http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript'te 00:33:52 tarihinde açıklandığı gibi WebIDL ve WinRT meta verilerini dönüştürmek için bir araç geliştirdiler TypeScript d.ts

*.jsModern JavaScript ile birden fazla dosya içeren bir kütüphane tek bir TypeScript tanım dosyası oluşturan bazı PowerShell .

İlk olarak, tüm uzantıları olarak değiştirin .ts.

Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }

İkinci olarak, tanım dosyaları oluşturmak için TypeScript derleyicisini kullanın. Bir sürü derleyici hatası olacak, ancak bunları yok sayabiliriz.

Get-ChildItem | foreach { tsc $_.Name  }

Son olarak, tüm *.d.tsdosyaları bir araya getirin index.d.ts, importifadeleri kaldırın ve defaulther dışa aktarma ifadesinden kaldırın.

Remove-Item index.d.ts; 

Get-ChildItem -Path *.d.ts -Exclude "Index.d.ts" | `
  foreach { Get-Content $_ } | `
  where { !$_.ToString().StartsWith("import") } | `
  foreach { $_.Replace("export default", "export") } | `
  foreach { Add-Content index.d.ts $_ }

Bu index.d.ts, tanımların çoğunu içeren tek, kullanışlı bir dosya ile biter .

Script # veya SharpKit'i destekleyen 3. taraf JS kütüphanelerinizin mevcut bir eşlemesini ararım. Bu C # - .js çapraz derleyicilerinin kullanıcıları şimdi karşılaştığınız sorunla karşılaşmış olacaklar ve 3. taraf lib'inizi taramak ve iskelet C # sınıflarına dönüştürmek için açık kaynaklı bir program yayınlamış olabilirler. Eğer öyleyse C # yerine TypeScript oluşturmak için tarayıcı programını hackleyin.

Bunu yapmazsanız, 3. taraf kitaplığınız için bir C # genel arabirimini TypeScript tanımlarına çevirmek, kaynak JavaScript'i okuyarak aynı şeyi yapmaktan daha kolay olabilir.

Özel ilgim Sencha'nın ExtJS RIA çerçevesi ve Script # veya SharpKit için bir C # yorumu oluşturmak üzere yayınlanan projeler olduğunu biliyorum

Kendi kitaplığınızı oluştururken *.d.ts, tsc(TypeScript Derleyici) komutunu kullanarak dosya oluşturabilirsiniz : (kitaplığınızı dist/libklasöre oluşturduğunuzu varsayarak )

tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly

• -d( --declaration): *.d.tsdosyaları oluşturur
• --declarationDir dist/lib: Oluşturulan bildirim dosyaları için çıktı dizini.
• --declarationMap: Her karşılık gelen '.d.ts' dosyası için bir kaynak harita oluşturur.
• --emitDeclarationOnly: Yalnızca '.d.ts' bildirim dosyalarını yayınlayın. (derlenmiş JS yok)

( tüm komut satırı derleyici seçenekleri için dokümanlara bakın )

Veya örneğin package.json:

"scripts": {
    "build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
}

ve ardından çalıştırın: yarn build:types(veya npm run build:types)