# Native support for TypeScript

Weixin Mini Program The code package requires the code file to be wxml / wxss / js / json / wxs.

If we want to develop Weixin Mini Program using TypeScript or less, we need to compile the ts or less files into a corresponding js or wxss file, a compilation process that previously required developers to configure outside the tool.

Beginning with Developer Tools 1.05.2109101 above, we optimize the tool's built-in compilation modules to support the extension of compilation functionality in the form of compilation plug-ins.

There are two advantages to using this approach:

1. The project only needs to create ts files, no need to generate js files with the same name. Same with less files.
2. The compilation process is controlled by the developer tools, compiling on demand and making the development experience better.

# Start Using

# Old Projects

In the project.config.json file, modify the useCompilerPlugins field under setting to ["typescript"] to open the typescript compiler plug-in built into the tool. To open the less compiler plug-in at the same time, modify the field to ["typescript," "less"]. Three compiler plug-ins are currently supported: typescript, less, and sass

# Newly built projects

You can select the corresponding language template when creating the Weixin Mini Program project. There are currently supported language templates

• TypeScript
• TypeScript + Less
• TypeScript + Sass

# TS statement document update

Starting with developer tools 1.05.2203032 above, if a TS project created from the above-mentioned template encounters an outdated Weixin Mini Program-]] related type declaration, you can update it manually.

The specific steps are in the compiler directory tree, find thetypings / types / wxdirectory, right-click, click "update declaration file" can:

# Functional Dxplaination

• The current logic for converting ts code to js code is handled by the @ babel / plugin-transform-typescript plug-in, so information such as type declarations in ts is simply removed during compilation. Type errors are not prompted during the compilation process and are only prompted in the editor.
• When typescript is enabled, js files are also supported, and ts files with the same name are preferred if there are ts and js files with the same name.
• In addition to normal Weixin Mini Program, Mini Programs plug-in development is also supported.
• Miniprogram-ci, starting with version 1.6.1, also supports this feature.

# Less use of local variables

Starting with Developer Tools 1.06.2403132 above,Support less to directly refer to variables and methods declared inapagelessand the compiler will default to add references to all non-аpagelessfiles

@import (optional, reference) '/app.less';

# Code example:

// app.less
@redcolor: red;

.blue {
  color: blue;
}

// Page.less
.red {
  color: @redcolor; // 直接使用 app.less 中定义的变量
}

Preview the effect in the developer tool

# Sass uses local variables

Starting with Developer Tools 1.06.2403132 above,Sass supports direct references to global variables and methods, and unlike Less, we need to add a newglobal.scssfile to place inapagescssAt the same level, write common variables and methods inglobal.scssand the compiler adds references to all non-global scssfiles by default.

@use '/global.scss';

# Code example:

// global.scss
$red: red;

// Other.scss
.red {
  color: global.$red; // 使用 global 中的变量
}

Preview the effect in the developer tool

Note: Try not to write invariant and method definitions inglobal.scss, otherwise you may increase the size of your code.