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

The easiest way to reset mysql root password

My mysql version is MYSQL V5.7.9, please use the ...

Detailed explanation of MySQL basic operations (Part 2)

Preface This article contains 1. Several major co...

A detailed tutorial on using Docker to build a complete development environment

Introduction to DNMP DNMP (Docker + Nginx + MySQL...

6 interesting tips for setting CSS background images

Background-image is probably one of those CSS pro...

How to install and deploy ftp image server in linux

Refer to the tutorial on setting up FTP server in...

npm Taobao mirror modification explanation

1. Top-level usage 1. Install cnpm npm i -g cnpm ...

Best Practices for Sharing React Code

When any project develops to a certain complexity...

Detailed explanation of triangle drawing and clever application examples in CSS

lead Some common triangles on web pages can be dr...

36 principles of MySQL database development (summary)

Preface These principles are summarized from actu...

How to modify iTunes backup path under Windows

0. Preparation: • Close iTunes • Kill the service...

Detailed explanation of Vue-Jest automated testing basic configuration

Table of contents Install Configuration Common Mi...

How to Completely Clean Your Docker Data

Table of contents Prune regularly Mirror Eviction...