So verwenden Sie TypeScript-Methoden in Vue-Komponenten (ausführliches Tutorial)

Typescript kann nicht nur unsere Codierungsgewohnheiten einschränken, sondern auch als Anmerkung dienen. Wenn wir eine Funktion sehen, können wir sofort wissen, wie wir sie verwenden. In diesem Artikel wird hauptsächlich die Methode zur Verwendung von TypeScript in Vue-Komponenten vorgestellt.

Hinweis: Dieser Artikel ersetzt nicht alle Vue-Komponenten, kann aber im Originalprojekt verwendet werden Dateien ist derzeit nur eine praktische Phase, ein Ü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 nicht für die Entwicklung großer Programme geeignet ist. Darüber hinaus bietet es auch etwas syntaktischen Zucker, damit jeder die objektorientierte Programmierung bequemer üben kann.

Typescript kann nicht nur unsere Codierungsgewohnheiten einschränken, sondern auch als Anmerkung dienen. Wenn wir eine Funktion sehen, können wir sofort wissen, wie sie verwendet wird, welcher Wert übergeben werden muss und welchen Typ der Rückgabewert hat Es ist auf einen Blick klar, 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 leicht zu lesen ist jQuery.ajax(url,settings), 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 wählen wir TypeScript?

Ist es leicht zu erlernen?

Eines der Design-Highlights von TypeScript ist, dass es nicht die Syntax von JavaScript aufgibt und eine neue beginnt, sondern zu einer Obermenge von JavaScript wird (dieser Verdienst gebührt Anders). ), sodass alle zulässigen JavaScript-Anweisungen unter TypeScript zulässig sind, 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 der Verwendung von JavaScript basiert Gewohnheiten und Konventionen.

Einige einfache Beispiele, auf einen Blick leicht zu verstehen:

Grundtyp

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

Schnittstelle

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

Der Typprüfer prüft den Aufruf von printLabel. 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, ich werde hier nicht zu sehr auf die Einführung eingehen, sondern mehr erfahren

Wie wendet man ts im Vue-Projekt an?

1、首先安装ts

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

2、在根目录建tsconfig.json文件

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

3、在配置中添加 ts-loader

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

4、最后把 .ts 后缀添加上就OK了，在webpack.base.conf.js文件下

 

现在就可以在我们原本的项目中使用ts文件了。

如何实践？

1、如何在js中引用ts文件？

由于js文件没有类型检测，当我们把ts文件引入的时候，ts文件会转化成js文件，所以在js文件中引用ts文件的方法类型检测机制不会生效。也就是说只有在ts文件内才会有类型检测机制。

那么怎么在js文件中使用类型检测机制呢？小编自己封装了一套typeCheck的decorator方法，仅供参考！用法如下：

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

检测deleteItem方法参数： item为object类型，index为number类型，如果类型不匹配将会抛出异常

部分代码献上：

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

ts的类型检测配合typeCheck基本上已经满足了我们的需要。

2、如何在ts中引用js文件？

由于js文件中没有类型检测，所以ts文件引入js文件时会转化为any类型，当然我们也可以在 .d.ts文件中声明类型。

如 global.d.ts 文件

 

当然有的时候我们需要使用一些库，然而并没有声明文件，那么我们在ts文件中引用的时候就会是undefined。这个时候我们应该怎么做？

比如我想要在util.ts文件中用 ‘query-string'的时候我们就会这样引用：

import querystring from 'query-string';

然而当你打印querystring 的时候是undefined。如何解决呢？小编的方法也仅供参考

新建module.js文件

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

utile.ts 文件

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

解决了。打印qs不再是undefined，可以正常使用qs库了哦。

至此本文就将ts在vue中的配置介绍结束，此文只代表个人看法，考虑到项目的扩展性，所以没有全部替换成ts，只是尝试性在vue中引入ts，还有很多需要改进的地方，如果有更好的建议和意见可以联系我！

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS实现将链接生成二维码并转为图片的方法

基于vue1和vue2获取dom元素的方法

nodejs+mongodb aggregate级联查询操作示例

Das obige ist der detaillierte Inhalt vonSo verwenden Sie TypeScript-Methoden in Vue-Komponenten (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!