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つの方法

推薦する

MYSQL マスタースレーブ レプリケーションの知識ポイントの概要

単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...

nginx の default_server 定義とマッチングルールの詳細な説明

nginx の default_server ディレクティブは、server_name と一致しない...

Linux でのマルチスレッドにおけるフォークの紹介

目次質問:ケース(1)子スレッドを作成する前にフォークするケース(2)子スレッドを作成した後にフォー...

MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用

時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...

MySQL のデッドロック チェックとデッドロック除去の例の詳細な説明

1. クエリプロセスプロセスリストを表示2. 対応するプロセスを照会し、IDを強制終了します。検証(...

VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィック チュートリアル)

1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...

MySQL で重複行を見つけて削除する方法

目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...

vue3.2 で追加された defineCustomElement の基本原理の詳細な説明

目次Webコンポーネントカスタム要素概要HTMLTemplateElement コンテンツ テンプレ...

ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...

フィルターを使用して画像に透明な CSS を書く方法

フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...

CSS を使用して適応型の幅と高さを持つ 16:9 の長方形を実装する例

先ほど、適応幅と高さが1:1の正方形を作成する方法について説明しました。 https://www.j...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

Linux ps および pstree コマンドの知識ポイントのまとめ

Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...