TypescriptでのLiff-mockの型定義について

Question

実現したいこと

当方初学者でエンジニアではありません。(勉強中ですので勉学に関してのアドバイスもあれば幸いです。)

typescriptとreactを使用しliffアプリを作成中、liff-mockを使用したい。

前提

Typescriptでliff-mockを使用したいが、liff.initに渡すmockが型定義エラーで進めません。

ルートディレクトリにtypeフォルダを作成し、liff.d.tsファイルで

import { ExtendedInit,LiffMockApi } from '@line/liff-mock';

declare module '@line/liff' {
  interface Liff {
    init: ExtendedInit;
    $mock: LiffMockApi;
  }
}

を定義しておりますが、直りません。

発生している問題・エラーメッセージ

型 '{ liffId: string; mock: boolean; }' の引数を型 'Config' のパラメーターに割り当てることはできません。
  オブジェクト リテラルは既知のプロパティのみ指定できます。'mock' は型 'Config' に存在しません。

該当のソースコード

liff
  .init({liffId: liffId, mock: mock})
  .then(async () => {

  //略

試したこと

どうしたらよいかわからず困っております。

補足情報（FW/ツールのバージョンなど）

環境はGitPodを使用中です。(諸事情によりローカルのVSCodeはダウンロードできません)

"dependencies": {
"@line/liff": "^2.22.1",
"@line/liff-mock": "^1.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.0",
"react-router-dom": "^6.13.0"
},
"devDependencies": {
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.59.0",
"@typescript-eslint/parser": "^5.59.0",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2",
"vite": "^4.3.9"
}

初学者につき、学んでる順番などがおかしいと思いますがその点はご了承ください。

Answer 1

この回答はGPT-4による自動生成回答です

型定義エラーを解決するために、liff.d.ts ファイルを以下のように修正してみてください。

import { ExtendedInit, LiffMockApi } from '@line/liff-mock';

declare module '@line/liff' {
  interface Config {
    mock?: boolean;
  }

  interface Liff {
    init: ExtendedInit;
    $mock: LiffMockApi;
  }
}

これにより、Config インターフェースに mock プロパティが追加され、型定義エラーが解決されるはずです。