Trying out typescript, I want to achieve the following thing:
Getting a question text and a number from server and displaying it in DOM somewhere, using typescript.
Currently I have the following .ts file:
class QuestionResponse {
constructor(public questionText, public questionNumber) {
}
}
function questioner(question: QuestionResponse) {
return '<div data-val-id="${QuestionNumber}"> ${QuestionText} </div>';
}
var testQuestion = new QuestionResponse("Question text number 5", 5);
//this will be replaced by .innerHTML of some element:
alert(questioner(testQuestion));
This does not replace the ${QuestionNumber} with the question.QuestionNumber... nor the Text. I don't want to use string appends, I want to use clean html, preferably on a seperate .html file.
Basically I'm asking: Is it possible using typescript, if yes, how? If not, what would be the best practice way to achieve this using angularjs? (but still using typescript)
The correct syntax is:
function questioner(question: QuestionResponse) {
return `<div data-val-id="${question.questionNumber}"> ${question.questionText} </div>`;
}
The important part here is the usage of ` (backquote/backtick)
Wrap your string with ` instead of " and ' to make use of the ${}
syntax.
This is a TypeScript (and ES6) feature.