順便說一句，TypeScript雖然只關心生成JavaScript之前的這些內(nèi)容（意味著不關心生成出的JS代碼的運行效率），但是根據(jù)鄙人的觀察和比較，TypeScript所生成的JavaScript代碼比絕大部分的前臺開發(fā)自己寫的JavaScript的代碼質(zhì)量高至少一個數(shù)量級??！

TypeScript另一個優(yōu)點:

TypeScript在各大主流的IDE和編輯器里有智能提示！

重要的事情要說三遍！寫TypeScript有智能提示！寫TypeScript有智能提示！寫TypeScript有智能提示！

用TypeScript開發(fā)微信小程序

扯了半天TypeScript，那么究竟怎么用TypeScript開發(fā)微信小程序呢？

非常簡單，和微信官方的JavaScript開發(fā)方式?jīng)]有太大區(qū)別，依舊是4個核心文件

App：代碼整個應用程序的抽象對象，可以設置全局的方法和變量

Page：頁面抽象對象，承載頁面業(yè)務邏輯

WXML：頁面的結(jié)構，相當于html

JSON：配置文件

WXSS：頁面的樣式，相當于css

由于目前騰訊沒有小程序的TypeScript版本的API，所以OneCode team針對目前騰訊放出的所有的小程序JavaScript API開發(fā)了一個TypeScript版本的API類型定義文件 wxAPI.d.ts

只需要在您的程序中引用該文件，如果是使用Visual Studio來開發(fā)的話，就能有代碼提示了。

下面是用TypeScript開發(fā)的Demo App的代碼示例：

/// <reference path="./wxAPI.d.ts"/>
App({
onLaunch: function() {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
let logs: any = wx.getStorageSync('logs');
if (!Array.isArray(logs)) {
logs = [];
}
(<any[]>logs).unshift(Date.now());
wx.setStorageSync('logs', logs);
},
getUserInfo: function(cb: (param: any) => void) {
let that = this
if (this.globalData.userInfo) {
cb(this.globalData.userInfo)
} else {
//調(diào)用登錄接口
wx.login({
success: () => {
wx.getUserInfo({
success: (res) => {
that.globalData.userInfo = res.userInfo;
cb(that.globalData.userInfo);
}
});
}
});
}
},
globalData: {
userInfo: null
}
});

感興趣的朋友，可以去 https://code.msdn.microsoft.com/How-to-develop-WeChat-1105555e 上面下載完整的代碼樣例以及非常關鍵的微信小程序TypeScript API定義文件！

更多腳本樣例, 訪問微軟One Code樣例庫：http://aka.ms/onescriptsamples 更多代碼樣例, 訪問微軟One Script樣例庫：http://aka.ms/onecodesamples

以上所述是小編給大家介紹的使用TypeScript開發(fā)微信小程序的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章: