はじめに

CDS-Typerは、CAPのデータモデルを参照したTypeScript用の型定義ファイル(.ts)を生成するツールです。コーディング時に型を使用したオートコンプリートができるようになります。

使い方は以下のドキュメントに書かれていますが、やってみてつまづいた点があったので、解決方法を含めて記事に残します。

ソースコード：https://github.com/miyasuta/cap-cds-typer

前提

開発環境はSAP Business Application Studio
TypeScriptを使用するため、以下のパッケージをグローバルにインストール

npm i -g typescript ts-node

VS CodeまたはBASの設定で、CDS > Type Generatorが有効になっていることを確認

ステップ

CAPのプロジェクトを作成
.tsconfigファイルを作成
CDS-Typerを追加
.cdsファイルを作成
サービスを実行
イベントハンドラを実装
Cloud Foundryにデプロイ

参考：CDS-Typer | Capire

1. CAPのプロジェクトを作成

以下のコマンドでCAPのプロジェクトを作成します。

cds init <プロジェクト名>

2. tsconfig.jsonファイルを作成

Type Scriptを使用するため、プロジェクトのルートにtsconfig.jsonファイルを作成します。

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "./gen/srv/srv",
        "rootDir": ".",
        "baseUrl": "./",
        "moduleResolution": "node",
        "skipLibCheck": true,
        "preserveConstEnums": true,
        "sourceMap": false,
        "allowJs": true,
        "strict": true,
        "strictNullChecks": false,
        "strictPropertyInitialization": false,
        "esModuleInterop": true,
        "paths": {
            "#cds-models/*": [
                "./@cds-models/*/index.ts"
            ]
        }
    },
    "include": [
        "./srv/**/*"
    ]
}

参考にしたプロジェクトでは"rootDir": "./srv",となっていましたが、CDS-Typerはプロジェクトのルートに型定義ファイルを生成するので、そこも対象に含めるよう"rootDir": ".",とする必要があります。

参考：Integrate Into TypeScript Projects

3. CDS-Typerを追加

以下のコマンドでCDS-Typerを追加します。

cds add typer

これにより、package.jsonに@cap-js/cds-typerが追加されます。

  "devDependencies": {
    "@cap-js/sqlite": "^1",
    "@cap-js/cds-typer": ">=0.1"
  },

npm iコマンドで追加したDependencyをインストールします。

4. .cdsファイルを作成

以下のコマンドで、サンプルのデータモデルを作成します。

cds add sample-tiny

.cdsファイルが作成されると同時に、プロジェクトのルートに@cds-modelsというフォルダができます。

@cds-modelsフォルダの中に、dbフォルダやsrvフォルダで定義したエンティティの型を定義した.tsファイルが作成されています。.cdsファイル側を変更すると、これらのファイルに自動的に反映されます。

@cds-modelsフォルダが自動で生成されない場合は、以下のコマンドを実行します。

npx @cap-js/cds-typer '*' --outputDirectory @cds-models

参考：CDS Typer: @cds-models folder not generated

※2025年3月のリリースで、cds watch実行時に自動的に@cds-modelsフォルダが生成されるようになりました

@cds-modelsフォルダは.gitignoreに追加されるので、この状態ではGitリポジトリに格納されません。リポジトリからクローンしたプロジェクトには含まれていないことに注意が必要です。

データモデルに少し手を加えて、以下のようにします。

db/data-model.cds

namespace my.bookshop;

entity Books {
  key ID : Integer @title: 'Book ID';
  title  : String @title: 'Title';
  stock  : Integer @title: 'Stock';
  price: Integer @title: 'Price'; //追加
}

//追加
entity Orders {
  key ID: UUID @title: 'Order ID';
  book: Association to Books @title: 'Book';
  quantity: Integer @title: 'Quantity';
  amount: Integer @title: 'Amount';
}

srv/cat-service.cds

using my.bookshop as my from '../db/data-model';

service CatalogService {
    @readonly entity Books as projection on my.Books;
    @odata.draft.enabled
    entity Orders as projection on my.Orders;
}

annotate CatalogService.Orders with @(
    UI: {
        LineItem  : [
            {
                $Type : 'UI.DataField',
                Value : ID,
            },
            {
                $Type : 'UI.DataField',
                Value : book_ID,
            },
            {
                $Type : 'UI.DataField',
                Value : quantity,
            },
            {
                $Type : 'UI.DataField',
                Value : amount,
            }
        ],
        HeaderInfo  : {
            $Type : 'UI.HeaderInfoType',
            TypeName : 'Order',
            TypeNamePlural : 'Orders',
        },
        Identification  : [
            {
                $Type : 'UI.DataField',
                Value : book_ID,
            },
            {
                $Type : 'UI.DataField',
                Value : quantity,
            },
            {
                $Type : 'UI.DataField',
                Value : amount,
            }            
        ],
        Facets  : [
            {
                $Type : 'UI.ReferenceFacet',
                Target : '@UI.Identification',
            },
        ],
    }

){
    amount @Common : { FieldControl : #ReadOnly, }
};

5. サービスを実行

以下のコマンドでサービスを実行します。

cds-ts watch

通常、cds watchコマンドを使いますが、TypeScriptの場合はcds-ts watchを使用します。

6. イベントハンドラを実装

TypeScriptでイベントハンドラを実装します。srvフォルダの中にcat-service.tsファイルを作成し、以下のコードを実装します。Order登録時に本の価格をDBから取得し、数量と掛け合わせて金額(amount)を算出します。

import cds from '@sap/cds';

module.exports = class CatalogService extends cds.ApplicationService { async init() {
    const { Book, Books, Order } = await import('#cds-models/CatalogService')

    this.before('CREATE', Order, async(req) => {
        console.log('Create Order called')
        //calculate amount
        const { price } = await SELECT .one (Books, b => {b.price}) .where `ID = ${req.data.book_ID}`
        console.log('price: ', price)
        req.data.amount = req.data.quantity * price
    })

    return super.init()
}}

以下のワーニングが出たら、指示通りにnpm i --save-dev @types/nodeを実行します。その後、一旦ファイルを閉じて開くとエラーが解消します。

ドキュメントでは、require('#cds-models/...')により型定義をインポートしていますが、この方法だとオートコンプリートが利かないのでawait importを使用する必要があります。
参考：Code completion with CDS Typer does not work

これにより、使用可能なプロパティやメソッドが提案されるようになります。

存在しないプロパティを指定した場合はエラーになります。

OrdersのFiori Previewから動作を確認します。

Orderを登録すると、Amountが自動計算されました。

7. Cloud Foundryにデプロイ

TypeScriptで作成したCAPプロジェクトのビルド、デプロイ方法については過去のブログを参考にします。

7.1 ビルド用スクリプトを追加

package.jsonに以下のスクリプトを追加

package.json

  "scripts": {
    ...
    "build:cf": "npm run build:cds && npm run cleanup:ts && npm run build:ts",
    "build:ts": "tsc",
    "build:cds": "cds build --production",
    "cleanup:ts": "npx rimraf gen/srv/srv/*.ts"
  }

※rimrafを使うためnpm i rimraf --save-devでインストールしておく必要があります。

7.2 Cloud Foundry環境で必要な設定を追加

cds add hana --for production
cds add xsuaa --for production
cds add approuter --for production

xs-security.jsonファイルにredirect-urisを追加します。

{
  "scopes": [],
  "attributes": [],
  "role-templates": [],
  "oauth2-configuration": {
    "redirect-uris": [
      "https://*.hana.ondemand.com/login/callback"
    ]
  }
}

これがないと、ApprouterのURLを開いたときに以下のエラーになります。

7.3 mta.yamlを生成

cds add mta

mta.yamlのビルドコマンドを以下のように変更します。

build-parameters:
  before-all:
    - builder: custom
      commands:
        - npm install
        - npm run build:cf

7.4 ビルド

mbt build -t gen --mtar mta.tar

genフォルダを見ると、.jsに変換されたイベントハンドラのファイルができています。

7.5 デプロイ

cf deploy gen/mta.tar

ターミナルに表示されたApprouterのURLから入って確認します。

Application "cds-typer" started and available at "xxx-dev-cds-typer.cfapps.us10-001.hana.ondemand.com"

最初は（index.htmlファイルがないため）Not Foundとなりますが、/odata/v4/catalog/$metadataと入力するとサービスにアクセスできます。

おわりに

この記事では、CDS-Typer使ってTypeScriptを使用したCAPの開発をしました。次回はここにTypeScriptで作るUI5アプリを追加したいと思います。