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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • TypeScript ジェネリックパラメータのデフォルト型と新しい厳密なコンパイルオプション
  • Typescript 3.9 の共通新機能リスト (推奨)
  • JS デコレータ パターンと TypeScript デコレータ
  • TypeScript における型保護の詳細な説明
  • TypescriptでThisを使用する方法の詳細な説明
  • TypeScriptを使用してCLI実装例を素早く開発する
  • 知らない TypeScript の高度な型 (まとめ)
  • 7つの便利なTypeScriptの新機能

<<:  Vue プロジェクトで mock.js を使用するための完全な手順

>>:  WeChatミニプログラムをTencent Mapsに接続する2つの方法

推薦する

SQL 実装 LeetCode (185. 部門内で最も給与の高い上位 3 名)

[LeetCode] 185. 部門別給与上位3位従業員テーブルにはすべての従業員が保持されます。...

JavaScript の差異を利用して比較ツールを実装する

序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...

JS のディープコピーとシャローコピーの詳細

目次1. 浅いコピーとはどういう意味ですか? 2. ディープコピーとはどういう意味ですか? 3. デ...

MySQL の replace と replace into の詳細な例 into_Mysql

MySQL の replace と replace into はどちらも頻繁に使用される関数です。...

Reactは無限ループスクロール情報を実装する

この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...

MySQL 8.0.17 解凍版のインストールと設定方法のグラフィックチュートリアル

インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...

Flex プログラム Firefox で中国語を入力すると文字化けするバグ

Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...

Linux rpm および yum コマンドとその使用法の詳細な説明

RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...

JS は Web ページナビゲーションバーの特殊効果を実現します

この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーション バー効果を紹介...

Linux でのマルチスレッドおよびマルチプロセス クラッシュのシミュレーションに関する簡単な説明

結論:マルチスレッド環境では、スレッドの 1 つがクラッシュすると、他のスレッド (プロセス全体) ...

WeChatアプレットの手動および自動追跡の実装の詳細説明(Taro)

どの企業もユーザーベースを拡大したいのであれば、ユーザーの操作データを収集・分析する必要があり、その...

リモートDockerを使用した統合テスト環境の構築手順

需要背景チームには統合テストが必要であり、そのためには、mysql や rabbitmq などのミド...

共通要素のデフォルトのマージンとパディング値に関する議論

今日は、さまざまなブラウザでのデフォルト要素のマージン値が何であるかという問題について説明しました。...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

Dockerリンクはコンテナの相互接続を実現します

目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...