How to create a project with WeChat Mini Program using typescript

How to create a project with WeChat Mini Program using typescript

Create a project

Create a project in WeChat Developer Tools and select TypeScript in the language

Renovation Project

Edit the package.json file and modify miniprogram-api-typings and typescript versions

{
 "name": "miniprogram-ts-quickstart",
 "version": "1.0.0",
 "description": "",
 "scripts": {
 "compile": "./node_modules/typescript/bin/tsc",
 "tsc": "node ./node_modules/typescript/lib/tsc.js"
 },
 "keywords": [],
 "author": "",
 "license": "",
 "dependencies": {
 },
 "devDependencies": {
 "typescript": "^4.1.3",
 "miniprogram-api-typings": "^2.12.1-beta.0"
 }
}

Edit the tsconfig.json file, change lib to ["esnext"], support the latest syntax, and delete the typeRoots configuration item

{
 "compilerOptions": {
 "strictNullChecks": true,
 "noImplicitAny": true,
 "module": "CommonJS",
 "target": "ES5",
 "allowJs": false,
 "experimentalDecorators": true,
 "noImplicitThis": true,
 "noImplicitReturns": true,
 "alwaysStrict": true,
 "inlineSourceMap": true,
 "inlineSources": true,
 "noFallthroughCasesInSwitch": true,
 "noUnusedLocals": true,
 "noUnusedParameters": true,
 "strict": true,
 "removeComments": true,
 "pretty": true,
 "strictPropertyInitialization": true,
 "lib": ["esnext"]
 },
 "include": [
 "./**/*.ts"
 ],
 "exclude": [
 "node_modules"
 ]
}

Execute npm install

Delete the typings directory under the project, and copy the types file of miniprogram-api-typings under node_modules to the project root directory

Create an interface directory under miniprogram and create an IAppOption.ts file, and finally edit the app.ts file.

// IAppOption.ts
export default interface IAppOption {
 globalData: {
  text: string;
 }
}
// app.ts
import IAppOption from "./interface/IAppOption";

App<IAppOption>({
 globalData: {
  text: "Hello, Word!"
 },
 onLaunch() {
 }
})

In Details -> Local Settings -> Debug Base Library, directly select the latest

Using Promise WeChat Mini Program API

Previously, you could use miniprogram-api-promise package to make your API Promise-friendly, or write your own

Now you can use it directly, such as wx.getStorageInfo, which returns PromisifySuccessResult in lib.wx.api.d.ts

PromisifySuccessResult returns a Promise

getStorageInfo<TOption extends GetStorageInfoOption>(
option?: TOption
): PromisifySuccessResult<TOption, GetStorageInfoOption>

type PromisifySuccessResult<
P,
 T extends AsyncMethodOptionLike
> = P extends { success: any }
 ? void
 : P extends { fail: any }
 ? void
 : P extends { complete: any }
 ? void
 : Promise<Parameters<Exclude<T['success'], undefined>>[0]>

Two usages, most APIs support

 wx.getStorageInfo({
 success: () => {
  console.log('Successful execution')
 },
 fail: () => {
  console.log('Failed to execute')
 },
 complete: () => {
  console.log('Interface call ends')
 }
})
wx.getStorageInfo().then(() => {
 console.log('Successful execution')
}).catch(() => {
 console.log('Failed to execute')
}).finally(() => {
 console.log('Interface call ends')
})

Source code: https://github.com/NikolasSky/ts-miniprogram/tree/master/ts-miniprogram-base

This is the end of this article about how to create a WeChat applet project using typescript. For more information about developing WeChat applet with typescript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • In-depth understanding of Typescript generic concepts in the front end
  • Detailed explanation of JavaScript private class fields and TypeScript private modifiers
  • JS Decorator Pattern and TypeScript Decorators
  • Detailed explanation of type protection in TypeScript
  • Summary of the use of TypeScript in React projects
  • Vue3+TypeScript encapsulates axios and implements request calls
  • TypeScript installation and use and basic data types
  • Detailed explanation of how to use This in Typescript
  • TypeScript generic parameter default types and new strict compilation option

<<:  A brief discussion on whether MySQL can have a function similar to Oracle's nvl

>>:  How to set up PostgreSQL startup on Ubuntu 16.04

Recommend

View the dependent libraries of so or executable programs under linux

View the dependent libraries of so or executable ...

How to change the root password in a container using Docker

1. Use the following command to set the ssh passw...

MySQL 5.7.18 installation tutorial and problem summary

MySQL 5.7.18 installation and problem summary. I ...

A brief discussion on the execution details of Mysql multi-table join query

First, build the case demonstration table for thi...

A brief analysis of SQL examples for finding uncommitted transactions in MySQL

A long time ago, I summarized a blog post titled ...

MySQL 8.0.12 installation and configuration method graphic tutorial

Record the installation and configuration method ...

The process of building and configuring the Git environment in Docker

Configure Git environment in Docker At work, I en...

Detailed steps to install the specified version of docker (1.12.6) using rpm

1. Reasons If the system is Centos7.3, the Docker...

MySQL fuzzy query statement collection

SQL fuzzy query statement The general fuzzy state...

vue.js Router nested routes

Preface: Sometimes in a route, the main part is t...

Nginx try_files directive usage examples

Nginx's configuration syntax is flexible and ...

Limit input type (multiple methods)

1. Only Chinese characters can be input and pasted...