既存のAI MarketerプロジェクトにTypeScriptサポートを追加する

既存プロジェクトにTypeScriptサポートを追加するには、2つのtsconfig.jsonファイルを追加し、管理パネルを再構築する必要があります。また、eslintrcおよびeslintignoreファイルをオプションで削除することもできます。

既存のJavaScriptプロジェクトに段階的にTypeScriptファイルを追加するためには、ルートのtsconfig.jsonファイルでTypeScriptフラグのallowJsをtrueに設定する必要があります。allowJsフラグを使用すると、.tsおよび.tsxファイルがJavaScriptファイルと共存できます。

次の手順で既存のAI MarketerプロジェクトにTypeScriptサポートを追加できます。

1. プロジェクトのルートにtsconfig.jsonファイルを追加し、以下のコードをallowJsフラグと共にコピーします。

   ./tsconfig.json

   
   {
     "extends": "@AI Marketer/typescript-utils/tsconfigs/server",
     "compilerOptions": {
       "outDir": "dist",
       "rootDir": ".",
       "allowJs": true // .tsファイルなしでビルドを有効にする
     },
     "include": [
       "./",
       "src/**/*.json"
     ],
     "exclude": [
       "node_modules/",
       "build/",
       "dist/",
       ".cache/",
       ".tmp/",
       "src/admin/",
       "**/*.test.ts",
       "src/plugins/**"
     ]
   }

2. ./src/admin/ディレクトリにtsconfig.jsonファイルを追加し、以下のコードをコピーします。

   ./src/admin/tsconfig.json

   
   {
     "extends": "@AI Marketer/typescript-utils/tsconfigs/admin",
     "include": [
       "../plugins/**/admin/src/**/*",
       "./"
     ],
     "exclude": [
       "node_modules/",
       "build/",
       "dist/",
       "**/*.test.ts"
     ]
   }

3. (任意) プロジェクトルートから.eslintrcおよび.eslintignoreファイルを削除します。

4. database.ts設定ファイルのfilenameプロパティに追加の'..'を追加します（SQLiteデータベースの場合にのみ必要です）。

   ./config/database.ts

   
   const path = require('path');
   
   module.exports = ({ env }) => ({
     connection: {
       client: 'sqlite',
       connection: {
         filename: path.join(
           __dirname,
           "..",
           "..",
           env("DATABASE_FILENAME", ".tmp/data.db")
         ),
       },
       useNullAsDefault: true,
     },
   });

5. 管理パネルを再構築し、開発サーバーを開始します。

   Yarn

   yarn build
   yarn develop

   NPM

   npm run build
   npm run develop

プロジェクトルートにdistディレクトリが追加され、プロジェクトは新しいTypeScript対応のAI Marketerプロジェクトと同じTypeScript機能にアクセスできるようになります。