Hone logo
Hone
Problems

Angular Template Type Checking Challenge

Angular's template type checking feature helps catch errors at compile time by verifying that the expressions used in your templates are type-safe. This challenge asks you to implement a simplified version of this feature, focusing on checking the type of a single expression within a template string against a provided type. This is a crucial step in building robust and maintainable Angular applications, preventing runtime errors caused by incorrect data binding.

Problem Description

You are tasked with creating a function checkTemplateExpressionType that validates whether a given expression in an Angular template string matches a specified TypeScript type. The function should analyze the expression and determine if it aligns with the provided type. The type will be represented as a string (e.g., "string", "number", "boolean", "MyCustomType").

What needs to be achieved:

  • Implement a function that takes a template expression string and a TypeScript type string as input.
  • The function should return true if the expression's type is compatible with the specified TypeScript type, and false otherwise.
  • The function should handle basic TypeScript types: "string", "number", "boolean", "any". It should also be able to handle a custom type represented as a string (e.g., "MyCustomType").

Key Requirements:

  • The function must perform a basic type check based on the string representations of the types. No complex type inference is required.
  • The function should be case-insensitive when comparing type names.
  • The function should not attempt to evaluate the expression; it should only check its declared type.

Expected Behavior:

  • If the expression is a literal value (e.g., "123", "true", "'hello'"), the function should infer the type based on the literal's value.
  • If the expression is a variable name (e.g., "myVariable"), the function should assume the type is "any" (as we are not performing full type inference).
  • If the expression is a function call (e.g., "myFunction()"), the function should assume the type is "any".
  • If the expression is a complex expression (e.g., "myVariable + 1"), the function should assume the type is "any".

Edge Cases to Consider:

  • Empty template expression string.
  • Null or undefined input values.
  • Invalid TypeScript type strings.
  • Expressions containing operators or function calls.

Examples

Example 1:

Input: expression = "123", type = "number"
Output: true
Explanation: The expression "123" is a number literal, so it matches the "number" type.

Example 2:

Input: expression = "'hello'", type = "string"
Output: true
Explanation: The expression "'hello'" is a string literal, so it matches the "string" type.

Example 3:

Input: expression = "true", type = "boolean"
Output: true
Explanation: The expression "true" is a boolean literal, so it matches the "boolean" type.

Example 4:

Input: expression = "myVariable", type = "string"
Output: false
Explanation: The expression "myVariable" is a variable name. We assume it's "any" and it doesn't match "string".

Example 5:

Input: expression = "myFunction()", type = "number"
Output: false
Explanation: The expression "myFunction()" is a function call. We assume it's "any" and it doesn't match "number".

Example 6:

Input: expression = "myVariable + 1", type = "number"
Output: false
Explanation: The expression "myVariable + 1" is a complex expression. We assume it's "any" and it doesn't match "number".

Example 7:

Input: expression = "MyCustomType", type = "MyCustomType"
Output: true
Explanation: The expression is a custom type name, which matches the specified type.

Constraints

  • The expression string will be no longer than 256 characters.
  • The type string will be no longer than 64 characters.
  • The function must return a boolean value.
  • The function should handle invalid input gracefully (e.g., return false for null or undefined inputs).
  • Performance is not a primary concern for this simplified implementation.

Notes

  • This challenge focuses on a simplified type checking scenario. A real-world Angular template type checker would involve significantly more complex analysis and type inference.
  • You can assume that the input expression will be a valid string.
  • Consider using regular expressions or string manipulation techniques to extract the type from the expression.
  • Remember to handle case-insensitive comparisons for type names.
  • The "any" type should be considered a fallback when the expression cannot be definitively typed.
Loading editor...
typescript