Vue Template Parser with Dynamic Data Injection

This challenge asks you to build a simplified template parser for Vue.js-like templates. The parser should take a template string and a data object as input, and return a string with the template rendered, substituting data values from the object into placeholders within the template. This is a fundamental building block for many UI frameworks and templating engines.

Problem Description

You are tasked with creating a TypeScript function parseTemplate that takes two arguments:

1. template: A string representing the template. Placeholders within the template will be enclosed in double curly braces, e.g., {{ name }}.
2. data: An object containing the data to be injected into the template. The keys of this object correspond to the placeholder names within the template.

The parseTemplate function should return a new string where all placeholders in the template have been replaced with their corresponding values from the data object. If a placeholder is not found in the data object, it should be replaced with an empty string. The function should handle multiple placeholders within the template.

Key Requirements:

• The function must be written in TypeScript.
• The function must correctly parse and replace placeholders in the template.
• The function must handle cases where a placeholder is not found in the data.
• The function should not modify the original template string.
• The function should handle simple data types (string, number, boolean). No complex data structures (arrays, objects) are required within the data object.

Expected Behavior:

The function should iterate through the template string, identify placeholders enclosed in {{ ... }}, and replace them with the corresponding values from the data object. If a placeholder is not found in the data object, it should be replaced with an empty string.

Edge Cases to Consider:

• Empty template string.
• Template string with no placeholders.
• Template string with multiple placeholders.
• Placeholder names that are not valid JavaScript identifiers (though this is not strictly required to handle, it's good to be aware of).
• Data object with missing values for some placeholders.
• Nested curly braces (e.g., {{ {{ name }}}}, which should be treated as a literal {{ {{ name }}}}).

Examples

Example 1:

Input: template = "Hello, {{ name }}!", data = { name: "Alice" }
Output: "Hello, Alice!"
Explanation: The placeholder `{{ name }}` is replaced with the value "Alice" from the data object.

Example 2:

Input: template = "The answer is {{ answer }}.  The question was {{ question }}.", data = { answer: 42 }
Output: "The answer is 42.  The question was ."
Explanation: The placeholder `{{ answer }}` is replaced with "42", while `{{ question }}` is not found in the data and is replaced with an empty string.

Example 3:

Input: template = "Value: {{ value }}", data = { value: true }
Output: "Value: true"
Explanation: Boolean values are also correctly handled.

Example 4:

Input: template = "{{ missing }}", data = {}
Output: ""
Explanation: Placeholder not found in data, replaced with empty string.

Constraints

• The template string will contain only alphanumeric characters, spaces, and curly braces {}.
• The data object will contain only string, number, or boolean values.
• The length of the template string will be less than 1000 characters.
• The number of placeholders in the template string will be less than 50.
• Performance is not a critical concern for this challenge; readability and correctness are prioritized.

Notes

Consider using regular expressions to efficiently find and replace the placeholders. Remember to handle edge cases carefully to ensure the function behaves as expected in all scenarios. Think about how to avoid modifying the original template string. The goal is to create a simple, functional parser, not a full-fledged templating engine. Focus on the core functionality of placeholder replacement.