제네릭타입과 유니온타입을 같이 사용할 때 질문입니다.

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

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

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

// 아래 createDropdownItem 함수 부분 질문입니다.

function createDropdownItem(item: DropdownItems<string | number>) {
  const option = document.createElement("option");
  option.value = item.value.toString();
  option.innerText = item.value.toString();
  option.selected = item.selected;
  return option;
}

강의에서는 createDropdownItem함수의 매개변수 자리에 item: DropdownItem<string> | DropdownItem<number> 로 작성을 해주셨는데

위 코드처럼 item: DropdownItems<string | number> 으로 작성을 해도 오류가 발생하지 않더라구요.

각 방식이 서로 차이가 있을까요? 만일 차이가 있다면 어떠한 것인지 궁금합니다.