jsonファイルを書き出す際に文字列置換をしようとするとタイプエラーになるのはなぜ？？

Question

前提

TypeScriptでRSS記事を集めJSONファイルを書き出すプログラムを書いています。
プログラム内でJSONデータ内にある余計な文字を削除しようと思い、replaceで置換しようと考えましたが
なぜか”型がない”とlintエラーが発生してしまい、動作しません。命令文に型って必要なんですか？

型の理解が浅く、TypeScriptはエラーだらけで苦手です。

実現したいこと

JSONデータ内の余分な文字を削除したい

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

該当のソースコード

import fs from "fs-extra";
import Parser from "rss-parser";
import { blogUrl } from "../blogUrl";
import { PostItem, Member } from "../types";

type FeedItem = {
  title: string;
  link: string;
  contentSnippet?: string;
  isoDate?: string;
  dateMiliSeconds: number;
};

function isValidUrl(str: string): boolean {
  try {
    const { protocol } = new URL(str);
    return protocol === "http:" || protocol === "https:";
  } catch {
    return false;
  }
}

const parser = new Parser();
let allPostItems: PostItem[] = [];

async function fetchFeedItems(url: string) {
  const feed = await parser.parseURL(url);

  if (!feed?.items?.length) return [];

  // return item which has title and link
  return feed.items
    .map(({ title, contentSnippet, link, isoDate, content }) => {
      return {
        title,
        contentSnippet: contentSnippet?.replace(/\n/g, ""),
        link,
        isoDate,
        content: content?.match(/<img[^>]+>/i),
        dateMiliSeconds: isoDate ? new Date(isoDate).getTime() : 0,
      };
    })
    .filter(({ title, link }) => title && link) as FeedItem[];
}

async function getFeedItemsFromSources(sources: undefined | string[]) {
  if (!sources?.length) return [];
  let feedItems: FeedItem[] = [];
  for (const url of sources) {
    const items = await fetchFeedItems(url);
    if (items) feedItems = [...feedItems, ...items];
  }
  return feedItems;
}

async function getMemberFeedItems(member: Member): Promise<PostItem[]> {
  const { sources } = member;
  const feedItems = await getFeedItemsFromSources(sources);
  if (!feedItems) return [];

  let postItems = feedItems.map((item) => {
    return {
      ...item,
    };
  });

  return postItems;
}

(async function () {
  for (const member of blogUrl) {
    const items = await getMemberFeedItems(member);
    if (items) allPostItems = [...allPostItems, ...items];
  }
  allPostItems.sort((a, b) => b.dateMiliSeconds - a.dateMiliSeconds);
　// 該当の箇所
  allPostItems.replace(/\s+/g, "");
  fs.ensureDirSync(".contents");
  fs.writeJsonSync(".contents/posts.json", allPostItems);
})();

念のため型ファイルも載せます

export type Member = {
  role?: string;
  bio?: string;
  sources?: string[];
  websiteUrl?: string;
};

export type PostItem = {
  title: string;
  link: string;
  contentSnippet?: string;
  isoDate?: string;
  dateMiliSeconds: number;
  content?: string;
  itemData?: string;
  item?: string;
  replace?: string;
};

試したこと

types.tsに型を記載してみた。（ダメでした）

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

{
  "name": "verceltest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:posts": "ts-node --project tsconfig.builder.json ./builder/posts.ts",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "fs-extra": "^10.1.0",
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "rss-parser": "^3.12.0",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
    "@types/fs-extra": "^9.0.13",
    "@types/node": "18.11.7",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0",
    "typescript": "4.8.4"
  }
}

Comments

[hoshi-takanori]

allPostItems は PostItem の配列なので、単純な文字列置換はできず、例えば各要素の title や content などを置換する必要があるのでは…。

[snafkin999]

確かにtitleのところでreplace使ってました。
ありがとうございます！

Answer 1

自己解決されたようですので、以下、余談として回答します。

質問に

なぜか”型がない”とlintエラーが発生してしまい、動作しません。

とありますが、発生しているエラーは lintエラーではなく typescriptの型チェックによるエラーです。エラーメッセージの後に ts(2339) とありますが、これの ts の部分で typescriptのエラーであることが分かります。2339 はエラー番号で、ある型にないプロパティを指定した場合にこの番号のエラーが発生します。今回の場合、allPostItems は配列ですが、配列にない replace プロパティをメソッドとして使おうとしてこの 2339番エラーが発生しています。

型の理解が浅く、TypeScriptはエラーだらけで苦手です。

分かります。理解が浅いうちは Javascript の自由度が失われている気さえするかもしれませんね。しかし今回のコードの問題箇所はTypescriptではなくJavascriptだと動かして始めてエラーになって気がつくものです。それを動かす前に知ることができるのは、特にチーム開発で、自分の書いたコードで他のメンバーが動かしてみたら(typescriptなら型エラーになっていたであろう部分で）実行時にエラーになって迷惑がかかる可能性が少なくなるという点でだいぶ気が楽です。

Javascript は自由に書けて良かったけど

TypeScriptはエラーだらけで苦手

という場合は、一度は「 プログラミングTypeScript ―スケールするJavaScriptアプリ」のような本を読んで写経するといいかもしれません。そのうち Typescript に慣れていくと、今度は Javascript でちょっと込み入った何かを書こうとすると、型チェックをしてくれていないのがかなり心もとない気がしてくると思います。

Answer 2

理由はよくわかりませんが、contentに対するreplaceだと動きました