web-dev-qa-db-fra.com

Comment utiliser TypeScript avec Vue.js et les composants à fichier unique?

J'ai recherché sur tout le Web un exemple pratique minimum d'installation avec Vue.js + TypeScript. Comme d'habitude avec la "pile JavaScript moderne", la plupart de ces tutoriels sont périmés bien qu'ils aient été écrits il y a quelques mois à peine ou dépendent d'une configuration très spécifique. Il ne semble y avoir aucun exemple générique et vérifiable sur lequel s'appuyer.

Voici certaines des ressources que j'ai considérées:

Le modèle de base que j'utilise est celui fourni par vue-cli init webpack avec toutes les options par défaut. Comme cela produit beaucoup de code, je ne colle pas tout ici. Si des extraits spécifiques sont nécessaires, je mettrai volontiers à jour la question.

La documentation officielle de Vue.js est inutilisable car elle n’envisage pas de configurer TypeScript avec des SFC. Le dernier que j'ai essayé était le dernier sur la liste. J'ai suivi la configuration avec précision, mais cela me cause l'erreur suivante sur 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...'.

Quelqu'un peut-il expliquer pourquoi cela se produit et comment le résoudre? Mieux encore, je serais très heureux de recevoir un exemple concis et minimal, étape par étape, sur la manière de configurer une configuration Vue.js + TypeScript de travail avec le modèle webpack.

J'ai déjà mené à bien plusieurs projets clients exécutés en production dans Vue.js avec Vanilla JavaScript, mais cet outil TypeScript associé à Vue.js est une source de confusion pour moi.

javascripttypescriptwebpackvue.js
15
herrbischoff

J'ai essayé d'utiliser TypeScript avec vue. Mon avis personnel: ça ne marche pas bien. Certains éléments internes vue ne convenant pas à TypeScript:

  1. vuex avec this.$store.dispatch('some_action')
  2. Vue.use, Vue.mixin et d'autres opérations similaires qui modifient l'instance globale Vue

Mais, au cours de mes recherches, j’ai trouvé ces superbes chaudières: TypeScript-vue-tutorial de Daniel Rosenwasser et TypeScript-Vue-Starter de Microsoft.

J'ai aussi essayé d'imiter vue-webpack-template avec TypeScript par moi-même: https://github.com/sobolevn/wemake-vue-template

Il existe également de bons outils pour améliorer votre workflow TypeScript + vue:

J'ai finalement décidé d'utiliser flow . Vérifiez ce modèle de projet si vous êtes intéressé. 

7
sobolevn

mettre à jour

En septembre 2018, vous devriez essayer le nouveau vue-cli avec le plugin TypeScript .

Tout à fait d'accord avec l'opinion de @ sobolevn. Mais, il me reste beaucoup d’informations à juger, le support de la communauté pour TypeScript en vaut la peine.

L’écosystème de Vue est plus typé:

  1. Le fichier *.vueTypeScript lint dans VSCode sera pris en charge. Regardez ce numéro vetur .

  2. Écosystème Open Source.

  3. Nouveau vue-cli dans la conception. cliquez moi

Donc, si vous avez le temps d'attendre, vous pouvez observer temporairement pendant un certain temps. Vous pouvez également faire référence à ces projets: TypeScript-Vue-Starter et Une fourchette de modèles Webpack avec prise en charge de TypeScript .

6
fimars

Cela ressemble au dernier modèle de vue-cli avec un nombre important d'étoiles et la prise en charge de vue 2.5.

Je ne pense pas l'avoir vu spécifiquement mentionné dans les autres réponses

vue init ducksoupdev/vue-webpack-TypeScript my-project

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

3
tiberriver256

Avec les dernières versions de VueJS, il est possible de créer un projet fiable et maintenable avec Vue, TypeScript et JSX. J'ai créé un passe-partout pour débutants à Vue.TSX

1
tejzpr