Tutoriel de configuration de l'intégration Vue et TypeScript

Cet article présente principalement le tutoriel le plus simple (recommandé) pour la configuration de l'intégration de vue et TypeScript. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Avant-propos

La documentation officielle de Vue ne donne pas d'étapes spécifiques pour l'intégration avec TypeScript. D'autres tutoriels sur Internet ont des problèmes ou sont différents des projets créés par vue-. cli. , ce qui empêche les gens de démarrer.

Ci-dessous, je vais donner la configuration la plus simple pour intégrer le projet créé par vue-cli avec TypeScript.

Initialisez le projet

Créez d'abord le projet webpack avec vue-cli. Pour faciliter la démonstration, le routeur et l'eslint ne sont pas ouverts ici. Vous pouvez les ouvrir en fonction de votre propre situation.

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Installez les dépendances liées à TypeScript et d'autres dépendances du projet, utilisez npm ou cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

Configuration

Modifiez le fichier bulid/webpack.base.conf.js dans le répertoire et ajoutez les règles suivantes au module>rules dans le fichier

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
},

Créez un nouveau fichier vue-shims.d.ts dans le répertoire src pour identifier le code ts dans un seul fichier vue

declare module "*.vue" {
 import Vue from "vue";
 export default Vue;
}

dans le répertoire racine du projet Créez un fichier de configuration TypeScript tsconfig.json sous

{
 "compilerOptions": {
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "allowSyntheticDefaultImports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

Renommez main.js sous src en main.ts

Modifiez sous webpack.base.conf.js entry>app为'./src/main.ts'

Modifiez le fichier App.vue sous src et testez-le dans

<script lang="ts">

Vous pouvez tester si le l'intégration est réussie. Editez le fichier src/components/Hello.vue, modifiez

et exécutez le projet

<script lang="ts">
 import Vue, {ComponentOptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as ComponentOptions

Le test a réussi, c'est maintenant un projet TypeScipt

# npm run dev

Avancé

Configurer la vue officiellement recommandée - class-component, https://cn.vuejs.org/v2/guide/typescript.html

Installer les dépendances de développement

Modifier ts Fichier de configuration, ajoutez les deux configurations suivantes

# npm install --save-dev vue-class-component

Réécrivez notre composant Hello

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

dans use Après vue-class-component, les données initiales peuvent être directement déclarées comme l'attribut de l'instance sans les mettre dans data() {return{}}. La méthode du composant peut également être directement déclarée comme la méthode de l'instance, par exemple. comme instance officielle. Plus d'utilisations Pour les méthodes, veuillez vous référer à sa documentation officielle

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }

https://github.com/vuejs/vue-class-component#vue-class-component

Recommandations associées :

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
 // 所有的组件选项都可以放在这里
 template: &#39;<button @click="onClick">Click!</button>&#39;
})
export default class MyComponent extends Vue {
 // 初始数据可以直接声明为实例的属性
 message: string = &#39;Hello!&#39;
 // 组件方法也可以直接声明为实例的方法
 onClick (): void {
  window.alert(this.message)
 }
}

Améliorations de TypeScript dans Vue 2.5

Présentation des types déclarés de JavaScript et TypeScript

Partagez quelques astuces sur TypeScript

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!