Guide d'utilisation de Typescript dans Vue 3 pour améliorer la maintenabilité du code

Guide d'utilisation de Typescript dans Vue 3 pour améliorer la maintenabilité du code

Introduction :
Dans Vue 3, l'utilisation de Typescript est devenue un sujet de préoccupation et d'éloges généralisés parmi les développeurs. En se combinant avec le framework Vue, Typescript peut fournir à notre code des invites de vérification de type et d'intelligence de code plus solides, améliorant ainsi la maintenabilité du code. Cet article expliquera comment utiliser correctement Typescript dans Vue 3 et démontrera ses puissantes fonctionnalités à travers des exemples de code.

1. Configurer la prise en charge de Typescript pour le projet Vue 3
Tout d'abord, nous devons ajouter la prise en charge de Typescript au projet Vue 3. Lors de la création d'un projet Vue, nous pouvons choisir d'utiliser Vue CLI pour configurer automatiquement l'environnement Typescript. Si vous avez déjà un projet Vue existant, vous pouvez également ajouter la prise en charge de Typescript manuellement.

1. Créez un projet Typescript à l'aide de Vue CLI
   Ouvrez l'outil de ligne de commande et exécutez la commande suivante pour installer Vue CLI :

   npm install -g @vue/cli

   Créez un nouveau projet Vue et choisissez d'utiliser Typescript :

   vue create my-project

   Puis sélectionnez "Sélectionner manuellement les fonctionnalités ", Et cochez l'option "TypeScript".

2. Ajouter manuellement la prise en charge de Typescript
   Si vous avez déjà un projet Vue existant, vous pouvez ajouter manuellement la prise en charge de Typescript. Tout d'abord, exécutez la commande suivante dans le répertoire racine du projet pour installer Typescript :

   npm install --save-dev typescript

   Ensuite, créez un nouveau fichier tsconfig.json et configurez les options de compilation Typescript :

   {
     "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["node", "vite/client"]
     },
     "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
     "exclude": ["node_modules"]
   }

   Dans tsconfig.json, nous avons spécifié la cible de compilation comme esnext configure le mode strict de vérification de type (strict:true) et ajoute quelques bibliothèques de classes et déclarations de type couramment utilisées.

2. Utilisation de Typescript dans les projets Vue 3

1. Utilisation de Typescript dans des composants à fichier unique
   Dans les composants à fichier unique de Vue 3, nous pouvons utiliser <script lang="ts">< script> pour spécifier l'utilisation de Typescript pour écrire du code logique. Voici un exemple simple : <script lang="ts"></script>标签来指定使用Typescript编写逻辑代码。下面是一个简单的示例：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    }
  }
</script>

2. 类型声明和接口
   Typescript强大的类型系统是其最大的特点之一。我们可以使用类型声明和接口来明确数据和函数的类型，并提供更好的代码提示和可维护性。下面是一个使用接口和类型声明的示例代码：

interface User {
  name: string;
  age: number;
}

function getUserInfo(user: User): string {
  return `Name: ${user.name}, Age: ${user.age}`;
}

const user: User = {
  name: 'John',
  age: 25
};

console.log(getUserInfo(user));

在上述代码中，我们定义了一个User接口，包含了name和age两个属性。然后，我们编写了一个getUserInfo函数，它接受一个User对象作为参数，并返回一个字符串。最后，我们创建了一个名为user的User对象，并将其传递给getUserInfo函数进行处理。

3. 组件的Props和原型属性
   在Vue 3的组件中，我们可以使用Props和原型属性来定义组件的输入和输出。通过在组件的Props中声明类型，我们可以在编写代码时获得更好的智能提示和类型检查。下面是一个示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
  import { defineComponent, PropType } from 'vue';

  interface Props {
    name: string;
    age: number;
  }

  export default defineComponent({
    props: {
      name: {
        type: String as PropType<Props['name']>,
        required: true
      },
      age: {
        type: Number as PropType<Props['age']>,
        default: 18
      }
    },
    data() {
      return {
        message: `Name: ${this.name}, Age: ${this.age}`
      };
    }
  });
</script>

在上述代码中，我们首先导入了defineComponent和PropType方法。然后，我们定义了一个Props接口，包含name和age两个属性。接着，我们在组件的props选项中，通过PropType<Props['name']>

rrreee

Déclarations de types et interfaces
Le puissant système de types de Typescript est l'une de ses plus grandes fonctionnalités. Nous pouvons utiliser des déclarations de type et des interfaces pour clarifier les types de données et de fonctions et fournir de meilleures astuces de code et une meilleure maintenabilité. Ce qui suit est un exemple de code utilisant l'interface et la déclaration de type :

🎜rrreee🎜Dans le code ci-dessus, nous définissons une interface utilisateur, qui contient deux attributs : le nom et l'âge. Ensuite, nous avons écrit une fonction getUserInfo qui accepte un objet User comme paramètre et renvoie une chaîne. Enfin, nous créons un objet User nommé user et le transmettons à la fonction getUserInfo pour traitement. 🎜
🎜Props et propriétés de prototype des composants🎜Dans les composants Vue 3, nous pouvons utiliser les propriétés Props et de prototype pour définir l'entrée et la sortie du composant. En déclarant les types dans les accessoires d'un composant, nous pouvons obtenir une meilleure intelligence et une meilleure vérification des types lors de l'écriture du code. Voici un exemple de code : 🎜🎜rrreee🎜Dans le code ci-dessus, nous avons d'abord importé les méthodes defineComponent et PropType. Ensuite, nous avons défini une interface Props, qui contient deux attributs : name et age. Ensuite, dans l'option props du composant, nous spécifions le type de l'attribut name comme type d'attribut name de l'interface Props via PropType<Props['name']>. Enfin, nous rendons le modèle du composant en fonction des propriétés de l'option props. 🎜🎜Conclusion : 🎜Dans Vue 3, l'utilisation de Typescript peut fournir à notre code des invites de vérification de type et d'intelligence de code plus solides, améliorant ainsi la maintenabilité du code. Cet article décrit comment configurer la prise en charge de Typescript pour les projets Vue 3, ainsi qu'un exemple de code pour utiliser correctement Typescript dans les projets Vue 3. J'espère que cet article vous aidera à utiliser Typescript dans Vue 3. 🎜

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!