[Type Script] 추론을 통해서 undefined를 없애고 싶어요.

TypeScript를 사용하기 시작한 것은 좋았지만, TypeScript가 주는 은혜를 누리지 못했다는 것은 부인할 수 없다.
그래서 이번에는 타입 스크립트가 저를 더 잘 알 수 있도록 타입 스크립트가 저를 좋아하도록 러브레터를 쓰도록 노력하겠습니다.
러브레터 공개를 처음 시도한 것(워낙 러브레터를 쓰지 않은 것)도 좋은 경험이라고 생각한다.
그럼 바로 본론으로 들어가겠습니다.

템플릿 A에 템플릿 undefined를 적용할 수 없습니다...><

이번에는 넥스트.js의 개발 도중 응용 프로그램의 코드를 사용한 해설입니다.
result.tsx

//tsxの内容

return (
    <div>
      {isLoading ? (
        <div>読み込み中</div>
      ) : (
        <Image src={srcData?.src} width={1200} height={630} alt={chara_name} />
      )}
    </div>
  )

위의 srcData?src 부분에서
유형 "string | undefined"는 유형 "string | Static Import"에 할당할 수 없습니다.
유형 "undefined"는 유형 "string | Static Import"에 할당할 수 없습니다.
이렇게 혼났어요.
다음 코드는 상기 코드에 약간 적힌 데이터를 처리하는 부분입니다.
result.tsx

import exampleImg from "asset/images/resultImgs/exampleImg.png"

const Result = ({ chara_name }: PageProps) => {
  //chara_nameはgetServerSidePropsでサーバー側で受け取った値をpropsとして渡しています
  const [srcData, setSrcData] = useState<StaticImageData | undefined>(undefined)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    switch (chara_name) {
      case 'example_chara':
        setSrcData(exampleImg)
        break
      case 'none':
        alert('データの取得に失敗しました。最初からやり直してください')
    }
    if (srcData) {
      setIsLoading(false)
    }
  }, [srcData, chara_name])
}

원래 상태에 따라 상태 조합의 수량만 생성됩니다.
여기까지'모르겠다'고 한 분들은 다음 기사가'표시와 상태가 한 세트'라는 이해에 도움이 될 것 같으니 읽어주세요.
구성 요소 및 상태는 그룹입니다.
이번에는 useState로 srcData와 isLoading 두 가지 상태를 처리합니다.따라서 모든 상태의 패턴을 고려하면 4가지 패턴이 있다.

srcData:undefined,isLoading:진짜

srcData:undefined,isLoading:가짜상황(※)

srcData:StaticImageData,isLoading:진짜

srcData:StaticImageData,isLoading:가짜 상황

상기 두 가지 가능성을 허락한 것은 이번 나의 실태였다.
이 문제는 타입 스크립트 유형 정의로 잘 해결될 것 같습니다.
여기 기사가 최고예요.
Type Script way로 React 쓰기

형 우선 전술 격퇴형 "undefined를 형 A에 적용할 수 없습니다...><"

"Type Scriptway가 React를 쓴다"는 기사에 따르면 유형 정의에 따라 컨디션을 잘 줄일 수 있습니다!이런 내용이 적혀 있다.
이를 바탕으로 형식 정의를 새롭게 수정해 쓴 것이 바로 이것이다.
result.tsx

type ImgStateType = {
  State:
    | {
        srcData: StaticImageData
        isLoading: false
      }
    | { srcData: undefined; isLoading: true }
}

아까까지 srcData와 isLoading의 상태를 4가지 유형으로 설정하여 크게 2가지로 나누는 데 성공했다.
이에 따라 isLoading이 가짜인 경우 "srcData의 유형은 StatiicImageData 유형뿐입니다! 이렇게 정의되었기 때문입니다!"이렇게 하면 타입 스크립트 쪽에서 이해할 수 있다.
이렇게 해서 나는 마침내 타입 스크립트에 보내는 러브레터를 받았다.기쁘고 축하할 만하다.
result.tsx

const Result = ({ chara_name }: PageProps) => {
	 const [srcStateData, setSrcData] = useState<ImgStateType>({
    State: { srcData: undefined, isLoading: true },
  })

useEffect(() => {
  switch (chara_name) {
    case 'example_chara':
      setSrcData({ State: { isLoading: false, srcData: exampleImg } })//ここで一気に二つの状態を指定できてしまう！
      break
    case 'none':
      alert('データの取得に失敗しました。最初からやり直してください')
      return
 }
  if(srcStateData.State.srcData){
//このif文も必要なくなりました
 }
}, [srcStateData.State.srcData])


return {
  <div>
   {srcStateData.State.isLoading ? (
    <div>
     読み込み中
    </div>
     ):(
<Image src={srcStateData.State.srcData.src} width={1200} height={630} alt={chara_name}/>
//「?」が消えました！
   )}
  </div>
  }

최후

이번 일로 타입 스크립트를 더 좋아하게 됐어요.
제가 초보라서 타입 스크립트를 배우면 추천해드립니다!만약 교수님을 받게 된다면 대단히 영광스럽습니다.