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

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

TypeScript:

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

簡(jiǎn)單的聊一聊TypeScript吧

• TS是一個(gè)應(yīng)用程序級(jí)的JavaScript開發(fā)語言。

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

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

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

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

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

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

• TS提供了類、模塊和接口，更易于構(gòu)建組件。

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

TypeScript另一個(gè)優(yōu)點(diǎn):

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

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

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

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

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

• App：     代碼整個(gè)應(yīng)用程序的抽象對(duì)象，可以設(shè)置全局的方法和變量

• Page：    頁面抽象對(duì)象，承載頁面業(yè)務(wù)邏輯

• WXML：  頁面的結(jié)構(gòu)，相當(dāng)于html 

• JSON：   配置文件

• WXSS：  頁面的樣式，相當(dāng)于css

由于目前騰訊沒有小程序的TypeScript版本的API，所以O(shè)neCode team針對(duì)目前騰訊放出的所有的小程序JavaScript API開發(fā)了一個(gè)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    } });

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