Detailed steps for developing WeChat mini-programs using Typescript

We don't need to elaborate too much on the advantages of Typescript. If you are interested, you can refer to (https://www.typescriptlang.org/). Today I will share with you how to use Typescript in the development of WeChat mini-programs (or other similar mini-programs).

There are two situations for this. The simplest way is to select the Typescript option when creating a project, as shown in the figure below. But please note that this option is only available when you select "Use no cloud service", and the other Mini Program Cloud Base is not supported. This may be because the development tools have not caught up yet. I hope it can be selected by default in the future.

So the question is, what should I do if I choose the first Mini Program Cloud Base, or if I have a project before and now want to use Typescript? It’s not difficult, please refer to the steps I summarized below.

Step 1: Make sure your project has a package.json file and add the following two lines. The rest can be different. If the file does not exist, generate it using the npm init command. After modifying the file, run the npm install command to generate local dependencies.

The second step is to add a tsconfig.json file to your project with the following content

{

"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": [

"es5"

],

"typeRoots": [

"./typings"

]

},

"include": [

"./**/*.ts"

],

"exclude": [

"node_modules"

]

}

The third step is to download the following compressed package, decompress it, and put it in the root directory of the project.

http://xiazai.jb51.net/202101/yuanma/typings_jb51.rar

The file here is the type definition file d.ts officially provided by Tencent

Step 4: Modify the project.config.json file and add preprocessing commands

"scripts": {

"beforeCompile": "npm run tsc",

"beforePreview": "npm run tsc",

"beforeUpload": "npm run tsc"

}, 

Step 5. Make sure the preprocessing command is enabled in the WeChat Developer Tools.

Done. Now you can happily use Typescript to develop WeChat applets. I also recommend using VS Code for direct development. The "WeChat Developer Tools" is only used for compilation and publishing. This development experience is really smooth and silky smooth. I will share this content in the next article when I have time.

This concludes this article on the detailed steps of using Typescript to develop WeChat applets. For more content related to developing WeChat applets with Typescript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!