1. 문제 현상

---

• 유튜브 링크를 입력하여 추가한 재생목록을 하위 컴포넌트로 내려주었고, 재생목록을 클릭하면 해당 링크의 유튜브 페이지로 바로 이동되도록 받아온 url을 Link로 연결해주려고 했는데 에러가 발생했다.

{playlistData?.map((value, index) => {
  return <DetailPlayList list={value} key={index} />;
})}

export interface PlaylistData {
  channelId?: number;
  title?: number;
  thumbnail?: string;
  url?: string;
}

2. 문제 원인

---

• 에러 메시지를 살펴보니 url이 undefined 일 경우에 대해 처리를 해주지 않아 발생했다.

3. 문제 해결

---

• 확정 할당 단언(Definite Assignment Assertions) !을 통해 해결할 수 있었다.

• 확정 할당 단언이란 변수에 값이 무조건 할당되어있다고 컴파일러에게 전달하여 값이 없어도 변수 또는 객체를 사용할 수 있다고 단언하는 것이다.

참고

• Typescript: Type 'string | undefined' is not assignable to type 'string'
• typescript에서 undefined value 처리하기
• React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type