Generic Object that accepts only string key pair values in Typescript

Question

How do I convert this function to Typescript?

interface Attribute {
  src?: string;
  alt?: string;
  href?: string;
  title?: string;
  target?: string;
}

function setAttributes(element: HTMLElement, attributes: Attribute){
  for (const key in attributes) {
    element.setAttribute(key, attributes[key]); // this part fails
  }
}

Here, attributes[key] fails to work. How can I work around this?

I have restructured the function like so:

function setAttributes(element: HTMLElement, attributes: Attribute) {
  for (const [key, value] of Object.entries(attributes as Record<string, string>)) {
    element.setAttribute(key, value);
  }
}

But Typescript throws an error for Object.entries saying

Property 'entries' does not exist on type 'ObjectConstructor'

Answer 1

Usually i just use a keyof type assertion in that case:

function setAttributes(element: HTMLElement, attributes: Attribute) {
  for (const key in attributes) {
    const value = attributes[key as keyof Attribute];

    // still might error, because value could be undefined
    element.setAttribute(key, value);
  }
}

Answer 2

This snippet actually works once I added "ES2017" to the tsconfig 's lib

current working snippet

function setAttributes(element: HTMLElement, attributes: Attribute) {
  for (const [key, value] of Object.entries(attributes as Record<string, string>)) {
    element.setAttribute(key, value);
  }
}