TypeScriptでJSON.parseに適切なtype(型)が分からない

Question

前提・実現したいこと

TypeScript初心者です。duckduckGoの検索結果を取得する機能を制作中です。サーバーから受け取った検索結果データのJSON含むオブジェクトに適切なtypeを指定したいです。
現状では型エラーが生じています。

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

interfaceでサーバーから受け取ったデータ構造に合わせて型宣言しています。
その型をそれぞれの変数に当てはめていますがうまくいきません。

エラーメッセージ： Argument of type 'duckGoResults[]' is not assignable to parameter of type 'string'
エラー箇所のソースコード: const duckGoDom: duckGoResults[] = JSON.parse(duckGo);

該当のソースコード

**受け取るデータ(response: duckGoData)の中身。 「 JSON.parse typescript 」 の検索結果**
{
 type: "backgroundMsg",
 results: "[
  {"title":"javascript - How to parse JSON string in Typescript - Stack ...","url":"https://stackoverflow.com/questions/38688822/how-to-parse-json-string-in-typescript","snippet":"Typescript is (a superset of) javascript, so you just use J..."},
  {"title":"TypeScriptのリフレクションでJSONの型変換を自動化する - Qiita","url":"https://qiita.com/bitrinjani/items/d60bdac10e5ced126d1a","snippet":"3. JSON.parseの結果をコンストラクタでくくる これだけで、TypeScriptで指定した型に自動的に変換さ..."},
  {"title":"JSON.parse() - JavaScript | MDN","url":"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse","snippet":"JSON.parse() メソッドは文字列を JSON として解析し、文字列によって記述されている JavaScrip..."},
.
.
.
(以下２７行)
 ]",
waitFlag: true,
}

interface duckGoData {
  type: string;
  results: {
    title: string;
    url: string;
    snippet: string;
  }[];
  waitFlag: boolean;
}

//JSON.parse後の変数の型
interface duckGoResults {
    title: string;
    url: string;
    snippet: string;
}[];

const addDom = ( response: duckGoData ) => {
  // 最初にwaitFlag処理
  const duckGo: duckGoResults[] = response.results;
  const duckGoDom: duckGoResults[] = JSON.parse(duckGo); //error該当箇所。

  const responseItem = (result: duckGoResults) => {
    return `
    <div id="dupliChecker" class="ducks">
      <div class="ducks__padding">
        <div class="ducks__title"><a href="${result.url}">${result.title}</a></div>
        <div class="ducks__url"><a href="${result.url}">${decodeURI(result.url)}</a></div>
        <div class="ducks__snippet"><p>${result.snippet}</p></div>
      </div>
    </div>
  `
  }
　// 以下Dom処理コード
}

試したこと

少しずつinterfaceを変えて試して見たりしましたがうまくいきませんでした。検索しても同様の質問は見つけられず。

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

該当箇所のエラーメッセージをVSCodeから切り取りました。

tsconfig.jsonに "strict": true を設定しています。

Comments

[hoshi-takanori]

JSON.parse の引数には文字列を渡す必要がありますが、引数として渡している duckGo の型がその前の行で duckGoResults[] だからですね。addDom を呼び出してるコードによりますが、すでに JSON として parse 済みであれば再度 JSON.parse を呼び出す必要はないはずです。

[moimoi_sushi]

引数を受け取った時点ではparseは済んでおらずJSONです。JSONはstringでなければならない点のご指摘を汲んで、

interface duckGoData {
type: string;
results: string //ここをstringへ変更
waitFlag: boolean;
}

へと修正し、
const duckGo: string = response.results;
へと変更したらエラーが発生しなくなりました。
JSONのstringとparse後のオブジェクト構造を混合してしまっていたことが回答をいただいた判明しました。ありがとうございます。

Answer 1

hoshi-takanoriさんからいただいた「質問への追記・修正の依頼」の内容に応じて

型宣言
interface duckGoData {
type: string;
results: string //ここをstringへ変更
waitFlag: boolean;
}

JOSN.parse()前
const duckGo: string = response.results;

へと変更することで問題解決しました。ありがとうございました。