Encountering an Error with Tagged Template Literals in TypeScript

Question

Encountering an Error with Tagged Template Literals in TypeScript

I'm attempting to utilize tagged template literals from ES5 with TypeScript, but it appears that TypeScript doesn't fully support it. Here is the code snippet I have:

class TemplateLiterals { 
    age: number = 24;
    name: 'Luke Skywalker'
    private tag(strings: string[], personExp, ageExp) :string{
        var str0 = strings[0]; // "that "
        var str1 = strings[1]; // " is a "
        var ageStr;
        if (ageExp > 99) {
            ageStr = 'centenarian';
        } else {
            ageStr = 'youngster';
        }
        return str0 + personExp + str1 + ageStr;
    }
    toString() {
        return this.tag `that ${ this.name } is a ${ this.age }`;
    }
}

In the toString method, TypeScript displays the following error:

Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'string[]'.
Property 'push' is missing in type 'TemplateStringsArray'.

I am puzzled by why this error occurs. According to Mozilla's documentation, "The first argument of a tag function contains an array of string values." Therefore, it should accept the array of strings. However, there is an expectation of TemplateStringsArray. I am currently using the TemplateStingArray type to bypass this error. Can someone explain what's happening? Thanks. You can view the code on the playground.

javascript typescript template-literals

Answer 1

Answer №1

After further exploration, I finally uncovered clarifications in the revision history. Hopefully, this information will benefit someone. According to the documentation:

ES2015 tagged templates always pass their tag an immutable array-like object that contains a property named raw (which is also immutable). This object is referred to as TemplateStringsArray by TypeScript.

Previously, TemplateStringsArray could be assigned to an Array, allowing users to use a more concise type for their tag parameters:

function myTemplateTag(strs: string[]) {
    // ... 
}

However, with the introduction of TypeScript 2.0, the readonly modifier is now supported in the language and can indicate immutability of objects. As a result, TemplateStringsArray has been made immutable and is no longer compatible with string[].

Recommendation:

Explicitly use TemplateStringsArray (or utilize ReadonlyArray<string>).

Answer 2

After further exploration, I finally uncovered clarifications in the revision history. Hopefully, this information will benefit someone. According to the documentation:

ES2015 tagged templates always pass their tag an immutable array-like object that contains a property named raw (which is also immutable). This object is referred to as TemplateStringsArray by TypeScript.

Previously, TemplateStringsArray could be assigned to an Array, allowing users to use a more concise type for their tag parameters:

function myTemplateTag(strs: string[]) {
    // ... 
}

However, with the introduction of TypeScript 2.0, the readonly modifier is now supported in the language and can indicate immutability of objects. As a result, TemplateStringsArray has been made immutable and is no longer compatible with string[].

Recommendation:

Explicitly use TemplateStringsArray (or utilize ReadonlyArray<string>).

Answer 3

Answer №2

Documentation on TemplateStringsArray appears to be scarce, but a workaround for the error involves changing the parameter to TemplateStringsArray instead of string[], and addressing a bug related to the name member - this seems to resolve the issue

class TemplateLiterals { 
    age: number = 24;
    name: string = 'Luke Skywalker'
    private tag(strings: TemplateStringsArray, personExp, ageExp) :string{
        var str0 = strings[0]; // "that "
        var str1 = strings[1]; // " is a "
        var ageStr;
        if (ageExp > 99) {
            ageStr = 'centenarian';
        } else {
            ageStr = 'youngster';
        }
        return str0 + personExp + str1 + ageStr;
    }
    toString() {
        return this.tag `that ${ this.name } is a ${ this.age }`;
    }
}

var luke: TemplateLiterals = new TemplateLiterals()
console.log(luke.toString())

Answer 4

Documentation on TemplateStringsArray appears to be scarce, but a workaround for the error involves changing the parameter to TemplateStringsArray instead of string[], and addressing a bug related to the name member - this seems to resolve the issue

class TemplateLiterals { 
    age: number = 24;
    name: string = 'Luke Skywalker'
    private tag(strings: TemplateStringsArray, personExp, ageExp) :string{
        var str0 = strings[0]; // "that "
        var str1 = strings[1]; // " is a "
        var ageStr;
        if (ageExp > 99) {
            ageStr = 'centenarian';
        } else {
            ageStr = 'youngster';
        }
        return str0 + personExp + str1 + ageStr;
    }
    toString() {
        return this.tag `that ${ this.name } is a ${ this.age }`;
    }
}

var luke: TemplateLiterals = new TemplateLiterals()
console.log(luke.toString())

Answer 5

Answer №3

The previous solution did not solve my problem, possibly due to a change in requirements as of the current month (December 2021).

However, I managed to fix the issue by utilizing ReadonlyArray<string> instead of string[].

Feel free to use the following sample function if it can assist anyone else.

function myCustomTag(strs: ReadonlyArray<string>) {
  // Perform necessary actions here.
}

Answer 6

The previous solution did not solve my problem, possibly due to a change in requirements as of the current month (December 2021).

However, I managed to fix the issue by utilizing ReadonlyArray<string> instead of string[].

Feel free to use the following sample function if it can assist anyone else.

function myCustomTag(strs: ReadonlyArray<string>) {
  // Perform necessary actions here.
}

Answer 7

Answer №4

Dealing with Angular's $localize function, I encountered a similar issue. The mistake I made was using it incorrectly:

// Incorrect usage:
const translated = $localize(`Something to translate!`);
// Correct way is without parentheses:
const translated = $localize`Something to translate!`;

Hopefully, this tip will help someone save some time :)

Answer 8

Dealing with Angular's $localize function, I encountered a similar issue. The mistake I made was using it incorrectly:

// Incorrect usage:
const translated = $localize(`Something to translate!`);
// Correct way is without parentheses:
const translated = $localize`Something to translate!`;

Hopefully, this tip will help someone save some time :)

Answer 9

Answer №5

Exploring the process of simple template evaluation in TypeScript:

// Function for evaluating template tags:
function _E(t: TemplateStringsArray, ...args: Array<any>): string {
    return t.reduce((a, c, i) => a + c + (args[i] ?? ''), '');
}

Testing it out:

const first = 'one';
const second = null; // to be ignored
const third = 123;

console.log(_E`${first}-${second}-${third}`);
//=> one--123

It's important to note that in our tag function, we intentionally convert any null or undefined values into empty strings, but you have the flexibility to handle them as needed.

Answer 10

Exploring the process of simple template evaluation in TypeScript:

// Function for evaluating template tags:
function _E(t: TemplateStringsArray, ...args: Array<any>): string {
    return t.reduce((a, c, i) => a + c + (args[i] ?? ''), '');
}

Testing it out:

const first = 'one';
const second = null; // to be ignored
const third = 123;

console.log(_E`${first}-${second}-${third}`);
//=> one--123

It's important to note that in our tag function, we intentionally convert any null or undefined values into empty strings, but you have the flexibility to handle them as needed.

Encountering an Error with Tagged Template Literals in TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

User class instantiation in livequery is initiated

Geocode promise left unattended

Unable to add text to texarea using jquery

Using GSAP in an Ionic application

ng-repeat not functioning properly with data defined in XMLHttpRequest

Refresh the pagination in a jQuery DataTable

Leveraging JSON Data for Avatars in React.js

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

Timepicker.js - Incorrect Placement of Time Picker in Certain Scenarios

Using useState in ReactJS does not allow setting state data

Exploring the Difference Between Passing 0 and an Empty Array as the Second Argument in useEffect with React Hooks

The argument provided needs to be a function, but instead, an object instance was received, not the original argument as expected

Ways to retrieve all elements based on their class names?

Unable to render the JSON data that was retrieved from a jQuery AJAX request

Can someone explain why I am consistently receiving the value of undefined when accessing the file Object?

Progress Bar Countdown Timer

fill out an HTML form and send it in

Issue with running JavaScript functions on HTML elements in a partial when updating it with AJAX in ASP.NET MVC Core

What is the best way to access a reference to the xgrid component in @material-ui?