TypeScript怎么在Vue組件中使用

本篇文章給大家分享的是有關(guān)TypeScript怎么在Vue組件中使用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)公司主營鳳山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),鳳山h5成都微信小程序搭建,鳳山網(wǎng)站營銷推廣歡迎鳳山等地區(qū)企業(yè)咨詢

ts有什么用？

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

為什么用ts？

TypeScript的設(shè)計(jì)目的應(yīng)該是解決JavaScript的“痛點(diǎn)”：弱類型和沒有命名空間，導(dǎo)致很難模塊化，不適合開發(fā)大型程序。另外它還提供了一些語法糖來幫助大家更方便地實(shí)踐面向?qū)ο蟮木幊獭?/p>

typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法，需要傳什么值，返回值是什么類型一目了然，對大型項(xiàng)目的維護(hù)性有很大的提升。也不至于使開發(fā)者搬起石頭砸自己的腳。

Angular: 我們?yōu)槭裁催x擇TypeScript?

TypeScript 里優(yōu)秀的工具
TypeScript 是 JavaScript 的超集
TypeScript 使得抽象清晰可見
TypeScript 使代碼更容易閱讀和理解
是的，我知道這看起來并不直觀。讓我用一個(gè)例子來說明我的意思。讓我們來看看這個(gè)函數(shù)jQuery.ajax()。我們能從它的簽名中得到什么信息?

TypeScript怎么在Vue組件中使用

我們唯一能確定的是這個(gè)函數(shù)有兩個(gè)參數(shù)。我們可以猜測這些類型。也許第一個(gè)是字符串，第二個(gè)是配置對象。但這只是猜測，我們可能錯(cuò)了。我們不知道什么選項(xiàng)進(jìn)入設(shè)置對象(它們的名稱和類型)，或者該函數(shù)返回什么。

在不檢查源代碼或文檔的情況下，我們不可能調(diào)用這個(gè)函數(shù)。檢查源代碼并不是一個(gè)好的選擇——擁有函數(shù)和類的目的，是在不知道如何實(shí)現(xiàn)它們的情況下使用它們。換句話說，我們應(yīng)該依賴于他們的接口，而不是他們的實(shí)現(xiàn)。我們可以檢查文檔，但這并不是最好的開發(fā)經(jīng)驗(yàn)——它需要額外的時(shí)間，而且文檔經(jīng)常過期。

因此，盡管很容易閱讀jQuery.ajax(url,settings)，真正理解如何調(diào)用這個(gè)函數(shù)，我們需要閱讀它的實(shí)現(xiàn)或它的文檔。

以下是一個(gè)類型版本：

TypeScript怎么在Vue組件中使用

它給了我們更多的信息。

這個(gè)函數(shù)的第一個(gè)參數(shù)是一個(gè)字符串。
設(shè)置參數(shù)是可選的。我們可以看到所有可以傳遞到函數(shù)中的選項(xiàng)，不僅是它們的名稱，還包括它們的類型。
函數(shù)返回一個(gè)JQueryXHR對象，我們可以看到它的屬性和函數(shù)。

類型化簽名肯定比未類型化的簽名長，但是:string，:JQueryAjaxSettings和JQueryXHR并不是混亂的。它們是提高代碼的可理解性的重要文檔。我們可以更深入地理解代碼，而不必深入到實(shí)現(xiàn)或讀取文檔中。我的個(gè)人經(jīng)驗(yàn)是，我可以更快地閱讀類型化代碼，因?yàn)轭愋吞峁┝烁嗟纳舷挛膩砝斫獯a。

摘自 Angular: 我們?yōu)槭裁催x擇TypeScript?

ts好學(xué)嗎？

TypeScript的一個(gè)設(shè)計(jì)亮點(diǎn)就是它并沒有拋棄JavaScript的語法另起爐灶，而是做成了JavaScript的超集（這個(gè)功勞應(yīng)該記在Anders上），這樣任何合法的JavaScript的語句在TypeScript下都是合法的，也就是說學(xué)習(xí)成本很低，如果你對JavaScript有比較深入的了解，那么其實(shí)可以很快的上手TypeScript，因?yàn)樗脑O(shè)計(jì)都是針對JavaScript的使用習(xí)慣和慣例。

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

基礎(chǔ)類型

 let isDone: boolean = false; // 布爾值
 let decLiteral: number = 6;  // 數(shù)字
 let name: string = "bob"; // 字符串
 let list: number[] = [1, 2, 3]; // 數(shù)組
 ...
 ...

接口

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

類型檢查器會(huì)查看printLabel的調(diào)用。 printLabel有一個(gè)參數(shù)，并要求這個(gè)對象參數(shù)有一個(gè)名為label類型為string的屬性。需要注意的是，我們傳入的對象參數(shù)實(shí)際上會(huì)包含很多屬性，但是編譯器只會(huì)檢查那些必需的屬性是否存在，并且其類型是否匹配。

當(dāng)然還有一些高級的用法，這里就不做過多的介紹了，了解更多

如何在vue項(xiàng)目中應(yīng)用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文件下

TypeScript怎么在Vue組件中使用

現(xiàn)在就可以在我們原本的項(xiàng)目中使用ts文件了。

如何實(shí)踐？

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

由于js文件沒有類型檢測，當(dāng)我們把ts文件引入的時(shí)候，ts文件會(huì)轉(zhuǎn)化成js文件，所以在js文件中引用ts文件的方法類型檢測機(jī)制不會(huì)生效。也就是說只有在ts文件內(nèi)才會(huì)有類型檢測機(jī)制。

那么怎么在js文件中使用類型檢測機(jī)制呢？小編自己封裝了一套typeCheck的decorator方法，僅供參考！用法如下：

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

檢測deleteItem方法參數(shù)： item為object類型，index為number類型，如果類型不匹配將會(huì)拋出異常

部分代碼獻(xiàn)上：

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,'ig')   
    if(!checkReg.test(checker[i])) {    
      console.error(checked[i] + 'is not a ' + checker[i]);    
      return false;
   }
  }  return true;
 } /**
  * @description 檢測類型
  *  1.用于校檢函數(shù)參數(shù)的類型，如果類型錯(cuò)誤，會(huì)打印錯(cuò)誤并不再執(zhí)行該函數(shù)；
  *  2.類型檢測忽略大小寫，如string和String都可以識別為字符串類型；
  *  3.增加any類型，表示任何類型均可檢測通過；
  *  4.可檢測多個(gè)類型，如 "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基本上已經(jīng)滿足了我們的需要。

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

由于js文件中沒有類型檢測，所以ts文件引入js文件時(shí)會(huì)轉(zhuǎn)化為any類型，當(dāng)然我們也可以在 .d.ts文件中聲明類型。

如 global.d.ts 文件

TypeScript怎么在Vue組件中使用

當(dāng)然有的時(shí)候我們需要使用一些庫，然而并沒有聲明文件，那么我們在ts文件中引用的時(shí)候就會(huì)是undefined。這個(gè)時(shí)候我們應(yīng)該怎么做？

比如我想要在util.ts文件中用 ‘query-string'的時(shí)候我們就會(huì)這樣引用：

import querystring from 'query-string';

然而當(dāng)你打印querystring 的時(shí)候是undefined。如何解決呢？小編的方法也僅供參考

新建module.js文件

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

utile.ts 文件

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

以上就是TypeScript怎么在Vue組件中使用，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：TypeScript怎么在Vue組件中使用
文章鏈接：http://muchs.cn/article28/ihgijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、品牌網(wǎng)站制作、云服務(wù)器、企業(yè)網(wǎng)站制作、服務(wù)器托管、定制開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容