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.

Inizia riproducendo l'esempio con interpolazioni con valori literal e confronta il tipo inferito di shadow.default.boxShadow con il literal richiesto. Il lavoro è completato quando i template literal le cui parti hanno tutte tipi literal vengono inferiti come il corrispondente literal di stringa esatto, mentre il comportamento esistente a runtime rimane invariato.