The Typescript Tagged Templates allow us to tag template strings or template literals. Once tagged, the Templates strings allow us to parse the template literals using a function. It allows us more control over how the templates are converted to a string.
Template strings
The Template string enables the string interpolation. We specify a ${expression} inside a string enclosed in a back-tick. The expression is evaluated to a string literal at the run time
For Example, In the following code, $(playerName) is evaluated to “Sachin Tendulkar”
1 2 3 4 5 6 7 8 | let playerName:string = "Sachin Tendulkar"; console.log(`${playerName} is the greatest cricketer of all time`) //**** Output **** //Sachin Tendulkar is the greates cricker of all time |
What is a Tagged Template?
The Tagged Template is a template string, which is tagged by a function. The Tag is a function which has the ability to process the template string. We use it to Tag a template string by placing it before it. We do not use the () as in the function call.
For Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let message="Hello"; function hi(strings:TemplateStringsArray, name:string) { // hi is tag function return 'Hi'; } console.log(`${message} world`); // Without tag console.log(hi`${message} world`); //Tagged with the function hi //**** output **** //Hello world //Hi |
In the above example, we have declared the variable message & a function hi.
The Template string in the first console.log does not use the tag. Hence output from it is "Hello World" as expected.
We have tagged the second Template with hi. That is done by placing the function name before it without the customary (). Now this Template string is a tagged template. The runtime executes the tag function i.e. hi by passing the template string as argument to it.
Hence we will see "Hi" as the output, because of the tagged function hi returns it.
Tag Function
To create a tagged template, First, we need to create a function. The tag function receives two arguments.
- The first argument to the function is the array of template strings split using the expression as the separator.
- The evaluated expressions are the subsequent arguments.
Consider the following template string
1 2 3 | `Welcome, ${firstName} ${lastName}. Learn ${topic} here` |
The first argument to the tag function is an array of strings (TemplateStringsArray).
The first element in the array is the string up to the first expression $(firstName), which is “Welcome,”. The second element is the string between the first expression (${firstName}) and the second expression (${lastName}) i.e a blank string. The third element is between the second expression (${lastName}) and the third expression (${topic}). i.e “. Learn”. And the last element is from the last expression ${topic} to the end of the string i.e “here”
Hence our first argument is [ 'Welcome, ', ' ', '. Learn ', ' here' ]
The expressions are evaluated and passed as the subsequent arguments in the order of occurrence.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let firstName: string = "Sachin" let lastName: string = "Tendulkar" let topic = "Typescript" function say(strings: TemplateStringsArray, firstName:string,lastName:string,topic:string) { let str = strings[0]+ firstName+strings[1]+lastName+strings[2]+topic+strings[3]; return str; } console.log(say`Welcome, ${firstName} ${lastName}. Learn ${topic} here`); ** Output**** Welcome, Sachin Tendulkar. Learn Typescript here |
In the above example, we knew the number of arguments beforehand. But, if there are a variable number of expressions, then it would be better to make use of the rest operator as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | let firstName: string = "Sachin" let lastName: string = "Tendulkar" let topic = "Typescript" function say(strings: TemplateStringsArray, ... expr: string[]) { console.log(strings); console.log(expr); return ''; } console.log(say`Welcome, ${firstName} ${lastName}. Learn ${topic} here`); *** output **** [ 'Welcome, ', ' ', '. Learn ', ' here' ] ==>strings [ 'Sachin', 'Tendulkar', 'Typescript' ] ==>expr |
Now once we have the required arguments, we can use them in the function to fine-tune the output
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | let firstName: string = "Sachin" let lastName: string = "Tendulkar" let topic = "Typescript" function say(strings: TemplateStringsArray, ... expr: string[]) { let str = ''; strings.forEach((string, i) => { str += string + (expr[i] || ''); }); return str; } console.log(say`Welcome, ${firstName} ${lastName}. Learn ${topic} here`); *** output *** Welcome, Sachin Tendulkar. Learn Typescript here |
Note that the strings array is always be going to be one more than the expr array. Hence when we come to the last string in the loop, the expr would be undefined
Raw strings
The tag function also gets a raw version of template string via the property raw. The raw version is where strings are not interpreted i.e. escape strings are not processed.
1 2 3 4 5 6 7 8 9 10 11 12 | function tag(strings:TemplateStringsArray) { console.log(strings.raw); console.log(strings); } tag`string text line 1 \n string text line 2`; //*** output *** //[ 'string text line 1 \\n string text line 2' ] => raw //[ 'string text line 1 \n string text line 2' ] |
Summary
Using the Typescript Tagged Templates, we can have more control over the Template strings.