Visual Studio Code'da Javascript sınıfı TypeScript deklarasyon dosyasını algılamıyor

Bir TypeScript/JavaScript hibrit projem var ve birden fazla sınıf ve alt sınıfın yönetimine yardımcı olmak için bazı JavaScript dosyaları için bildirim d.ts dosyaları oluşturuyorum.

Ancak bildirilmiş türler Visual Studio Code tarafından görülmüyor. Aynı dizinde js ve buna karşılık gelen d.ts dosyalarım var.

Örneğin:

benim-sinifim.js

class MyClass {
  constructor(options) {}

  action(num) {
    return num.toString()
  }
}

}

my-class.d.ts

export interface Options {
  a: boolean
  b: boolean
}

export declare abstract class MyClass {
  constructor(options: Options)
  action(num: number): string
}

IntelliSense, örneğin my-class.js dosyasındaki action metodunun üstüne geldiğimde tanımları yakalamıyor.

my-class.js dosyasının en üstüne bir referans notasyonu eklemeyi denedim ama hiçbir etkisi olmadı (///<reference path="./my-class.d.ts" />).

Ayarlarımda checkJs seçeneğini true olarak ayarladım.

VS Code Sürüm 1.19.1 kullanıyorum

Bunun işe yaraması için almam gereken başka önlemler var mı?

Cevap #1

Çalışma klasörünüzde bir jsconfig.json dosyanız olduğundan emin olun. Bu yapılandırma dosyasına sahip olduktan sonra .d.ts dosyalarınız dahil edilmeli/referans gösterilmelidir.

Belirttiğiniz özel örnekle ilgili olarak, bildiğim kadarıyla, bekllediğiniz gibi çalışmayacak. Bunun nedeni bildirim kapsamıdır. Yani, .d.ts dosyanızda TypeScript türleriyle bir MyClass tanımlıyorsunuz, sonra .js dosyanızda ikinci bir MyClass tanımlıyorsunuz, bu ikinci bildirim de türlere sahip, varsayılan türleri any olarak ayarlanmış. Eğer ilk sınıftan türetiyor olsaydınız, o zaman beklendiğiniz gibi çalışabilir.

Bunu söyledikten sonra işe yarayacak şeyler var:

  • Sınıfın örneğinde IntelliSense almanız gerekir
  • .js dosyalarınıza .d.ts türlerini tanımlamak/bağlamak için JSDoc yorumları ekleyebilirsiniz

Örnek :

my-class.d.ts

declare interface Options {
    a: boolean
    b: boolean
}

declare class MyClass {
  constructor(options: Options)
  action(num: number): string
}

benim-sinifim.js

class MyClass {
  /**
  * @param {Options} options 
  */
  constructor(options) {   
  }

  action(num) {
    return num.toString();
  }
}
var foo = new MyClass({ a: true, b: false } );
foo.action(88);

Eğer .js dosyasındaki foo örneğinin üzerine geliyorsanız, doğru IntelliSense aldığınızı fark edeceksiniz

Constructor() fonksiyonuna JSDoc Yorumunu "@param {Options} options" ekleyerek doğru IntelliSense'i de alırsınız

JSDoc ve TypeScript: https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript VSCode ve Tip Kontrolü: https://code.visualstudio.com/docs/languages/javascript#_global-variables-and-type-checking

İlgili makaleler