Typescriptを使用してWeChatミニプログラムでプロジェクトを作成する方法

プロジェクトを作成する

WeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選択します。

改修プロジェクト

package.jsonファイルを編集し、 miniprogram-api-typingsとtypescriptバージョンを変更します。

{
 "名前": "ミニプログラム-TS-クイックスタート",
 "バージョン": "1.0.0",
 "説明"： ""、
 「スクリプト」: {
 "コンパイル": "./node_modules/typescript/bin/tsc",
 "tsc": "ノード ./node_modules/typescript/lib/tsc.js"
 },
 「キーワード」: [],
 "著者"： ""、
 "ライセンス": "",
 「依存関係」: {
 },
 「devDependencies」: {
 "typescript": "^4.1.3",
 "ミニプログラム API タイピング": "^2.12.1-beta.0"
 }
}

tsconfig.jsonファイルを編集し、libを["esnext"]に変更し、最新の構文をサポートし、typeRoots構成項目を削除します。

{
 "コンパイラオプション": {
 "strictNullChecks": 真、
 "noImplicitAny": true、
 "モジュール": "CommonJS",
 "ターゲット": "ES5",
 "allowJs": 偽、
 "実験的デコレータ": true,
 "noImplicitThis": true、
 "noImplicitReturns": true、
 "alwaysStrict": 真、
 "inlineSourceMap": true、
 "inlineSources": true、
 "noFallthroughCasesInSwitch": true、
 "noUnusedLocals": true、
 "未使用パラメータなし": true,
 "厳密": 真、
 「コメントを削除」: true、
 「きれい」：本当、
 "strictPropertyInitialization": true、
 "lib": ["esnext"]
 },
 "含む"： [
 「./**/*.ts」
 ]、
 「除外」: [
 「ノードモジュール」
 ]
}

npm install実行する

プロジェクトの下にあるtypingsディレクトリを削除し、node_modulesの下にあるminiprogram-api-typingsのtypesファイルをプロジェクトのルートディレクトリにコピーします。

ミニプログラムの下にインターフェイスディレクトリを作成し、IAppOption.ts ファイルを作成し、最後に app.ts ファイルを編集します。

// IAppOption.ts
デフォルトインターフェースIAppOptionをエクスポートします。
 グローバルデータ: {
  テキスト: 文字列;
 }
}
// アプリ.ts
「./interface/IAppOption」からIAppOptionをインポートします。

アプリ<IAppOption>({
 グローバルデータ: {
  テキスト: 「こんにちは、Word!」
 },
 起動() {
 }
})

詳細 -> ローカル設定 -> デバッグベースライブラリで、最新の

Promise WeChatミニプログラムAPIの使用

以前は、 miniprogram-api-promiseパッケージを使用してAPI Promise対応にしたり、独自のAPIを記述したりできました。

これで、 lib.wx.api.d.tsでPromisifySuccessResult返す wx.getStorageInfo など、直接使用できるようになりました。

PromisifySuccessResult Promiseを返します

getStorageInfo<TOption は GetStorageInfoOption を拡張します>(
オプション?: TOption
): PromisifySuccessResult<TOption, GetStorageInfoOption>

PromisifySuccessResult<と入力します
P、
 TはAsyncMethodOptionLikeを拡張します
> = P は { 成功: 任意 } を拡張します
 ？ 空所
 : P は { 失敗: 任意 } を拡張します
 ？ 空所
 : P は { 完全: 任意 } を拡張します
 ？ 空所
 : Promise<Parameters<Exclude<T['success'], undefined>>[0]>

2つの用途、ほとんどのAPIがサポート

 wx.getStorageInfo({
 成功: () => {
  console.log('実行に成功しました')
 },
 失敗: () => {
  console.log('実行に失敗しました')
 },
 完了: () => {
  console.log('インターフェース呼び出しが終了しました')
 }
})
wx.getStorageInfo().then(() => {
 console.log('実行に成功しました')
}).catch(() => {
 console.log('実行に失敗しました')
}).finally(() => {
 console.log('インターフェース呼び出しが終了しました')
})

ソースコード: https://github.com/NikolasSky/ts-miniprogram/tree/master/ts-miniprogram-base

これで、Typescript を使用して WeChat アプレットプロジェクトを作成する方法についての記事は終了です。Typescript を使用して WeChat アプレットを開発する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

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