Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順

Typescript の利点については詳しく説明する必要はありません。ご興味があれば、(https://www.typescriptlang.org/) を参照してください。今日は、WeChat ミニプログラム (または他の同様のミニプログラム) の開発で Typescript を使用する方法を紹介します。

これには 2 つの状況があります。最も簡単な方法は、下の図に示すように、プロジェクトを作成するときに Typescript オプションを選択することです。ただし、このオプションは「クラウドサービスを使用しない」を選択した場合にのみ使用でき、他のミニプログラムクラウドベースはサポートされないことに注意してください。まだ開発ツールが追い付いていないのかも知れませんが、将来的にはデフォルトで選択できるようになることを期待します。

それで質問ですが、最初の Mini Program Cloud Base を選択した場合、または以前にプロジェクトがあり、今は Typescript を使用したい場合には、どうすればいいでしょうか?難しいことではありませんので、以下にまとめた手順を参照してください。

ステップ 1: プロジェクトに package.json ファイルがあることを確認し、次の 2 行を追加します。残りは異なっていてもかまいません。ファイルが存在しない場合は、npm init コマンドを使用して生成します。ファイルを変更した後、npm install コマンドを実行してローカル依存関係を生成します。

2番目のステップは、次の内容のtsconfig.jsonファイルをプロジェクトに追加することです。

{

"コンパイラオプション": {

"strictNullChecks": 真、

"noImplicitAny": true、

"モジュール": "CommonJS",

"ターゲット": "ES5",

"allowJs": 偽、

"実験的デコレータ": true,

"noImplicitThis": true、

"noImplicitReturns": true、

"alwaysStrict": 真、

"inlineSourceMap": true、

"inlineSources": true、

"noFallthroughCasesInSwitch": true、

"noUnusedLocals": true、

"未使用パラメータなし": true,

"厳密": 真、

「コメントを削除」: true、

「きれい」：本当、

"strictPropertyInitialization": true、

"ライブラリ": [

「es5」

]、

"typeRoots": [

「./タイピング」

]

},

"含む"： [

「./**/*.ts」

]、

「除外」: [

「ノードモジュール」

]

}

3 番目の手順は、次の圧縮パッケージをダウンロードして解凍し、プロジェクトのルートディレクトリに配置することです。

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

ここでのファイルは、テンセントが公式に提供している型定義ファイルd.tsです。

ステップ4: project.config.jsonファイルを変更し、前処理コマンドを追加する

「スクリプト」: {

"beforeCompile": "npm run tsc",

"beforePreview": "npm run tsc",

「アップロード前」：「npm 実行 tsc」

},

ステップ 5. WeChat 開発者ツールで前処理コマンドが有効になっていることを確認します。

完了です。これで、Typescript を使用して WeChat アプレットを快適に開発できます。直接開発する場合は、VS Code を使用することをお勧めします。「WeChat 開発者ツール」は、コンパイルと公開にのみ使用されます。この開発エクスペリエンスは、非常にスムーズで滑らかです。時間があれば、次の記事でこの内容を共有します。

これで、Typescript を使用して WeChat アプレットを開発する詳細な手順に関するこの記事は終了です。Typescript を使用した WeChat アプレットの開発に関連するその他のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: