Tipps zur Verwendung von TS in Vue

Hinweis: In diesem Artikel geht es nicht darum, alle Vue-Dateien durch TS zu ersetzen, sondern darum, TS-Dateien in das Originalprojekt einzubetten. Derzeit befindet er sich nur in der Übungsphase und im Übergang zum TS-Konvertierungsprozess.

Was ist der Nutzen von Ts?

Typprüfung, direkte Kompilierung in native JS, Einführung neuer syntaktischer Zucker

Warum ts verwenden?

TypeScript sollte so konzipiert sein, dass es die „Schmerzpunkte“ von JavaScript löst: schwache Typen und kein Namespace, was die Modularisierung erschwert und dafür nicht geeignet ist Entwicklung großer Programme. Darüber hinaus bietet es auch etwas Syntaxzucker, um jedem das Üben der objektorientierten Programmierung zu erleichtern.

Typescript kann nicht nur unsere Codierungsgewohnheiten einschränken, sondern auch die Rolle von Kommentaren spielen. Wenn wir eine Funktion sehen, können wir sofort erkennen, wie diese Funktion benötigt wird Auf einen Blick ist klar, welcher Wert übergeben wird und welcher Typ der Rückgabewert ist, was die Wartbarkeit großer Projekte erheblich verbessert. Es wird nicht dazu führen, dass sich Entwickler selbst ins Bein schießen.

Angular: Warum haben wir uns für TypeScript entschieden?

• Ausgezeichnete Tools in TypeScript

• TypeScript ist eine Obermenge von JavaScript

• TypeScript macht Abstraktionen sichtbar

• TypeScript macht Code einfacher zu lesen und zu verstehen

Ja, ich weiß das scheint nicht intuitiv zu sein. Lassen Sie mich anhand eines Beispiels veranschaulichen, was ich meine. Schauen wir uns diese Funktion jQuery.ajax() an. Welche Informationen können wir aus ihrer Signatur erhalten?

Das Einzige, was wir mit Sicherheit wissen, ist, dass diese Funktion zwei Parameter hat. Wir können diese Typen erraten. Möglicherweise ist das erste ein String und das zweite ein Konfigurationsobjekt. Aber das ist nur Spekulation und wir könnten uns irren. Wir wissen nicht, welche Optionen in das Einstellungsobjekt eingehen (ihre Namen und Typen) oder was die Funktion zurückgibt.

Es ist unmöglich, diese Funktion aufzurufen, ohne den Quellcode oder die Dokumentation zu überprüfen. Eine Untersuchung des Quellcodes ist keine Option – der Zweck von Funktionen und Klassen besteht darin, sie zu verwenden, ohne zu wissen, wie man sie implementiert. Mit anderen Worten: Wir sollten uns auf ihre Schnittstellen verlassen, nicht auf ihre Implementierungen. Wir könnten die Dokumentation überprüfen, aber es ist nicht die beste Entwicklungserfahrung – es nimmt zusätzliche Zeit in Anspruch und die Dokumentation ist oft veraltet.

Obwohl es einfach ist, jQuery.ajax(url,settings) zu lesen, müssen wir, um wirklich zu verstehen, wie diese Funktion aufgerufen wird, ihre Implementierung oder Dokumentation lesen.

Hier ist eine Typversion:

Sie gibt uns weitere Informationen.

• Der erste Parameter dieser Funktion ist eine Zeichenfolge.

• Das Festlegen von Parametern ist optional. Wir können alle Optionen sehen, die an die Funktion übergeben werden können, nicht nur ihre Namen, sondern auch ihre Typen. Die Funktion

• gibt ein JQueryXHR-Objekt zurück und wir können seine Eigenschaften und Funktionen sehen.

Getippte Signaturen sind definitiv länger als untypisierte, aber :string, :JQueryAjaxSettings und JQueryXHR sind nicht überladen. Es handelt sich um wichtige Dokumente, die die Verständlichkeit Ihres Codes verbessern. Wir können den Code tiefer verstehen, ohne uns mit der Implementierung befassen oder die Dokumentation lesen zu müssen. Meine persönliche Erfahrung ist, dass ich eingegebenen Code schneller lesen kann, weil die Typen mehr Kontext bieten, um den Code zu verstehen.

Auszug aus Angular: Warum haben wir uns für TypeScript entschieden?

Ist es lernbegierig?

Eines der Design-Highlights von TypeScript ist, dass es nicht die Syntax von JavaScript aufgibt und eine neue beginnt, sondern es stattdessen zu einer Obermenge von JavaScript macht (dieser Verdienst gebührt Anders), Damit ist jede legale JavaScript-Anweisung unter TypeScript legal, was bedeutet, dass der Lernaufwand sehr gering ist. Wenn Sie über ein tieferes Verständnis von JavaScript verfügen, können Sie tatsächlich schnell mit TypeScript beginnen, da sein Design auf den Nutzungsgewohnheiten von JavaScript basiert Konventionen.

Einige einfache Beispiele, leicht verständlich auf einen Blick:

Grundtypen

  let isDone: boolean = false;  // 布尔值
  let decLiteral: number = 6;    // 数字
  let name: string = "bob";  // 字符串
  let list: number[] = [1, 2, 3]; // 数组
  ...
  ...

Schnittstellen

function printLabel(labelledObj: { label: string }) {    console.log(labelledObj.label);
  }  let myObj = { size: 10, label: "Size 10 Object" };
  printLabel(myObj);

Der Typprüfer Schauen Sie sich den Aufruf von printLabel an. printLabel hat einen Parameter und erfordert, dass dieser Objektparameter ein Attribut namens label vom Typ string hat. Es ist zu beachten, dass der von uns übergebene Objektparameter tatsächlich viele Eigenschaften enthält, der Compiler jedoch nur prüft, ob diese erforderlichen Eigenschaften vorhanden sind und ob ihre Typen übereinstimmen.

Natürlich gibt es einige fortgeschrittene Verwendungsmöglichkeiten, die ich hier nicht allzu ausführlich vorstellen werde

Wie wende ich Ts in Vue-Projekten an?

1. Zuerst ts installieren

npm install --save-dev typescript npm install --save-dev ts-loader

2 die Datei tsconfig.json im Stammverzeichnis

<code>{
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["dom","es2016"],
      "target": "es5"
    },
    "include": ["./src/**/*"]  <br>}</code>

3. Fügen Sie ts-loader in der Konfiguration hinzu

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

4. Fügen Sie schließlich das Suffix .ts hinzu und es ist in Ordnung, im Webpack. Unter der Datei base.conf.js

können Sie jetzt die ts-Datei in unserem Originalprojekt verwenden.

Wie übt man?

1. Wie referenziere ich TS-Dateien in JS?

Da js-Dateien keine Typerkennung haben, werden die ts-Dateien beim Importieren von ts-Dateien in js-Dateien konvertiert, sodass der Methodentyperkennungsmechanismus zum Verweisen auf ts-Dateien in js-Dateien nicht wirksam wird. Mit anderen Worten, es gibt nur in der ts-Datei einen Typerkennungsmechanismus.

Wie nutzt man also den Typerkennungsmechanismus in JS-Dateien? Der Editor hat eine Reihe von TypeCheck-Dekoratormethoden nur zu Referenzzwecken gekapselt! Die Verwendung ist wie folgt:

@typeCheck('object','number')  deleteItem(item,index) {}

DeleteItem-Methodenparameter erkennen: Element ist Objekttyp, Index ist Zahlentyp. Wenn die Typen nicht übereinstimmen, wird eine Ausnahme ausgelöst

Ein Teil des Codes Präsentation:

<code>const _check = function (checked,checker) {
        check:    <br>        for(let i = 0; i < checked.length; i++) {      <br>        if(/(any)/ig.test(checker[i]))        <br>            continue check;      <br>        if(_isPlainObject(checked[i]) && /(object)/ig.test(checker[i]))<br>            continue check;      <br>        if(_isRegExp(checked[i]) && /(regexp)/ig.test(checker[i]))<br>            continue check;      <br>        if(Array.isArray(checked[i]) && /(array)/ig.test(checker[i]))<br>            continue check;      <br>        let type = typeof checked[i];      <br>        let checkReg = new RegExp(type,'ig')      <br>        if(!checkReg.test(checker[i])) {        <br>            console.error(checked[i] + 'is not a ' + checker[i]);        <br>            return false;
      }
    }    return true;
  }  /**
   * @description 检测类型
   *   1.用于校检<a href="http://www.php.cn/wiki/147.html" target="_blank">函数参数</a>的类型，如果类型错误，会打印错误并不再执行该函数；
   *   2.类型检测忽略大小写，如string和String都可以识别为字符串类型；
   *   3.增加any类型，表示任何类型均可检测通过；
   *   4.可检测多个类型，如 "number array",两者均可检测通过。正则检测忽略连接符 ；
   */
  export function typeCheck() {    <br>      const checker =  Array.prototype.slice.apply(arguments);    <br>          return function (target, funcName, descriptor) {      <br>              let oriFunc = descriptor.value;
              descriptor.value =  function () {        <br>              let checked =  Array.prototype.slice.apply(arguments);        <br>                  let result = undefined;        <br>                  if(_check(checked,checker) ){
                      result = oriFunc.call(this,...arguments);
        }             return result;
      }
    }
  };</code>

ts-Typerkennung in Kombination mit TypeCheck erfüllt grundsätzlich unsere Anforderungen.

2. Wie verweise ich auf js-Dateien in ts?

Da es in der js-Datei keine Typerkennung gibt, wird die ts-Datei beim Import in die js-Datei in einen beliebigen Typ konvertiert. Natürlich können wir den Typ auch in der .d.ts-Datei deklarieren.

Zum Beispiel die Datei global.d.ts

Natürlich müssen wir manchmal einige Bibliotheken verwenden, aber es gibt keine Deklarationsdatei, dann fügen wir hinzu es in der ts-Datei Es ist undefiniert, wenn darauf verwiesen wird. Was sollen wir zu diesem Zeitpunkt tun?

Wenn ich beispielsweise „query-string“ in der Datei util.ts verwenden möchte, zitieren wir es wie folgt:

import querystring from 'query-string';

Wenn Sie jedoch querystring drucken, ist es ist undefiniert. Wie kann man es lösen? Die Methode des Editors dient nur als Referenz

Erstellen Sie eine neue module.js-Datei

import querystring from 'query-string';  export const qs = querystring;

utile.ts-Datei

import { qs } from './module.js';

Gelöst. Das Drucken von qs ist nicht mehr undefiniert und Sie können die qs-Bibliothek normal verwenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Grundkenntnisse von HTML im Frontend

Position des CSS-Float-Box-Modells

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von TS in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!