javascript - Hur man använder TypeScript med Vue.js och enskilda filkomponenter?

Jag har sökt över hela webben efter ett minimalt, fungerande exempel på en Vue.js + TypeScript-setup. Som vanligt med den "moderna JavaScript-stacken" är de flesta av dessa handledningar antingen föråldrade trots att de skrevs för bara några månader sedan eller beroende av en väldigt specifik setup. Det verkar inte finnas något generiskt, verifierbart exempel att bygga på.

Här är några av de resurser jag övervägde:

  • https://v2.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/

Den grundläggande mallen jag använder är den som tillhandahålls genom att köra vue-cli init webpack med alla standardalternativ. Eftersom detta genererar mycket kod, klistrar jag inte in allt här. Om det behövs vissa specifika utdrag, kommer jag gärna att uppdatera frågan.

Den officiella Vue.js-dokumentationen är värdelös för mitt syfte eftersom den inte tar i beaktande att sätta upp TypeScript med SFC:er. Den senaste jag provade var den sista på listan. Jag följde uppsättningen exakt men det leder till följande fel när jag kör npm run dev:

[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...'.

Kan någon kasta ljus över varför detta händer och hur man löser det? Ännu bättre, jag skulle verkligen välkomna ett kort, minimalt, steg-för-steg-exempel på hur man sätter upp en fungerande Vue.js + TypeScript-konfiguration med webpack-mallen.

Jag har redan framgångsrikt slutfört flera klientprojekt som körs i produktion i Vue.js med vanlig JavaScript, men detta TypeScript-verktyg i kombination med Vue.js förvirrar mig helt och hållet.

Svar #1

Jag har försökt använda typescript med vue. Min personliga åsikt: det fungerar inte bra. Eftersom vissa vue-internals inte är anpassade för typescript:

  1. vuex med this.$store.dispatch('some_action')
  2. Vue.use, Vue.mixin och andra liknande saker som ändrar den globala Vue-instansen

Men, medan jag gjorde min forskning har jag hittat dessa underbara boilerplates: typescript-vue-tutorial av Daniel Rosenwasser och TypeScript-Vue-Starter av Microsoft.

Jag har också försökt att efterlikna vue-webpack-template med typescript på egen hand: https://github.com/sobolevn/wemake-vue-template

Det finns också bra verktyg för att göra din typescript + vue-arbetsflöde bättre:

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

I slutändan har jag bestämt mig för att använda flow. Kolla den här projekttemplaten om du är intresserad.

Svar #2

uppdatera

I september 2018 bör man prova den nya vue-cli med TypeScript-plugin.

Håller helt med @sobolevn:s åsikt. Men, det finns mycket information för mig att bedöma, gemenskapens stöd för TypeScript är värt att vänta på.

Vues ekosystem blir mer TypeScript:

  1. *.vue-filens TypeScript lint i VSCode stöds. Titta på detta problem i vetur.

  2. Öppen källkodsekosystem.

    • vue-router
    • vuex-class
    • vue-test-utils

  3. Ny vue-cli i design. klicka på mig

Så om du har tid att vänta kan du tillfälligt observera ett tag. Eller så kan du titta på dessa projekt: TypeScript-Vue-Starter och A Webpack Template Fork With Typescript Support.

Relaterade artiklar