Matterport SDK および webpack を使った実装を TypeScript で書き直す

若槻龍太

2023.04.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

前回のエントリでは、Node.js（JavaScript）で Matterport SDK を使ってみました。

しかし、この時参考にしたチュートリアルではサンプルコードが TypeScript だったのですが、実行環境の構築手順や型のインポートインポート方法が省かれていたため、その部分の調査を省くため JavaScript で書き直していました。

今回は、前回までの Matterport SDK の JavaScript の実装をちゃんと TypeScript で書いてみたいと思います。

やってみた

webpack の TypeScript 対応

Matterport SDK を利用して 3D Showcase を表示する localhost の起動には webpack を利用していたので、この webpack を TypeScript に対応させつつ引き続き利用してみます。

必要なパッケージをインストールします。ts-loader を使用すると TypeScript 形式のファイルを JavaScript に変換することができます。

			
			
npm install --save-dev typescript ts-loader

webpack.config.jsを更新して、TypeScript に対応させます。

			
			
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './index.ts', // ファイル拡張子を.jsから.tsに変更
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // TypeScriptファイルに対応する正規表現
        use: 'ts-loader', // ts-loaderを使用して、TypeScriptをJavaScriptに変換
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], // モジュール解決時に、.tsと.tsxファイルを探すように設定
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.EnvironmentPlugin({
      SDK_KEY: 'SDK_KEY',
    }),
  ],
};

実装の変更

index.jsをindex.tsに変更して、TypeScript で実装し直します。

			
			
import { setupSdk } from '@matterport/sdk';
import * as MpSdk from '@matterport/sdk'; // MpSdkに@matterport/sdkの型をインポート

const SDK_KEY = process.env.SDK_KEY || '';

const main = async () => {
  const mpSdk = await setupSdk(SDK_KEY);

  class PoseObserver implements MpSdk.IObserver<MpSdk.Camera.Pose> {
    onChanged(pose: MpSdk.Camera.Pose) {
      console.log(JSON.stringify(pose));
      console.log(pose);
    }
  }

  mpSdk.Camera.pose.subscribe(new PoseObserver());
};
main().catch((err) => console.error('Error:', err));

PoseObserver クラスのインターフェイスを MpSdk.IObserver<MpSdk.Camera.Pose> として定義し、また onChanged メソッドの引数の型を MpSdk.Camera.Pose として定義しています。

npm run dev（webpack serve --mode=development）コマンドを実行して、webpack でサーバーを起動します。

すると TypeScript へのトランスパイルが行われ、localhost を起動することができました。