注意：此文並不是把vue改為全部替換為ts，而是可以在原來的專案中植入ts文件，目前只是實踐階段，向ts轉化過程中的過渡。
類型檢查、直接編譯到原生js、引入新的語法糖
TypeScript的設計目的應該是解決JavaScript的「痛點」：弱型別和沒有命名空間，導致很難模組化，不適合開發大型程式。另外它也提供了一些文法糖來幫助大家更方便地實踐物件導向的程式設計。
typescript不僅可以約束我們的編碼習慣，還能起到註解的作用，當我們看到一函數後我們立刻就能知道這個函數的用法，需要傳什麼值，傳回值是什麼類型一目了然，對大型專案的維護性有很大的提升。也不至於使開發者搬起石頭砸自己的腳。
Angular: 我們為什麼選擇TypeScript?
TypeScript 裡優秀的工具
TypeScript 是JavaScript 的超集
TypeScript 使得抽象清晰可見
TypeScript 讓程式碼更容易閱讀和理解
是的，我知道這看起來並不直觀。讓我用一個例子來說明我的意思。讓我們來看看這個函數jQuery.ajax()。我們能從它的簽章得到什麼資訊?
我們唯一能確定的是這個函數有兩個參數。我們可以猜測這些類型。也許第一個是字串，第二個是配置物件。但這只是猜測，我們可能錯了。我們不知道什麼選項進入設定物件(它們的名稱和類型)，或該函數傳回什麼。
在不檢查原始程式碼或文件的情況下，我們不可能呼叫這個函數。檢查原始程式碼並不是一個好的選擇——擁有函數和類別的目的，是在不知道如何實現它們的情況下使用它們。換句話說，我們應該依賴他們的接口，而不是他們的實作。我們可以檢查文檔，但這並不是最好的開發經驗——它需要額外的時間，而且文檔經常過期。
因此，儘管很容易閱讀jQuery.ajax(url,settings)，真正理解如何呼叫這個函數，我們需要閱讀它的實作或它的文件。
以下是一個類型版本：
它給了我們更多的資訊。
這個函數的第一個參數是字串。
設定參數是可選的。我們可以看到所有可以傳遞到函數中的選項，不僅是它們的名稱，還包括它們的類型。
函數傳回一個JQueryXHR對象，我們可以看到它的屬性和函數。
類型化簽章肯定比未類型化的簽章長，但是:string，:JQueryAjaxSettings和JQueryXHR並不是混亂的。 它們是提高程式碼的可理解性的重要文件。我們可以更深入地理解程式碼，而不必深入實作或讀取文件中。 我的個人經驗是，我可以更快地閱讀類型化程式碼，因為類型提供了更多的上下文來理解程式碼。
摘自 Angular: 我們為什麼選擇TypeScript?
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的屬性。 需要注意的是，我們傳入的物件參數實際上會包含許多屬性，但是編譯器只會檢查那些必需的屬性是否存在，並且其類型是否符合。
當然還有一些進階的用法，這裡就不做過多的介紹了，了解更多
1、首先安裝ts
npm install --save-dev typescript npm install --save-dev ts-loader
2、在根目錄建tsconfig.json檔
<code>{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": ["dom","es2016"],
"target": "es5"
},
"include": ["./src/**/*"] <br>}</code>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類型，如果類型不符將會拋出例外
##部分程式碼獻上：<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>import querystring from 'query-string';
import querystring from 'query-string'; export const qs = querystring;
import { qs } from './module.js';以上是在vue中使用ts的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
