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

這篇文章主要介紹了如何使用TypeScript開發(fā)微信小程序，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

TypeScript簡介：

TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態(tài)類型和基于類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，已工作于TypeScript的開發(fā)。

TypeScript擴展了JavaScript的語法，所以任何現(xiàn)有的JavaScript程序可以不加改變的在TypeScript下工作。TypeScript是為大型應用之開發(fā)而設計，而編譯時它產(chǎn)生 JavaScript 以確保兼容性。

TypeScript 支持為已存在的 JavaScript 庫添加類型信息的頭文件，擴展了它對于流行的庫如 jQuery，MongoDB，Node.js 和 D3.js 的好處。

微信小程序來了！這個號稱干掉傳統(tǒng)app的玩意兒雖然目前處于內(nèi)測階段，不過目前在應用號的官方文檔里已經(jīng)放出了沒有內(nèi)測號也能使用的模擬器了。

工具和文檔可以參考官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1477926804193

TypeScript:

TypeScript是C#之父Anders Hejlsberg的又一力作，相信喜歡C#語法的朋友們對TypeScript一定也會愛不釋手。

簡單的聊一聊TypeScript吧

TS是一個應用程序級的JavaScript開發(fā)語言。

TS是JavaScript的超集，可以編譯成純JavaScript。

TS跨瀏覽器、跨操作系統(tǒng)、跨主機，開源。

TS始于JS，終于JS。遵循JavaScript的語法和語義，方便了無數(shù)的JavaScript開發(fā)者。

TS可以重用現(xiàn)有的JavaScript代碼，調(diào)用流行的JavaScript庫。

TS可以編譯成簡潔、簡單的JavaScript代碼，在任意瀏覽器、Node.js或任何兼容ES3的環(huán)境上運行。

TypeScript比JavaScript更具開發(fā)效率，包括：靜態(tài)類型檢查、基于符號的導航、語句自動完成、代碼重構等。

TS提供了類、模塊和接口，更易于構建組件。

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

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

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

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

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

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

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

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

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

WXML： 頁面的結構，相當于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
}
});

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用TypeScript開發(fā)微信小程序”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!