功能中的打字稿泛型类型错误

Question

I put the string type in the generic, but it seems that the value doesn't recognize it as a string Anyone please help me to resolve the error in the code

thanks!

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

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

function createDropdownItem<T>(item: DropDownItem<T>): HTMLOptionElement {
  const option = document.createElement('option');
  option.value = item.value.toString(); // Error: Type'T' does not have property'toString' ts(2339)
  option.innerText = item.value.toString(); // Error: Type'T' does not have property'toString' ts(2339)
  option.selected = item.selected;
  return option;
}

emails.forEach(function (email) {
  const item = createDropdownItem<string>(email);
  const selectTag = document.querySelector('#email-dropdown');
  selectTag?.appendChild(item);
});

Answer 1

Take a look at https://devblogs.microsoft.com/typescript/announcing-typescript-3-5/#generic-type-parameters-are-implicitly-constrained-to-unknown

methods on Object like toString, toLocaleString, valueOf, hasOwnProperty, isPrototypeOf, and propertyIsEnumerable will no longer be available.

you can add an explicit constraint of {} to a type parameter to get the old behavior.

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