Vue.js ve Tek Dosya Bileşenleri ile TypeScript nasıl kullanılır?

Question

Vue.js + TypeScript kurulumunun minimal, çalışan bir örneği için tüm web’de arama yaptım. Her zamanki gibi "modern JavaScript yığını" ile, bu öğreticilerin çoğu ya birkaç ay önce yazılmış olmasına rağmen ya da çok özel bir kurguya bağlı olarak güncel değil. Oluşturulacak genel, doğrulanabilir bir örnek yok gibi görünüyor.

• https://vuejs.org/v2/guide/typescript.html
• https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/
• http://www.mindissoftware.com/Vue-Sample-in-Typescript/
• https://medium.com/@hayavuk/setting-vue-up-for-typescript-goodness-a6ddc4072f4f
• https://johnpapa.net/vue-typescript/
• https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/
: Burada
ben kabul kaynakların bazılarıdır

Kullandığım temel şablon, tüm varsayılan seçeneklerle vue-cli init webpack'u çalıştırarak sağlanmıştır. Bu çok fazla kod ürettiğinden, burada her şeyi yapıştırmadım. Bazı özel alıntılara ihtiyaç varsa, soruyu memnuniyetle güncelleyeceğim.

Resmi Vue.js belgelerinin amacı, SFC'ler ile TypeScript'i kurmayı düşünmediği için kullanışsızdır. En son denedim, listenin sonuncusuydu. Ben tam kurulum izledi ama npm run dev aşağıdaki hata beni çalıştırır:

[tsl] ERROR in /Users/[REDACTED]/ts-test/src/main.ts(12,3) 
     TS2345: Argument of type '{ el: string; router: any; template: string; components: { App: { name: string; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'. 
    Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'. 

herkes bu olur ve nasıl çözüleceğini neden ışık tutmayı miyim? Daha da iyisi, webpack şablonuyla çalışan bir Vue.js + TypeScript yapılandırmasının nasıl kurulacağına dair kısa, asgari, adım adım bir örneği memnuniyetle karşılıyorum.

Vue.js ürününde Vue.js ile üretim yapan bazı istemci projelerini vanilya JavaScript ile başarıyla tamamladım, ancak bu TypeScript aracı Vue.js ile birleştiğinde yalnızca beni şaşırtıyor.

Answer 1

typescript'u vue ile kullanmaya çalıştım. Kişisel görüşüm: iyi çalışmıyor. Bazı vue internals typescript için uygun değildir beri:

1. vuex küresel Vue örneğini mutasyona
2. Vue.use, Vue.mixin ve diğer benzer şeyler this.$store.dispatch('some_action') ile benim araştırma yaparken

Ama bulduk Bu harika boilerplates: Daniel Rosenwasser ve TypeScript-Vue-Starter tarafından Microsoft tarafından typescript-vue-tutorial.

Ben de kendim typescript ile vue-webpack-template taklit çalıştık: https://github.com/sobolevn/wemake-vue-template

daha iyi typescript + vue iş akışını yapmak da güzel araç vardır:

• vuex-typescript
• vue-class-component
• vue-property-decorator

Sonunda flow'u kullanmaya karar verdim. Eğer ilgileniyorsanız, this project template'u kontrol edin.

Answer 2

Absolute agree @ sobolevn'ın görüşü. Ancak, benim için yargılamak için çok fazla bilgi var, TypeScript için topluluk desteği beklemeye değer. VSCode içinde

1. *.vue dosyanın TypeScript tüysüz desteklenecektir:

   Vue 'ekosistem fazla typescript ediliyor. Bu soruna bakın vetur. Açık Kaynak Ekosistemi.

2. . vuex-class

3. vue-test-utils

4. Yeni tasarımda vue-clivue-router

5. • . Bekleme süresini varsa click me

Yani, geçici bir süre gözlemleyebiliriz. Veya, şu projelere başvurabilirsiniz: TypeScript-Vue-Starter ve A Webpack Template Fork With Typescript Support.

Answer 3

Bu, önemli miktarda yıldız ve vue 2.5 desteği bulunan en son vue-cli şablonuna benziyor.

Ben bunu özellikle diğer cevaplar

vue init ducksoupdev/vue-webpack-typescript my-project burada

https://github.com/ducksoupdev/vue-webpack-typescript