Fermer

mars 20, 2019

Commencez à écrire des applications Vue.js basées sur des classes dans TypeScript –


En septembre de l'année dernière, Evan You (créateur de Vue.js) a annoncé des plans pour la prochaine version majeure de la bibliothèque. Vue 3.0 offrira une expérience améliorée aux utilisateurs de TypeScript, y compris une prise en charge native des composants basés sur des classes et une prise en charge améliorée de l'inférence de type lors de l'écriture de code. (prévu pour le troisième trimestre de 2019) pour commencer à écrire vos applications Vue dans TypeScript. L'outil de ligne de commande de Vue, Vue CLI, fournit des options pour démarrer des projets avec l'outil de génération TypeScript préconfiguré et inclut le module officiellement pris en charge, vue-class-composant qui vous permet d'écrire vos composants Vue en tant que TypeScript. classes.

Cet article suppose une certaine connaissance de Vue et des bases de TypeScript. Jetons un coup d'oeil et voyons comment vous pouvez commencer à tirer profit du typage statique et des composants basés sur des classes de votre code aujourd'hui.

Démarrage d'un projet Vue + TypeScript

La configuration de la construction nécessaire peut être un obstacle. outillage. Heureusement, Vue nous a couvert là avec le Vue CLI . Nous pouvons l’utiliser pour créer un projet pour nous avec le compilateur TypeScript configuré et prêt à fonctionner.

Passons brièvement à la création d’un nouveau projet Vue prenant en charge TypeScript.

À partir du terminal / de la ligne de commande (et supposons que vous Node.js installé), exécutez la commande suivante pour installer Vue CLI globalement:

 npm install -g @ vue / cli

Créons ensuite un nouveau projet en spécifiant le nom du projet:

 vue create vue-typescript-demo

Ce sera également le nom du sous-dossier dans lequel le projet est installé. Une fois que vous avez appuyé sur . Entrez . Vous serez invité à choisir le préréglage par défaut ou à sélectionner manuellement les options à installer.

Choisissez l’option manuelle. Une série d’options supplémentaires vous sera présentée. L'option essentielle est évidemment TypeScript, mais vous pouvez également sélectionner Vuex, car nous verrons plus tard quelques décorateurs spécifiques à Vuex.

Après avoir sélectionné les options de votre projet, l'écran suivant vous demandera si vous le souhaitez. d'utiliser la syntaxe de composant de style classe . Dites oui à cela. On vous demandera ensuite si vous souhaitez "Utiliser Babel aux côtés de TypeScript pour les remplissages automatiques détectés". C’est une bonne idée pour les projets dans lesquels vous allez prendre en charge des navigateurs plus anciens. Répondez aux questions restantes comme bon vous semble et le processus d'installation devrait commencer.

Note sur la prise en charge des éditeurs / IDE

De nombreux éditeurs de code et IDE prennent désormais en charge TypeScript. Parmi les solutions payantes, le logiciel JetBrains (par exemple WebStorm PhpStorm ) offre un excellent support pour Vue et TypeScript. Si vous cherchez une alternative gratuite, je vous recommande le code [VisualStudioCode de Microsoft: combiné à l'extension Vetur il offre un excellent système de complétion automatique et de vérification du type. Composants basés sur

Commençons par regarder comment écrire des composants Vue à l'aide de classes. Bien que cette fonctionnalité ne se limite pas à TypeScript, l’utilisation de composants basés sur des classes aide TS à fournir une meilleure vérification de type et, à mon avis, rend les composants plus propres et plus faciles à gérer.

Voyons la syntaxe. Si vous avez suivi la section précédente et utilisé Vue CLI pour créer un nouveau projet, accédez au répertoire du projet, au sous-dossier src puis ouvrez le App.vue . Ce qui nous intéresse ici, c’est la section

Notez que l'étiquette

 @Component
La classe TodoList étend Vue {
  // ...

  obtenir unTachos non terminé () {
    return this.todos.filter (todo => todo.done === false);
  }
}

De même, vous pouvez créer des propriétés calculées en écriture en utilisant une méthode de définition:

   set fullName (valeur: chaîne) {
    let names = newValue.split ('');
    this.firstName = noms [0];
    this.lastName = noms [names.length - 1];
  }

Méthodes

Les méthodes de composant peuvent être déclarées de manière aussi propre que les méthodes de classe:

 @Component
La classe TodoList étend Vue {
  // ...

  addTodo (text) {
    this.todos.push ({text, done: false});
  }
}

À mon avis, la syntaxe simple permettant de déclarer des méthodes, des propriétés de données et des propriétés calculées rend l'écriture et la lecture de composants basés sur des classes plus agréables que ceux à base d'objets.

Decorators

de plus, en utilisant les décorateurs supplémentaires fournis par le paquet de vue-property-decorator . Il fournit six décorateurs supplémentaires pour la création de composants basés sur des classes:

Voyons trois d’entre eux qui vous sembleront probablement les plus utiles.

@Prop

Plutôt que de passer un accessoire [ Objet de configuration associé au décorateur @Component vous pouvez utiliser le décorateur @Props pour déclarer vos accessoires comme propriétés de classe.

 @Component
La classe TodoItem étend Vue {
  @Soutenir
  faire;
}

Comme avec d'autres décorateurs, @Prop peut accepter divers arguments, notamment un type, un tableau de types ou un objet d'options:

 @Prop (String)
prénom;

@Prop ([String, Null])
Titre;

@Prop ({default: true})
afficher les détails;

Lors de l’utilisation de TypeScript, vous devez suffixer vos noms d’accessoires avec l’opérateur non nul (!) Pour indiquer au compilateur que l’accessoire aura une valeur non nulle (TS ne sachant pas que ces valeurs seront transmises au composant lorsqu’il est initialisé):

 @Prop (String) name !: string;

Notez que, comme indiqué ci-dessus, il est parfaitement correct de placer le décorateur et la déclaration de propriété sur une seule ligne si vous le souhaitez.

@Emit

Un autre décorateur pratique est @Emit permettant ainsi. vous permet d’émettre un événement depuis n’importe quelle méthode de classe. L'événement émis utilisera le nom de la méthode (les noms de camelCase étant convertis en kebab-case), sauf si un autre nom d'événement est transmis au décorateur.

Si la méthode renvoie une valeur, elle sera émise comme événement. payload, avec tous les arguments passés à la méthode.

 @Emit ()
addTodo () {
  retournez this.newTodo;
}

Le code ci-dessus émettra un événement ‘add-todo’ avec la valeur de this.newTodo comme charge utile.

@Watch

La création d’observateurs est simple et agréable avec ce décorateur. Il faut deux arguments: le nom de la propriété observée et un objet d'options facultatives.

 @Watch ('myProp')
onMyPropChanged (val: string, oldVal: string) {
  // ...
}

@Watch ('monObjet', {immédiat: vrai, profond: vrai})
onMyObjectChanged (val: MyObject, oldVal: MyObject) {}

Résumé

J'espère que cet article vous a montré que commencer à écrire vos applications Vue dans TypeScript ne doit pas être un casse-tête. En utilisant la CLI pour démarrer de nouveaux projets, vous pouvez rapidement configurer les outils de construction nécessaires. Le support inclus pour les composants basés sur les classes et les décorateurs supplémentaires vous permettront d’écrire du TypeScript propre et idiomatique en un rien de temps!




Source link

Revenir vers le haut