Angular Template Parser with Data Binding

This challenge asks you to build a simplified template parser for Angular-like data binding. Template parsing is a core component of Angular, responsible for transforming HTML templates into executable code. Your parser will take a template string and a data object, and produce a string with placeholders replaced by corresponding data values.

Problem Description

You need to create a TypeScript function parseTemplate that takes two arguments: a template string and a data object. The template string will contain placeholders in the format {{ key }} where key is a string representing a property in the data object. The function should replace each placeholder with the corresponding value from the data object. If a placeholder's key is not found in the data object, it should be replaced with an empty string.

Key Requirements:

• Placeholder Recognition: The parser must accurately identify placeholders in the format {{ key }}.
• Data Binding: The parser must correctly substitute the values from the data object into the placeholders.
• Missing Keys: If a key within a placeholder is not present in the data object, the placeholder should be replaced with an empty string.
• Multiple Placeholders: The parser must handle multiple placeholders within the template string.
• String Handling: The template string should be treated as a regular string, and the parser should not attempt to interpret it as HTML.

Expected Behavior:

The function should return a new string with all placeholders replaced by their corresponding values. The original template string should not be modified.

Edge Cases to Consider:

• Empty template string.
• Data object with no properties.
• Placeholders with invalid keys (e.g., containing spaces or special characters). These should be treated as missing keys and replaced with an empty string.
• Nested placeholders (e.g., {{ {{ key }} }}). For simplicity, assume nested placeholders are invalid and should be treated as missing keys.
• Placeholders with the same key appearing multiple times. The last value associated with that key in the data object should be used.

Examples

Example 1:

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

Example 2:

Input: template = "My age is {{ age }}. I am {{ city }}.", data = { age: 30 }
Output: "My age is 30. I am ."
Explanation: The placeholder `{{ age }}` is replaced with "30". The placeholder `{{ city }}` is not found in the data object, so it's replaced with an empty string.

Example 3:

Input: template = "Name: {{name}}, City: {{city}}", data = { city: "New York", name: "John" }
Output: "Name: John, City: New York"
Explanation:  The placeholders are replaced with their corresponding values. The order of keys in the data object doesn't matter.

Example 4: (Edge Case)

Input: template = "Template with {{ invalid key }}", data = { validKey: "value" }
Output: "Template with "
Explanation: The placeholder `{{ invalid key }}` contains a space, which is considered an invalid key. It's replaced with an empty string.

Constraints

• The template string will contain only alphanumeric characters, spaces, and the characters { and }.
• The data object will be a plain JavaScript object with string keys and string values.
• The template string's length will be less than 1000 characters.
• The number of placeholders in the template string will be less than 50.
• Performance: The function should complete within 100ms for typical inputs.

Notes

• Consider using regular expressions to efficiently find and replace placeholders.
• Focus on clarity and readability of your code.
• Error handling is not required for this challenge; assume the input is well-formed.
• This is a simplified parser; it does not handle complex Angular features like pipes, directives, or expressions. The goal is to demonstrate the basic concept of data binding.