Go to Qiita Advent Calendar 2024 Top
LoginSignup
makoxti
@makoxti

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

TypeScriptのエラーが発生「には重複がないため、この条件は常に 'false' を返します。」

Q&A

Closed

TypeScriptReact

解決したいこと

表題の通り、TypeScriptのエラーが出て、解決できません。
画面を表示しようとするとエラーになるので、単に型が間違っているわけでもないと思います。

発生している問題・エラー

(property) replyStatus: number
型 '{ replyStatus: number; }' と 'number' には重複がないため、この条件は常に 'false' を返します。ts(2367)

該当するソースコード

import { NextPage } from "next";
import React, { useEffect, useMemo, useState } from "react";
import tw from "twin.macro";
import AccountCircleIcon from "../../components/icons/AccountCircleIcon";
import { NoticeListType } from "../../types/NoticeList";

const Notice: NextPage = () => {
  const [noticeList, setNoticeList] = useState<NoticeListType[]>();

  useEffect(() => {
    const testNoticeList: NoticeListType[] = [
      { name: "user1", id: 1, notice: "お知らせ1", replyStatus: 0 },
      { name: "user2", id: 2, notice: "お知らせ2", replyStatus: 1 },
    ];
    setNoticeList(testNoticeList);
  }, []);

  // 通知の種類を関数化したい
  const noticeDetail = (replyStatus: number, name: string) => (
    {replyStatus === 0 ? (`{name}さんから返信がありました`) : (`{name}さんからいいねがありました`)}
  )
    
  

  return (
    <>
      {noticeList?.map((notice) => (
        <div
          tw="border-0 border-b border-solid border-color[blue] mt-3 pb-2"
          key={notice.id}
        >
          <div tw="flex items-center ml-2">
            <div tw="w-14">
              <AccountCircleIcon height="50px" />
            </div>
            <div>
              {noticeDetail(notice.replyStatus, notice.name)}
              {/* {notice.replyStatus === 0
                ? `${notice.name}さんから返信がありました`
                : `${notice.name}さんからいいねがありました`} */}
            </div>
          </div>
          <div tw="ml-16">{notice.notice}</div>
        </div>
      ))}
    </>
  );
};

export default Notice;

該当箇所

const noticeDetail = (replyStatus: number, name: string) => (
    {replyStatus === 0 ? (`{name}さんから返信がありました`) : (`{name}さんからいいねがありました`)}
  )

よろしくお願いします。

0

2Answer

github0013@github
@github0013@github
// 多分こうしたいんですよね？
const noticeDetail = (replyStatus: number, name: string) => {
  if(replyStatus === 0){
    return `{name}さんから返信がありました`
  }else{
    return `{name}さんからいいねがありました`
  }
}

// 多少省略するとこうですよね？
const noticeDetail = (replyStatus: number, name: string) => {
  return replyStatus === 0 ? `{name}さんから返信がありました` : `{name}さんからいいねがありました`
}

// 更に省略すると ...
const noticeDetail = (replyStatus: number, name: string) => (replyStatus === 0 ? `{name}さんから返信がありました` : `{name}さんからいいねがありました`)

const noticeDetail = (replyStatus: number, name: string) => (
-  {replyStatus === 0 ? (`{name}さんから返信がありました`) : (`{name}さんからいいねがありました`)}
+ replyStatus === 0 ? (`{name}さんから返信がありました`) : (`{name}さんからいいねがありました`)
)

console.log({replyStatus === 0 ? (`{name}さんから返信がありました`) : (`{name}さんからいいねがありました`)})

// Uncaught SyntaxError: Unexpected token '==='
() => ({replyStatus === 0 ? (`{name}さんから返信がありました`) : (`{name}さんからいいねがありました`)})

prettierを使ってインデントやコード整形を自動化すると意外とこう言う初歩的なエラーは避けられると思います。

2Like

Comments

  1. @makoxti

    Questioner

    ありがとうございます！
    まさしくその通りです！
    やってみたらエラー解消しました、ありがとうございます！
Verclene
@Verclene
const noticeDetail = (replyStatus: number, name: string) => (
    {replyStatus === 0 ? (`{name}さんから返信がありました`) : (`{name}さんからいいねがありました`)}
  )

この文はnoticeDetailが何を返す関数なのか不明瞭です.
Componentにしたいのであれば<>...</>で囲んでやる必要がありますし,単純にstringを返したいのであればブロックや括弧を無駄に作ってはいけません.

あとテンプレートリテラルでの変数展開は${name}のように記述する必要があります.

1Like

Comments

  2. @Verclene

    なんなら()もいらないです.
    以下のような書き方でも通ります.

    => flag ? 'Yes' : 'No'

    上記はflag次第で'Yes'か'No'に解決される式です.
    括弧()はあくまで演算子です.

    一方で中括弧{}は,(JSX外において)解釈によりブロックとオブジェクトリテラルの2通りの意味を持ちます.
    ({...})と書いた場合,オブジェクトリテラルとみなされるため,({replyStatus})はこのオブジェクト内のproperty(への代入)として解釈されます.そのため({replyStatus === 0})は意味が通らない記述になります.

Your answer might help someone💌

LoginSign Up