visual studio 2017 - VS2017 ile TypeScript'ten jQuery'yi nasıl kullanabilirim

NOT: bu Visual Studio 2017 ile ilgili bir sorudur. Daha eski sürümlerle ilgili yanıtlar veya tavsiyeler muhtemelen yararsız olacaktır. Teşekkürler.

Artık tamamen çarelerim tükendi. Basit bir Visual Studio 2017 web projesini TypeScript (v2.3) kullanarak çalıştırmaya çalışıyorum ve öyle aptalca bir şekilde sinir bozucu ki, beni hem yorgun hem de öfkeli bıraktı. Gerçekten, bunun başarıyla başarıldığını, Visual Studio araçlarını bırakmadan ve her şeyi VS dışında/yanında kurmadan gerçekleştiren birinin olduğunu hiç sanmıyorum.

Benim ilk problemim, web üzerinde bunu yapmanın farklı yollarını öneren çeşitli kaynakların olması ve hepsinin çelişiyor olması: "Gulp kullan", "hayır, Bower kullan", "NPM kullan", "hayır, WebPack kullan". Ve tabii bulunacak tavsiyelerin çoğu Visual Studio'nun önceki sürümleri ile ilgili.

Benzer şekilde, modülleri içe aktarmak için TypeScript sözdizimi her sürümle değişiyor gibi görünüyor, bu yüzden bu tavsiyenin çoğu da artık güncel değil ve ayrıca hangi modül yükleyiciyi vs. kullandığınıza bağlı olarak değişiyor.

Çok sayıda seçenek "harika" ama araçlar en azından biraz yönlendirici olmalı ve en az dirençli yolun ne olduğunu bir türlü çözemedim. Komut satırlarından ve yapılandırma dosyalarından gerçekten hoşlanmadığım için, haftalık olarak değişen komutlar ve yapılandırma formatları yerine MS'in aslında VS ile entegre ettiği şeyleri kullanmak istiyorum.

TypeScript el kitabındaki adımları takip ederek sadece "hello world" demekten biraz fazlasını yapmayan bir web projesi oluşturdum, ancak "Angular 2 Ekle" bölümünden hemen önce durdum. (Angular kullanmak istemiyorum, ya da en azından şimdilik istemiyorum).

Yani, bu noktada bazı NuGet bağımlılıklarına, bazı NPM bağımlılıklarına ve package.json, tsconfig.json ve gulpfile.json dosyalarına sahibim.

Şu anda yapmak istediğim şey projeme jQuery eklemek ve TypeScript dosyamda şunu söyleyebilmektir:

let foo: JQuery = $("p");

Yani, açıkça jQuery kütüphanesine ihtiyacım var ve jQuery için TypeScript tanımlarına ihtiyacım var. Bu zor olmamalı - ama ben, yaklaşık 30 yıllık bir geliştirici olarak, bu şeyleri yeni araçları kullanarak nasıl ekleyeceğimi bulamıyorum.

NPM package.json dosyasına "jquery"'yi bir bağımlılık olarak eklemeyi denedim:

"dependencies": {
  "jquery": "^3.2.1"
},

... ama ilgili TypeScript tanımlarını nasıl ekleyeceğimi bir türlü çözemedim.

TypeScript kılavuzu npm import @types/jquery kullanmayı öneriyor ama benim bir NPM komut satırım yok ve bunu doğrudan package.json dosyasındaki dependencies (veya devDependencies) bölümüne eklemeyi denediğimde, bunu tanımadı.

Bulduğum bir başka “eğitim”de (bu sefer Bower kullanılarak, işin biraz daha kafa karıştırıcı olması için), TypeScript için otomatik tür edinimini etkinleştirmek amacıyla tsconfig.json dosyasına aşağıdakilerin eklenmesi öneriliyordu, ki bu harika bir şey gibi görünüyor:

"typeAcquisition": {
  "enable": true
},

Ama ne yazık ki bu işe yaramıyor gibi görünüyor. Veya en azından, şu anda sahip olduğum kurulumla çalışmıyor. [Diğer öğreticideki adımları izlediğimde IDE içinde Intellisense sağladıysa da, projeyi gerçekten derlemeyi hiç başaramadım.]

İşte buradayım, yardım için yalvarıyorum. Tek satırlık TypeScript parçamın (a) JQuery tür tanımlarını tanımasını ve (b) gerçekten derlenip çalıştırılmasını nasıl sağlayabilirim?

Daha da iyisi, eğer bu konuda tüm araçların güncel sürümü için gerçekten açıklayan çevrimiçi kaynakları bilen biri varsa, bunu görmeyi çok isterim. Aksi takdirde, belki de VS2015'e geri dönerim.

Cevap #1

VS2017'ye yazım desteği eklemekte zorluklar yaşadım ama görünüşe göre 15.4 güncellemesi sorunlarımı çözdü. Öncelikle package.json dosyanıza @types/jquery devDependencies eklemelisiniz. Örneğin:

{
  "name": "asp.net",
  "version": "0.0.0",

  "dependencies": {
    "jquery": "3.1.1",
    /*other packages*/
  },

  "devDependencies": {
    "gulp": "3.8.11",        
    "@types/jquery": "2.0.47"
    /*other dev packages*/
  }
}

O zaman tsconfig.json dosyanızı yapılandırmalısınız. Örneğin:

{
  "compilerOptions": {
    "module": "none",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "types": [
      "jquery"
    ],
    "lib": [
      "dom",
      "es5",
      "scripthost",
      "es2015.iterable"
    ],
    "target": "es5",
    //"outDir": "wwwroot/app-out"
    "outFile": "wwwroot/app-out/app.js"
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Bu yüzden module'ü none olarak ayarladım, böylece örneğin webpack gibi bir modül paketleyici kurmamız gerekmiyor. Tiplerde daha önce package.json'da belirttiğimiz jquery'i belirtmeliyiz. Ayrıca @types/jquery bunu gerektirdiği için lib'de "dom", "es5", "scripthost", "es2015.iterable" belirtmeliyiz. outFile, ts'ye derlenmiş js dosyasını nereye yerleştireceğini söyler. Bundan sonra sayfanıza sadece ona referans ekleyebilirsiniz.

Bundan sonra jQuery türleri, ts dosyasında başka bir kurulum yapmadan çalışmaya başlar. Bazen tsconfig.json dosyası değişiklikleri anında uygulanmaz. Bu yüzden değişiklik yapın, npm modüllerini indirin (örneğin çözümü yeniden derleyin) ve sonra VS'yi yeniden başlatın.

İlgili makaleler