Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use TypeScript to develop WeChat Mini Programs, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

TypeScript:

TypeScript is another masterpiece of Anders Hejlsberg, the father of C #. I believe that friends who like C # grammar will also love TypeScript.

Let's have a brief talk about TypeScript.

TS is an application-level JavaScript development language.

TS is a superset of JavaScript and can be compiled into pure JavaScript.

TS is cross-browser, cross-operating system, cross-host, open source.

TS begins with JS and ends with JS. Following the syntax and semantics of JavaScript, it is convenient for countless JavaScript developers.

TS can reuse existing JavaScript code and call popular JavaScript libraries.

TS can be compiled into concise, simple JavaScript code that runs on any browser, Node.js, or any ES3-compliant environment.

TypeScript is more efficient than JavaScript in development, including static type checking, symbol-based navigation, statement completion, code refactoring, and so on.

TS provides classes, modules, and interfaces that make it easier to build components.

By the way, although TypeScript only cares about the content before generating JavaScript (meaning that it doesn't care about the running efficiency of the generated JS code), according to my observation and comparison, the JavaScript code generated by TypeScript is at least an order of magnitude higher in quality than the JavaScript code written by most foreground developers!

Another advantage of TypeScript:

TypeScript has smart tips in major IDE and editors!

Say important things three times! There are smart tips for writing TypeScript! There are smart tips for writing TypeScript! There are smart tips for writing TypeScript!

Developing WeChat Mini Programs with TypeScript

After talking about TypeScript for a long time, how on earth do you use TypeScript to develop WeChat Mini Programs?

Very simple, not much different from Wechat's official JavaScript development method, it is still four core files.

App: code the abstract object of the entire application, you can set global methods and variables

Page: page abstract object, which carries page business logic

WXML: the structure of the page, equivalent to html

JSON: configuration fil

WXSS: the style of the page, which is equivalent to css

Since Tencent currently does not have API in Mini Program's TypeScript version, OneCode team has developed a TypeScript version of API type definition file wxAPI.d.ts for all Mini Program JavaScript API released by Tencent.

You only need to reference this file in your program, and if you are developing using Visual Studio, you will have a code hint.

The following is a code example of Demo App developed in TypeScript:

/ / /

App ({onLaunch: function () {/ / call API to get data from the local cache let logs: any = wx.getStorageSync ('logs'); if (! Array.isArray (logs)) {logs = [];} (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 {/ / call login API

Wx.login ({success: () = > {wx.getUserInfo ({success: (res) = > {that.globalData.userInfo = res.userInfo; cb (that.globalData.userInfo);}}) }}), globalData: {userInfo: null}}) Thank you for reading this article carefully. I hope the article "how to develop WeChat Mini Programs with TypeScript" shared by the editor will be helpful to everyone. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.