在Vue元件中如何使用 TypeScript的方法（詳細教學）

typescript不僅可以約束我們的編碼習慣，還能起到註解的作用，當我們看到一函數後我們立刻就能知道這個函數的用法。這篇文章主要介紹了在Vue元件中使用TypeScript的方法,需要的朋友可以參考下

注意：此文並不是把vue改為全部替換為ts，而是可以在原來的專案中植入ts文件，目前只是實踐階段，轉化為ts過程中的過渡。

ts有什麼用？

類型檢查、直接編譯到原生js、引入新的語法糖

為什麼要用ts？

TypeScript的設計目的應該是解決JavaScript的「痛點」：弱型別和沒有命名空間，導致很難模組化，不適合開發大型程式。另外它也提供了一些語法糖來幫助大家更方便地實踐物件導向的程式設計。

typescript不僅可以約束我們的編碼習慣，還能起到註解的作用，當我們看到一函數後我們立刻就能知道這個函數的用法，需要傳什麼值，傳回值是什麼型別一目了然，對大型專案的維護性有很大的提升。也不至於使開發者搬起石頭砸自己的腳。

Angular: 我們為什麼選擇TypeScript?

• TypeScript 裡優秀的工具

• TypeScript 是JavaScript 的超集

• TypeScript 使得抽象清晰可見

• TypeScript 讓程式碼更容易閱讀和理解

• 是的，我知道這看起來並不直觀。讓我用一個例子來說明我的意思。讓我們來看看這個函數jQuery.ajax()。我們能從它的簽章中得到什麼資訊?

 

我們唯一能確定的是這個函數有兩個參數。我們可以猜測這些類型。也許第一個是字串，第二個是配置物件。但這只是猜測，我們可能錯了。我們不知道什麼選項進入設定物件(它們的名稱和類型)，或該函數傳回什麼。

在不檢查原始程式碼或文件的情況下，我們不可能呼叫這個函數。檢查原始程式碼並不是一個好的選擇——擁有函數和類別的目的，是在不知道如何實現它們的情況下使用它們。換句話說，我們應該依賴他們的接口，而不是他們的實作。我們可以檢查文檔，但這並不是最好的開發經驗——它需要額外的時間，而且文檔經常過期。

因此，儘管很容易閱讀jQuery.ajax(url,settings)，真正理解如何呼叫這個函數，我們需要閱讀它的實作或它的文件。

以下是一個類型版本：

 

它給了我們更多的資訊。

• 這個函數的第一個參數是字串。

• 設定參數是可選的。我們可以看到所有可以傳遞到函數中的選項，不僅是它們的名稱，還包括它們的類型。

• 函數傳回一個JQueryXHR對象，我們可以看到它的屬性和函數。

類型化簽章肯定比未類型化的簽章長，但是:string，:JQueryAjaxSettings和JQueryXHR並不是混亂的。它們是提高程式碼的可理解性的重要文件。我們可以更深入地理解程式碼，而不必深入實作或讀取文件中。我的個人經驗是，我可以更快地閱讀類型化程式碼，因為類型提供了更多的上下文來理解程式碼。

摘自 Angular: 我們為什麼選擇TypeScript?

ts好學嗎？

TypeScript的一個設計亮點就是它並沒有拋棄JavaScript的語法另起爐灶，而是做成了JavaScript的超集（這個功勞應該記在Anders上），這樣任何合法的JavaScript的語句在TypeScript下都是合法的，也就是說學習成本很低，如果你對JavaScript有比較深入的了解，那麼其實可以很快的上手TypeScript，因為它的設計都是針對JavaScript的使用習慣和慣例。

一些簡單的例子，一看即懂：

基礎型別

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

介面

#

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

類型檢查器會查看printLabel的呼叫。 printLabel有一個參數，並要求這個物件參數有一個名為label類型為string的屬性。需要注意的是，我們傳入的物件參數實際上會包含許多屬性，但是編譯器只會檢查那些必需的屬性是否存在，並且其類型是否符合。

當然還有一些高級的用法，這裡就不做過多的介紹了，了解更多#如何在vue專案中應用ts？

#######

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级联查询操作示例

以上是在Vue元件中如何使用 TypeScript的方法（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！