TypeScriptサポート

Klleon SDKはUMDバンドルで提供されるため、TypeScriptプロジェクトで使用するには型定義ファイルを追加する必要があります。

型定義ファイル

プロジェクトルートに KlleonSDK.d.ts ファイルを作成します。

/** SDK接続状態 */
type SDKStatus =
  | "IDLE"
  | "CONNECTING"
  | "CONNECTING_FAILED"
  | "SOCKET_CONNECTED"
  | "SOCKET_FAILED"
  | "STREAMING_CONNECTED"
  | "STREAMING_FAILED"
  | "CONNECTED_FINISH";

type LogLevel = "debug" | "info" | "warn" | "error" | "silent";
type LanguageCode = "ko_kr" | "en_us" | "ja_jp" | "id_id";

/** init() オプション */
interface InitOption {
  sdk_key: string;
  avatar_id: string;
  log_level?: LogLevel;
  language?: LanguageCode;
  enable_microphone?: boolean;
  auto_send?: boolean;
  stt_only?: boolean;
}

/** onSignal コールバックパラメータ */
interface IncomingSignalData {
  signal: string;
  payload?: Record<string, unknown>;
  id: string;
  type: "SESSION" | "INPUT" | "OUTPUT";
}

/** onError コールバックパラメータ */
interface ErrorData {
  code: string;
  message?: string;
}

/** SDK インターフェース */
interface KlleonSDK {
  // ライフサイクル
  init: (option: InitOption) => Promise<void>;
  destroy: () => Promise<void>;
  // イベント
  onSignal: (cb: (data: IncomingSignalData) => void) => void;
  onStatus: (cb: (status: SDKStatus) => void) => void;
  onError: (cb: (error: ErrorData) => void) => void;

  // テキスト
  sendMessage: (text: string) => void;
  speak: (text: string) => void;

  // オーディオエコー
  sendSpeakAudio: (audio: string) => void;
  endSpeakAudio: () => void;

  // 音声
  startListening: () => void;
  endListening: () => void;
  cancelListening: () => void;

  // アバター制御
  stopSpeaking: () => void;

  // メディア
  setVolume: (volume: number) => void;

  // 状態照会
  getStatus: () => SDKStatus;
  clearMessages: () => void;
}

declare global {
  interface Window {
    KlleonSDK: KlleonSDK;
  }

  // ReactでWeb Component使用時の型エラー防止
  namespace JSX {
    interface IntrinsicElements {
      "avatar-container": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          volume?: number;
          fit?: "cover" | "contain" | "fill";
        },
        HTMLElement
      >;
      "chat-container": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          type?: "text" | "voice";
          delay?: number;
          isShowCount?: boolean;
          scrollbar?: boolean;
        },
        HTMLElement
      >;
    }
  }
}

export {};

tsconfig.json 設定

型定義ファイルをTypeScriptが認識できるよう、include に追加します。

{
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src", "KlleonSDK.d.ts"]
}

使用例

型定義を追加すると、window.KlleonSDK に対する自動補完と型検査が動作します。

const SDK = window.KlleonSDK;

SDK.onStatus((status) => console.log(status));
SDK.onSignal((data) => console.log(data.signal, data.payload));

SDK.init({
  sdk_key: 'YOUR_SDK_KEY',
  avatar_id: 'YOUR_AVATAR_ID',
}).catch((e) => console.error(e.message));