If all values used in a template literal have a literal type, then the template should have a literal type

Search Terms

template string, string literal, template string literal, cast template string as literal

Suggestion

It seems all template strings are widened to type string; however, when all the variables used inside a template string have literal types, it would be nice if the resulting string also had a literal type.

Use Cases

I maintain a library, and I'd like it if templated strings for CSS properties like box shadow would show up for my dev users in intellisense, instead of just "string".

Here's a screenshot showing the current behavior:

It would be very useful if readonly boxShadow and readonly border had literal types instead of a generic string type, to inform my devs what value is passed.

Examples

const elementColors = {
  ...
  globalFocus: '#ff0000',
  ...
} as const

const widths = {
  ...
  default: 4,
  ...
} as const

const shadow = {
  default: {
    boxShadow: boxShadow: `${ elementColors.globalFocus } 0 0 0 ${ width.default }px`,
  },
  ...
} as const

In the above, typeof elementColors.globalFocus === '#ff0000' and typeof width.default === 4, but typeof shadow.default.boxShadow === string. All of the parts used to create the template have literal types, so why doesn't the resulting string have a literal type? TypeScript should be able to infer that only a single possible value is valid for this. typeof shadow.default.boxShadow should equal '#ff0000 0 0 0 4px'.

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • could be breaking for people who rely on templates having type string vs a literal type
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

Start by reproducing the example with literal-valued interpolations and compare the inferred type of shadow.default.boxShadow with the requested literal. Done means template literals whose parts all have literal types are inferred as the corresponding exact string literal, while the existing runtime behavior remains unchanged.