Template Literal Types as key types get lost when implementing Interface

[RS-Sautter]

Bug Report

🔎 Search Terms

template literal key remapping interface inheritance

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about template literal types.

⏯ Playground Link

Playground link with relevant code

💻 Code

type OnString = `on${string}`;

type EventMapping = {
  [key: OnString]: string
}

const map: EventMapping = {
  onClick: 'click'  // ok
}

interface ProvidesEventMapping {
  eventMap: EventMapping
}

class MyComp implements ProvidesEventMapping {
  eventMap = {
    click: 'click'  // this should fail, but doesn't!
  }
}

🙁 Actual behavior

no TS error when defining key click.

🙂 Expected behavior

Error:

Type '{ click: string; }' is not assignable to type 'EventMapping'.
Object literal may only specify known properties, and 'click' does not exist in type 'EventMapping'.

[MartinJohns]

Duplicate of #10570.

The type of your eventMap property is not taken from the implementing interface. It's inferred, and then checked whether it's compatible with the interface, and the type you have is compatible.

When you add an explicit type annotation you will get the excess-properties check: eventMap: EventMapping = {...}

[RS-Sautter]

@MartinJohns thanks for the explanation. What would be a way in TS to achieve what I would like to do here then? I would not want to explicitly redeclare the type of eventMap but I would want to enforce it to be EventMapping.

[MartinJohns]

TypeScript is structurally typed. Additional properties that are not incompatible with the declared type are always allowed. You would need #12936 to disallow additional properties.

[fatcerberus]

What would be a way in TS to achieve what I would like to do here then? I would not want to explicitly redeclare the type of eventMap but I would want to enforce it to be EventMapping.

There's no way to do this currently when implementing an interface. The types of class members are inferred the same way regardless of whether the class has an implements clause or not. See #32082.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.