Erste Schritte schriftlich klassenbasierte Vue.js-Apps in TypeScript

vue.js 3.0 und typecript sind leistungsstarke Kombinationen

vue.js 3.0 wird die Typscript-Benutzer verbessert, einschließlich der nativen Unterstützung für klassenbasierte Komponenten und besserer Typinferenz. Sie können jedoch jetzt mit dem Schreiben von VUE -Anwendungen mithilfe von TypeScript mit VUE CLI, dem Befehlszeilen -Tool von VUE, anfangen.

Vorteile von klassenbasierten Komponenten und Typenkript

Die klassenbasierten Komponenten in Vue.js können mit der TypeScript-Klasse geschrieben werden, die eine bessere Überprüfung und Wartbarkeit bietet. Diese Klassen können mit dem vue-property-decorator -Dekorator im @Component -Paket deklariert werden.

Die anderen Dekorateure, die vom

vue-property-decorator -Paket bereitgestellt werden, können die klassenbasierten Komponenten weiter verbessern. Dazu gehören @Prop zum Deklarieren von Requisiten als Klassenattribute, @Emit zum Emission von Ereignissen aus Klassenmethoden und @Watch zum Erstellen von Beobachtern.

Vorteile von TypeScript und Vue.js

TypeScript wird in Verbindung mit VUE.JS mit mehreren Vorteilen verwendet, einschließlich statischer Überprüfung der Früherkennung von Fehlern, einer besseren Autocomplete-, Navigation- und Refactoring -Dienste und der Bereitstellung von strukturierterem und erweiterbarem Code für komplexe Anwendungsbibliothek.

Im vergangenen September kündigte Evan Sie (der Schöpfer von Vue.js) Pläne für die nächste große Version der Bibliothek an. VUE 3.0 bietet Typscript-Benutzern eine verbesserte Erfahrung, einschließlich der nativen Unterstützung für klassenbasierte Komponenten und eine bessere Unterstützung für Typinferenz beim Schreiben von Code.

Die gute Nachricht ist, dass Sie bis zur Veröffentlichung von 3.0 (erwartet in Q3 2019) nicht warten müssen, um Vue -Apps mit TypeScript zu schreiben. Das Befehlszeilen -Tool von VUE bietet die Option, ein Projekt mit dem vorkonfigurierten TypeScript -Build -Tool zu starten, und enthält das offiziell unterstützte vue-class-component -Modul, mit dem Sie VUE -Komponenten als TypeScript -Klassen schreiben können.

In diesem Artikel geht davon aus, dass Sie mit den Grundlagen von Vue und Typecript vertraut sind. Lassen Sie uns sehen, wie Sie heute damit beginnen, statische Tippen und klassenbasierte Komponenten zu nutzen.

VUE TIPYScript -Projekt erstellen

Eines der Hindernisse für den Einstieg mit TypeScript kann die erforderlichen Build -Tools konfigurieren. Zum Glück hat Vue Cli dieses Problem für uns gelöst. Wir können es verwenden, um ein Projekt für uns zu erstellen, bei dem der Typscript -Compiler eingerichtet und bereit ist.

Führen Sie kurz den Prozess der Verwendung von TypeScript ein, um neue VUE -Projekte zu erstellen.

Führen Sie den folgenden Befehl aus der Terminal-/Befehlszeile aus (und vorausgesetzt, Sie haben Node.js installiert), um Vue CLI global zu installieren:

npm install -g @vue/cli

Erstellen wir als nächstes ein neues Projekt und geben den Projektnamen an:

vue create vue-typescript-demo

Dies wird auch der Name des Unterordners für das Installationsprojekt sein. Nach dem Drücken von Eingabetastet werden Sie aufgefordert, die Standardvoreinstellung auszuwählen oder die zu installierende Option manuell auszuwählen.

Wählen Sie die manuelle Option aus und Sie werden weitere Optionen angezeigt. Die erforderliche Option ist natürlich TypeScript, aber Sie möchten möglicherweise auch Vuex auswählen, da wir uns später einige Vuex-spezifische Dekorateure ansehen.

Nach der Auswahl der Projektoption werden Sie auf dem nächsten Bildschirm gefragt, ob Sie die Komponentensyntax der Klassenstil verwenden möchten. Sagen Sie "Ja". Sie werden dann gefragt, ob Sie "Babel mit TypeScript für Polyfills zur automatischen Erkennung verwenden" möchten. Dies ist eine gute Idee für Projekte, die Sie ältere Browser unterstützen. Beantworten Sie den Rest der Fragen nach Bedarf und der Installationsprozess sollte beginnen.

Anweisungen zum Herausgeber/IDE -Support

Viele Code -Editoren und -IDes unterstützen jetzt TypeScript. In kostenpflichtigen Lösungen bietet JetBrains -Software (wie Webstorm, PHPSTORM) eine hervorragende Unterstützung für VUE und TISTESCIPT. Wenn Sie nach einer kostenlosen Alternative suchen, empfehle ich den Visual Studio -Code von Microsoft: In Verbindung mit der Vetur -Erweiterung bietet er eine hervorragende automatische Vervollständigung und Typ -Überprüfung.

klassenbasierte Komponenten

Schauen wir uns zunächst an, wie Sie Vue -Komponenten mit Klassen schreiben. Obwohl diese Funktion nicht auf TypeScript beschränkt ist, hilft die Verwendung klassenbasierter Komponenten Ts, eine bessere Überprüfung von Typen zu ermöglichen. Meiner Meinung nach wird die Komponenten einfacher und einfacher zu warten.

Schauen wir uns die Syntax an. Wenn Sie die Schritte im vorherigen Abschnitt befolgt und ein neues Projekt mit der Vue CLI erstellt haben, wechseln Sie zum Projektverzeichnis, wechseln Sie zum Unterfilmer src und öffnen Sie app.vue . Was wir hier interessiert sind, ist der Abschnitt <script></script>, da er der einzige Teil der Standard -Vue -Einzeldateikomponente (SFC) ist.

npm install -g @vue/cli

Beachten Sie, dass das <script></script> -Tag selbst das auf ts festgelegte lang -Treffer hat. Dies ist sehr wichtig, damit das Build -Tool und Ihr Editor den Code als TypeScript korrekt interpretieren können.

Um eine klassenbasierte Komponente zu deklarieren, müssen Sie eine Klasse erstellen, die VUE erweitert (hier wird sie direkt aus dem vue-property-decorator -Paket anstelle des vue -Moduls importiert).

Klassenerklärungen müssen mit @Component Dekorateur beginnen:

vue create vue-typescript-demo

Sie haben möglicherweise festgestellt, dass der Dekorateator im Code aus der App.vue -Komponente auch ein Objekt akzeptieren kann, mit dem Komponenten, Requisiten und Filteroptionen angegeben werden können:

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

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

Datenattribute

Wenn Sie eine objektbasierte Komponente deklarieren, sind Sie mit Funktionen vertraut, die die Dateneigenschaften der Komponente als Rückgabe eines Datenobjekts deklarieren müssen:

@Component
class MyComponent extends Vue {}

… Für klassenbasierte Komponenten können wir Datenattribute als normale Klassenattribute deklarieren:

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

Computereigenschaften

Ein weiterer Vorteil der Verwendung von Klassen als Komponenten ist die sauberere Syntax für die Deklaration berechneter Eigenschaften unter Verwendung der Getter -Methode:

{
  data: () => ({
    todos: [],
  })
}

In ähnlicher Weise können Sie mit der Setter -Methode beschreibbare berechnete Eigenschaften erstellen:

@Component
class TodoList extends Vue {
  todos: [];
}

Methode

Komponentenmethoden können auf ähnliche Weise als Klassenmethoden deklariert werden:

npm install -g @vue/cli

Meiner Meinung nach macht die einfache Syntax zum Deklarieren von Methoden, Datenattributen und berechneten Attributen das Schreiben und Leseklassenbasis besser als die ursprünglichen objektbasierten Komponenten.

Dekoratoren

Wir können noch einen Schritt weiter gehen und den zusätzlichen Dekorateur verwenden, der vom vue-property-decorator -Paket bereitgestellt wird. Es bietet sechs zusätzliche Dekorateure für das Schreiben von Klassenbasiskomponenten:

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

Schauen wir uns die drei an, die Sie möglicherweise am nützlichsten finden.

@Prop

Sie können Ihre Requisiten als Klasseneigenschaft mit dem @Prop -Dekorator deklarieren, anstatt das Props -Konfigurationsobjekt an den @Component -Dekorator weiterzugeben.

vue create vue-typescript-demo

Wie andere Dekorateure kann @Prop verschiedene Parameter akzeptieren, einschließlich Typ, Typ Array oder Option:

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

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

Wenn Sie mit TypeScript verwendet werden, sollten Sie Ihrem Requisitenamen einen nicht leeren Operator (!) Hinzufügen, um dem Compiler mitzuteilen, dass die Requisite nicht leere Werte hat (weil TS nicht weiß, dass diese Werte werden werden übergeben werden, wenn die Komponente in der Komponente initialisiert wird):

@Component
class MyComponent extends Vue {}

Beachten Sie, dass Sie, wie oben gezeigt, den Dekorateur und die Attributdeklaration vollständig in eine Zeile setzen können, wenn Sie es vorziehen.

@Emit

Ein weiterer bequemer Dekorator ist @Emit, mit dem Sie Ereignisse aus jeder Klassenmethode ausstellen können. Das emittierte Ereignis verwendet den Namen der Methode (der Name des Kamelcase wird in Kebab-Case konvertiert), es sei denn, der alternative Ereignisname wird an den Dekorateur übergeben.

Wenn die Methode einen Wert zurückgibt, wird der Wert als Nutzlast des Ereignisses sowie alle an die Methode übergebenen Parameter ausgegeben.

@Component({
  components: { MyChildComponent },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  filters: {
    currencyFormatter
  }
})
class MyComponent extends Vue {}

Der obige Code wird mit der Nutzlast des Wertes von add-todo ein this.newTodo Ereignis ausgestrahlt.

@Watch

Es ist sehr einfach, einen Beobachter mit diesem Dekorateur zu erstellen. Es akzeptiert zwei Parameter: den Namen der beobachteten Eigenschaft und ein optionales Optionsobjekt.

{
  data: () => ({
    todos: [],
  })
}

Zusammenfassung

Ich hoffe, dieser Artikel zeigt Ihnen, dass es nicht unbedingt mühsam ist, VUE -Anwendungen mithilfe von TypeScript zu schreiben. Durch das Starten eines neuen Projekts mit der CLI können Sie die erforderlichen Build -Tools schnell einrichten. Durch die Unterstützung klassenbasierter Komponenten und zusätzlicher Dekorateure können Sie sofort eine kurze, idiomatische Typscript schreiben!

Möchten Sie Vue.js von Grund auf lernen? Verwenden Sie SitePoint Premium, um eine vollständige Sammlung von Vue -Büchern zu erhalten, die die Grundlagen, Projekte, Tipps und Werkzeuge und mehr abdecken. Machen Sie jetzt nur 9 US-Dollar pro Monat oder probieren Sie unsere 7-tägige kostenlose Testversion aus.

FAQs (FAQ) über klassenbasierte Vue.js mit TypeScript

Was sind die Vorteile der Verwendung von TypeScript und Vue.js?

TypeScript bietet eine statische Typisierung, die bei der Entwicklung großer Anwendungen von erheblichem Vorteil sein kann. Es hilft, Fehler frühzeitig im Entwicklungsprozess zu fangen und den Code robuster und leichter aufrechtzuerhalten. TypeScript bietet auch eine bessere automatische Abschluss-, Navigations- und Rekonstruktionsdienste, um den Entwicklungsprozess effizienter zu gestalten. Bei Verwendung mit VUE.JS ermöglicht TypeScript eine strukturiertere und erweiterbare Codebasis, wodurch komplexe Anwendungen verwaltet und entwickelt werden können.

Wie richte ich ein Vue.js -Projekt mit TypeScript ein?

Einrichten eines Vue.js -Projekts mit TypeScript umfasst mehrere Schritte. Erstens müssen Sie es installieren, wenn Sie Vue CLI nicht installiert haben. Verwenden Sie dann die Vue CLI, um ein neues Projekt zu erstellen und Typenkript als Funktion während des Erstellungsvorgangs auszuwählen. Die Vue CLI richtet die Typscript -Konfiguration für Sie ein. Sie können dann mit dem TypeScript mit dem Schreiben von Vue -Komponenten beginnen.

Was sind die klassenbasierten Komponenten in Vue.js?

Die klassenbasierten Komponenten in Vue.js sind eine Möglichkeit, Komponenten mit ES6-Klassen zu definieren. Dieser Ansatz kann Ihre Komponenten leichter zu lesen und zu verstehen, insbesondere für Entwickler vor Hintergrund in objektorientierter Programmierung. Klassenbasierte Komponenten funktionieren auch gut mit TypeScript, sodass Sie die Funktionen von TypeScript wie statische Typen und Schnittstellen nutzen können.

Wie verwendet ich TypeScript, um eine klassenbasierte Komponente in Vue.js zu definieren?

Um klassenbasierte Komponenten mithilfe von TypeScript in Vue.js zu definieren, müssen Sie den vue-class-component -Dekorator verwenden. Mit diesem Dekorateur können Sie Komponenten als ES6 -Klassen schreiben. In einer Klasse können Sie Daten, Methoden und Lebenszyklushaken wie in einer regulären Vue -Komponente definieren.

Kann ich die Vue.js-Anweisung in einer klassenbasierten Komponente verwenden?

Ja, Sie können die Vue.js-Anweisung in klassenbasierten Komponenten verwenden. Die Syntax ist die gleiche wie in regulären Vue -Komponenten. Sie können v-model, v-if, v-for und andere Anweisungen in der Vorlage verwenden.

Wie verwendet ich Requisiten in klassenbasierten Komponenten?

In einer klassenbasierten Komponente können Sie Requisiten mit dem @Prop -Dekorator definieren. Mit diesem Dekorateur können Sie die Art der Requisite angeben und ob er erforderlich ist oder einen Standardwert hat.

Wie verwendet ich berechnete Eigenschaften in einer klassenbasierten Komponente?

In einer klassenbasierten Komponente können Sie berechnete Eigenschaften als Getter-Methode in einer Klasse definieren. Das Ergebnis der Getter -Methode wird nur dann zwischengespeichert und neu berechnet, wenn sich ihre Abhängigkeiten ändern.

Wie kann ich Beobachter in klassenbasierten Komponenten verwenden?

In einer klassenbasierten Komponente können Sie den @Watch -Dekorator verwenden, um Beobachter zu definieren. Mit diesem Dekorateur können Sie die zu beobachtenden Attribute und die aufgerufenen Methoden angeben, wenn sich das Attribut ändert.

Kann ich Mixin in einer klassenbasierten Komponente verwenden?

Ja, Sie können Mixin in klassenbasierten Komponenten verwenden. Sie können Mixin als Klasse definieren und mit dem @Mixins -Dekorator in Ihre Komponente aufnehmen.

Wie verwendet ich die Vue.js -Kombinations -API mit TypeScript?

vue.js Kombination API funktioniert gut mit TypeScript. Sie können Ihre reaktiven Daten und Funktionen innerhalb der setup -Methode definieren und den Typ für ihn mithilfe von TypeScript festlegen. Auf diese Weise können Sie die statischen Tippen und automatischen Funktionen von TypeScript nutzen, um Ihren Code robuster und einfacher zu entwickeln.

Das obige ist der detaillierte Inhalt vonErste Schritte schriftlich klassenbasierte Vue.js-Apps in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!