vue.js - TypeScript kullanarak Vue kullanan bir .js dosyasını nasıl tip kontrolü yapabilirim?

TypeScript derleyicisi ile tür denetimi yapılmasını istediğim Vue kullanan küçük bir .js dosyam var:

function main() {
    new Vue({
        el: 'ts-message',
        template: '<div>Hello</div>',
    });
}

Eğer bunu tsc ile tip kontrolü yapmaya çalışırsam, derleyici vue npm paketini yüklemiş olmama rağmen Vue için beyannamenin bulunamadığını söyler:

tsc --allowJs --checkJs --noEmit src/main.js 
src/main.js:6:9 - error TS2304: Cannot find name 'Vue'.

6     new Vue({
          ~~~

TypeScript derleyicisine Vue global nesnesini otomatik olarak algılamasını mı yoksa JS dosyasında açıkça import etmesini mi söyleyebilirim?

Denediğim diğer şeyler

Eğer bu main.js dosyası main.ts olarak yeniden adlandırılır ve en üste aşağıdaki satırı eklersem, TypeScript derleyicisi başarılı olur:

import Vue from "vue";

Ne yazık ki, özellikle JavaScript dosyalarını tip kontrolü yapmam gerekiyor ve tarayıcılar bu tür bir import sözdizimini tanımadığından, bir JavaScript dosyasının en üstüne böyle bir satır ekleyemem.

Cevap #1

Bunu dene:

  1. typings/vue.d.ts oluştur
// typings/vue.d.ts
import Vue from 'vue'

export as namespace Vue
  1. jsconfig.json dosyanıza typings klasörünü ekleyin:
// jsconfig.json
{
  "include": ["typings"]
}

Kendim Vue.js kullanmadım. Varsayımım, tip tanımlarının Vue'yi global olarak ortaya çıkarmadığı yönünde.

Yukarıdaki dosya türü vue üzerinden alır ve bunu bir ad alanı olarak açığa çıkarır.

Cevap #2

Bence Vue.js'i ana kaynak klasöründe (src klasörü örneğin) bir vue.shims.d.ts dosyası aracılığıyla bildirmeniz gerekebilir.

Böyle bir şey:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}