Commencez à écrire des applications Vue.js basées sur les cours dans TypeScript

Vue.js 3.0 et TypeScript sont des combinaisons puissantes

vue.js 3.0 apportera une prise en charge améliorée aux utilisateurs de typescript, y compris la prise en charge native pour les composants basés sur la classe et une meilleure inférence de type. Mais vous pouvez maintenant commencer à écrire des applications VUE à l'aide de TypeScript à l'aide de Vue CLI, l'outil de ligne de commande de Vue.

Avantages des composants basés sur les classes et des dactylographies

Les composants basés sur la classe dans Vue.js peuvent être écrits à l'aide de la classe TypeScript, qui offre une meilleure vérification de type et maintenabilité. Ces classes peuvent être déclarées en utilisant le décorateur vue-property-decorator dans le package @Component.

Les autres décorateurs fournis par le package

vue-property-decorator peuvent encore améliorer les composants basés sur la classe. Ceux-ci incluent @Prop pour déclarer les accessoires en tant qu'attributs de classe, @Emit pour émettre des événements à partir de méthodes de classe, et @Watch pour créer des observateurs.

Avantages de TypeScript et Vue.js

TypeScript est utilisé conjointement avec Vue.js avec plusieurs avantages, y compris le type statique vérifiant la détection précoce des erreurs, les services de saisie automatique, de navigation et de refactorisation et de fournir un code plus structuré et extensible pour la bibliothèque d'applications complexes.

En septembre dernier, Evan You (le créateur de Vue.js) a annoncé des plans pour la prochaine version majeure de la bibliothèque. Vue 3.0 apportera une expérience améliorée aux utilisateurs de typeScript, y compris la prise en charge native pour les composants basés sur la classe, et une meilleure prise en charge de l'inférence de type lors de la rédaction de code.

La bonne nouvelle est que vous n'avez pas à attendre la sortie de 3.0 (attendue au troisième trimestre 2019) pour commencer à écrire des applications VUE à l'aide de TypeScript. L'outil de ligne de commande de Vue Vue CLI offre la possibilité de démarrer un projet à l'aide de l'outil de construction TypeScript préconfiguré et comprend le module vue-class-component officiellement pris en charge qui vous permet d'écrire des composants Vue en tant que classes TypeScript.

Cet article suppose que vous connaissez les bases de Vue et TypeScript. Voyons comment vous commencez à tirer parti de la frappe statique et des composants basés sur les classes aujourd'hui.

Créer Vue TypeScript Project

L'un des obstacles pour démarrer avec TypeScript peut être de configurer les outils de création nécessaires. Heureusement, Vue CLI a résolu ce problème pour nous. Nous pouvons l'utiliser pour créer un projet pour nous où le compilateur TypeScript est configuré et prêt.

introduisons brièvement le processus d'utilisation de TypeScript pour prendre en charge la création de nouveaux projets VUE.

Exécutez la commande suivante à partir de la ligne de borne / de commande (et en supposant que Node.js a installé) pour installer Vue CLI globalement:

<code class="language-bash">npm install -g @vue/cli</code>

Ensuite, créons un nouveau projet et spécifions le nom du projet:

<code class="language-bash">vue create vue-typescript-demo</code>

Ce sera également le nom du sous-dossier du projet d'installation. Après avoir appuyé sur Entrée , vous serez invité à sélectionner le préréglage par défaut ou à sélectionner manuellement l'option à installer.

Sélectionnez l'option manuelle et vous verrez un autre ensemble d'options. L'option nécessaire est bien sûr dactylographiée, mais vous pouvez également choisir Vuex car nous examinerons plus tard certains décorateurs spécifiques à Vuex.

Après avoir sélectionné l'option Projet, l'écran suivant vous demandera si vous souhaitez utiliser la syntaxe des composants de style de classe. Dites "oui" à cela. Il vous sera alors demandé si vous souhaitez "utiliser Babel avec TypeScript pour les polyfills pour la détection automatique". C'est une bonne idée pour les projets que vous soutiendrez des navigateurs plus âgés. Répondez au reste des questions au besoin et le processus d'installation doit commencer.

Instructions sur la prise en charge de l'éditeur / IDE

De nombreux éditeurs de code et IDE prennent désormais en charge TypeScript. Dans Paye Solutions, JetBrains Software (tel que WebStorm, PhpStorm) a un excellent support pour Vue et TypeScript. Si vous recherchez une alternative gratuite, je recommande le code Visual Studio de Microsoft: En conjonction avec l'extension Vetur, il fournit une excellente saisie semi-automatique et une vérification de type.

Composants basés sur la classe

Voyons d'abord comment écrire des composants Vue à l'aide de classes. Bien que cette fonctionnalité ne soit pas limitée à TypeScript, l'utilisation de composants basés sur la classe aide TS à fournir une meilleure vérification de type, et à mon avis, il rend les composants plus simples et plus faciles à entretenir.

Regardons la syntaxe. Si vous avez suivi les étapes de la section précédente et créé un nouveau projet à l'aide de la Vue CLI, accédez au répertoire du projet, accédez au sous-dossier src et ouvrez app.vue . Ce que nous sommes intéressés ici, c'est la section <script></script> car c'est la seule partie différente du composant de fichier unique VUE (SFC).

<code class="language-bash">npm install -g @vue/cli</code>

Notez que la balise <script></script> lui-même a le jeu d'attribut ts sur lang. Ceci est très important pour l'outil de build et votre éditeur d'interpréter correctement le code comme TypeScript.

Afin de déclarer un composant basé sur la classe, vous devez créer une classe qui étend Vue (ici, il est importé directement du package vue-property-decorator au lieu du module vue).

Les déclarations de classe doivent commencer par @Component décorateur:

<code class="language-bash">vue create vue-typescript-demo</code>

Vous avez peut-être remarqué que dans le code du composant App.vue, le décorateur peut également accepter un objet qui peut être utilisé pour spécifier les options de composant, d'accessoires et de filtres:

<code class="language-typescript">import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}</code>

Attributs de données

Lorsque vous déclarez un composant basé sur des objets, vous serez familier avec les fonctions qui doivent déclarer les propriétés de données du composant comme renvoyant un objet de données:

<code class="language-typescript">@Component
class MyComponent extends Vue {}</code>

… Pour les composants basés sur la classe, nous pouvons déclarer les attributs de données comme attributs de classe normaux:

<code class="language-typescript">@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}</code>

Propriétés informatiques

Un autre avantage de l'utilisation de classes comme composants est la syntaxe plus propre pour déclarer les propriétés calculées, en utilisant la méthode Getter:

<code class="language-javascript">{
  data: () => ({
    todos: [],
  })
}</code>

De même, vous pouvez créer des propriétés calculées écrites en utilisant la méthode du secteur:

<code class="language-typescript">@Component
class TodoList extends Vue {
  todos: [];
}</code>

Méthode

Les méthodes de composants peuvent être déclarées de manière similaire, en tant que méthodes de classe:

<code class="language-bash">npm install -g @vue/cli</code>

À mon avis, la syntaxe simple pour déclarer des méthodes, des attributs de données et des attributs calculés rend les composants basés sur la classe et la lecture des composants basés sur les objets originaux.

décorateurs

Nous pouvons aller plus loin et utiliser le décorateur supplémentaire fourni par le package vue-property-decorator. Il fournit six décorateurs supplémentaires pour écrire des composants basés sur les cours:

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch

Jetons un coup d'œil aux trois que vous pourriez trouver les plus utiles.

@Prop

Vous pouvez déclarer vos accessoires en tant que propriété de classe en utilisant le décorateur @Prop au lieu de passer l'objet de configuration des accessoires au décorateur @Component.

<code class="language-bash">vue create vue-typescript-demo</code>

comme les autres décorateurs, @Prop peut accepter divers paramètres, y compris le type, le tableau de type ou l'objet d'option:

<code class="language-typescript">import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}</code>

Lorsqu'il est utilisé avec TypeScript, vous devez ajouter un opérateur non vide (!) À votre nom de prop être transmis à l'initialisation du composant dans le composant):

<code class="language-typescript">@Component
class MyComponent extends Vue {}</code>

Notez que comme indiqué ci-dessus, vous pouvez complètement mettre le décorateur et attribuer la déclaration sur une ligne si vous préférez.

@Emit

Un autre décorateur pratique est @Emit, qui vous permet d'émettre des événements à partir de n'importe quelle méthode de classe. L'événement émis utilisera le nom de la méthode (le nom de CamelCase sera converti en cas de kebab), à moins que le nom de l'événement alternatif ne soit transmis au décorateur.

Si la méthode renvoie une valeur, la valeur sera émise comme la charge utile de l'événement, ainsi que tous les paramètres transmis à la méthode.

<code class="language-typescript">@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}</code>

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

@Watch

Créer un observateur avec ce décorateur est très simple. Il accepte deux paramètres: le nom de la propriété observée et un objet d'option facultatif.

<code class="language-javascript">{
  data: () => ({
    todos: [],
  })
}</code>

Résumé

J'espère que cet article vous montrera qu'il n'est pas nécessairement laborieux de commencer à écrire des applications VUE à l'aide de TypeScript. En démarrant un nouveau projet à l'aide de la CLI, vous pouvez rapidement configurer les outils de construction nécessaires. Y compris le support pour les composants basés sur la classe et les décorateurs supplémentaires vous permettront d'écrire immédiatement des dactylographies concises et idiomatiques!

Vous voulez apprendre Vue.js à partir de zéro? Utilisez SitePoint Premium pour obtenir une collection complète de livres Vue couvrant les bases, les projets, les conseils et les outils, etc. Rejoignez maintenant pour seulement 9 $ par mois ou essayez notre essai gratuit de 7 jours.

FAQ (FAQ) sur Vue.js basé sur les classes en utilisant TypeScript

Quels sont les avantages de l'utilisation de TypeScript et Vue.js?

TypeScript fournit un typage statique, qui peut être un avantage significatif lors du développement de grandes applications. Il aide à capter les erreurs au début du processus de développement, ce qui rend le code plus robuste et plus facile à entretenir. TypeScript fournit également une meilleure complétion automatique, des services de navigation et de reconstruction pour rendre le processus de développement plus efficace. Lorsqu'il est utilisé avec Vue.js, TypeScript permet une base de code plus structurée et extensible, ce qui facilite la gestion et le développement d'applications complexes.

Comment configurer un projet VUE.js à l'aide de TypeScript?

La configuration d'un projet VUE.js avec TypeScript implique plusieurs étapes. Tout d'abord, si vous n'avez pas installé Vue CLI, vous devez l'installer. Ensuite, utilisez la Vue CLI pour créer un nouveau projet et sélectionnez TypeScript comme fonctionnalité pendant le processus de création. La Vue CLI configurera la configuration de TypeScript pour vous. Vous pouvez ensuite commencer à écrire des composants Vue à l'aide de TypeScript.

Quels sont les composants basés sur la classe dans Vue.js?

Les composants basés sur la classe dans Vue.js sont un moyen de définir des composants à l'aide de classes ES6. Cette approche peut rendre vos composants plus faciles à lire et à comprendre, en particulier pour les développeurs à partir d'un arrière-plan de la programmation orientée objet. Les composants basés sur les classes fonctionnent également bien avec TypeScript, vous permettant de profiter des capacités de TypeScript, telles que les types statiques et les interfaces.

Comment utiliser TypeScript pour définir un composant basé sur la classe dans Vue.js?

Pour définir des composants basés sur des classes à l'aide de TypeScript dans Vue.js, vous devez utiliser le décorateur vue-class-component. Ce décorateur vous permet d'écrire des composants sous forme de classes ES6. Dans une classe, vous pouvez définir des données, des méthodes et des crochets de cycle de vie comme vous le feriez dans un composant VUE régulier.

Puis-je utiliser la directive Vue.js dans un composant basé sur la classe?

Oui, vous pouvez utiliser la directive Vue.js dans les composants basés sur les classes. La syntaxe est la même que dans les composants VUE réguliers. Vous pouvez utiliser v-model, v-if, v-for et d'autres instructions dans le modèle.

Comment utiliser les accessoires dans des composants basés sur la classe?

Dans un composant basé sur la classe, vous pouvez définir des accessoires à l'aide du décorateur @Prop. Ce décorateur vous permet de spécifier le type d'accessoire et s'il est requis ou a une valeur par défaut.

Comment utiliser les propriétés calculées dans un composant basé sur la classe?

Dans un composant basé sur la classe, vous pouvez définir les propriétés calculées comme une méthode Getter dans une classe. Le résultat de la méthode Getter sera mis en cache et recalculé uniquement si ses dépendances changent.

Comment utiliser des observateurs dans des composants basés sur la classe?

Dans un composant basé sur la classe, vous pouvez utiliser le décorateur @Watch pour définir les observateurs. Ce décorateur vous permet de spécifier les attributs à observer et les méthodes à appeler lorsque l'attribut change.

Puis-je utiliser Mixin dans un composant basé sur la classe?

Oui, vous pouvez utiliser Mixin dans des composants basés sur la classe. Vous pouvez définir Mixin comme une classe et l'inclure dans votre composant à l'aide du décorateur @Mixins.

Comment utiliser l'API combinée Vue.js avec TypeScript?

Vue.js La combinaison API fonctionne bien avec TypeScript. Vous pouvez définir vos données et fonctions réactives dans la méthode setup et définir le type pour celui-ci à l'aide de TypeScript. Cela vous permet de profiter des capacités de typage statique et de saisie automatique de TypeScript pour rendre votre code plus robuste et plus facile à développer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!