CapacitorのConfigファイルをTypeScriptにすると型でチェックできて捗る話。

Capacitorをinitすると、Capacitorプロジェクトの設定ファイルは capacitor.config.json が生成されます。

{
  "appId": "com.example.app",
  "appName": "example",
  "bundledWebRuntime": false,
  "webDir": "dist",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  }
}

もちろんJSONファイルでもいいのですが、JSONファイルだとキーのtypoなどがあった時に気づけません。また、ドキュメントをみると、TypeScriptでの設定ファイルがでてくるんですよね。

そこで、上記ファイルをTypeScriptファイルにしてみましょう。 capacitor.config.ts というファイルを作成して、中身を以下の通りにします。

CapacitorConfig は https://github.com/ionic-team/capacitor/blob/main/cli/src/declarations.ts でどんな型かを確認することができます。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'example',
  bundledWebRuntime: false,
  webDir: 'dist',
  plugins: {
    SplashScreen: {
      launchShowDuration: 0,
    },
  },
};

export default config;

次に、 capacitor.config.json を削除します。

設定ファイルをJSONからTypeScriptにするのはこれだけで完了です。次回の npx cap コマンドから、自動的にCapacitor CLIは capacitor.config.ts を読み込むようになります。

簡単ですね。それでは、また。