Template Literal Type - Does not evaluate interpolated template strings against type definition

[dan-kez]

TypeScript Version: 4.1.2

Search Terms:
template literal type template string interpolation number pixel value

Code

const pixelValue: number = 22;

type PixelValueType = `${number}px`;

const pixelString: PixelValueType = `22px`;

// Error here
const pixelStringWithTemplate: PixelValueType = `${pixelValue}px`;

Expected behavior:
A template string should be evaluated to determine if it matches a template literal type.

Actual behavior:
The template string is evaluated to type string even though it can match the Template Literal Type

Type 'string' is not assignable to type '`${number}px`'.(2322)

Playground Link:
https://www.typescriptlang.org/play?#code/MYewdgzgLgBADgSwB4FMA2A1AhmgrigLhjFwFsAjFAJxgF4YAmBgbgChWoBPOFGABWTpseFABVuvegAMAJAG8SFagF84SKW1ahIsRKjQBlKFQRgA5kQH7h+cTzowpTNRq3ho8QYeOmzAdQQoAAtRFFI4NCwoQn4vGzEJB1k5PSEcfFV1NiA

Related Issues:

[jcalz]

Related issues: #40707, #10676

From #40707, if you use a const assertion the compiler will give a template literal type to a template literal expression, resulting in your desired behavior:

const pixelValue: number = 22;
type PixelValueType = `${number}px`;
const pixelStringWithTemplate: PixelValueType = `${pixelValue}px` as const; // okay

Playground link

It looks like your desired behavior is for the compiler to always synthesize a template literal type for a template literal expression the way #10676 does for other literal types, so that as const is not necessary.

[a1245582339]

Related issues: #40707, #10676

From #40707, if you use a const assertion the compiler will give a template literal type to a template literal expression, resulting in your desired behavior:

const pixelValue: number = 22;
type PixelValueType = `${number}px`;
const pixelStringWithTemplate: PixelValueType = `${pixelValue}px` as const; // okay

Playground link

It looks like your desired behavior is for the compiler to always synthesize a template literal type for a template literal expression the way #10676 does for other literal types, so that as const is not necessary.

Why the ${pixelValue}px cannot be inferred to PixelValueType automatically? It seems nothing problem.

[RyanCavanaugh]

Anders Hejlsberg (@ahejlsberg) Seems like we should be providing a literal context here?

[ahejlsberg]

This is a duplicate of #41631.

[ahejlsberg]

Now implemented in #41891.