유니온 제거 질문

interface Dropdown<T> {
  value: T;
  selected: boolean;
}

const emails: Dropdown<string>[]= [
  { value: 'naver.com', selected: true },
  { value: 'gmail.com', selected: false },
  { value: 'hanmail.net', selected: false },
];

const numberOfProducts: Dropdown<number>[] = [
  { value: 1, selected: true },
  { value: 2, selected: false },
  { value: 3, selected: false },
];

function createDropdownItem<T>(item: Dropdown<T>) {
  const option = document.createElement('option');
  if (item.value) {
    option.value = item.value.toString();
    option.innerText = item.value.toString();
  }
  option.selected = item.selected;
  return option;
}

// NOTE: 이메일 드롭 다운 아이템 추가
emails.forEach(function (email) {
  const item = createDropdownItem<string>(email);
  const selectTag = document.querySelector('#email-dropdown');
  selectTag?.appendChild(item);
});

안녕하세요! 유니온 제게어 대해서 질문드립니다! 제가 유니온을 제거해 보려고 했는데 createDropdownItem() 함수에서 if 문을 쓰기 전에는 " 'T' 형식에 'toString' 속성이 없습니다 "라고 에러가 떴었는데 if 문을 추가하니 에러 표시가 사라졌습니다. 이렇게 코드를 작성해도 되는 걸까요? 아니면 if 문보다는 이후 강의에서 알려주신 extends로 제네릭을 제한하는 게 더 좋을까요?