Vue Template Type Validation

This challenge focuses on implementing a system to validate the types of data being passed into a Vue component's template. This is crucial for catching potential runtime errors early, improving developer experience, and ensuring data integrity within your Vue applications. You will create a mechanism that can check if a given value matches a predefined expected type.

Problem Description

You need to build a utility or a Vue plugin that can be used to define and check the expected types of data within a Vue component's template. This system should allow developers to specify the expected type for a given data property and then verify that the actual data conforms to that type.

Key Requirements:

• Type Definition: A way to declare the expected type for a data property. This could be a string representing a primitive type (e.g., 'string', 'number', 'boolean', 'object', 'array') or a more complex type definition.
• Validation Function: A function that takes the actual value and the expected type definition, returning true if the value matches the type and false otherwise.
• Vue Integration (Optional but Recommended): Ideally, this validation should integrate with Vue's reactivity system, allowing for checks during component initialization or updates. This could manifest as a custom directive or a component option.
• Error Reporting: When a type mismatch occurs, a clear indication should be provided (e.g., console warning/error).

Expected Behavior:

• If the actual value matches the expected type, no warning or error should be produced.
• If the actual value does not match the expected type, a descriptive warning or error message should be logged to the console, indicating the property name, expected type, and actual type.

Edge Cases to Consider:

• null and undefined values.
• Arrays and objects.
• Handling custom type definitions (e.g., specific object structures).
• Validation on initial component render.
• Validation on subsequent data updates.

Examples

Example 1: Basic Primitive Type Checking

Imagine a Vue component that expects a title to be a string and a count to be a number.

Input (Component Data):

{
  title: "My Awesome App",
  count: 42
}

Expected Type Definitions:

{
  title: 'string',
  count: 'number'
}

Validation Logic:

• validate("My Awesome App", "string") should return true.
• validate(42, "number") should return true.

Output (Console):

No output should be generated as types match.

Example 2: Type Mismatch

Using the same component as Example 1, but with incorrect data.

Input (Component Data):

{
  title: 123, // Expected 'string', got 'number'
  count: "42" // Expected 'number', got 'string'
}

Expected Type Definitions:

{
  title: 'string',
  count: 'number'
}

Validation Logic:

• validate(123, "string") should return false.
• validate("42", "number") should return false.

Output (Console - example):

[Vue warn]: Type mismatch for property 'title'. Expected 'string', but received 'number'.
[Vue warn]: Type mismatch for property 'count'. Expected 'number', but received 'string'.

Example 3: Array and Object Checking

Consider a component that expects a user object and a permissions array.

Input (Component Data):

{
  user: { name: "Alice", age: 30 }, // Expected 'object'
  permissions: ["read", "write"]     // Expected 'array'
}

Expected Type Definitions:

{
  user: 'object',
  permissions: 'array'
}

Validation Logic:

• validate({ name: "Alice", age: 30 }, "object") should return true.
• validate(["read", "write"], "array") should return true.

Output (Console):

No output should be generated.

Example 4: Edge Case - Null/Undefined

Input (Component Data):

{
  name: null, // Expected 'string'
  age: undefined // Expected 'number'
}

Expected Type Definitions:

{
  name: 'string',
  age: 'number'
}

Validation Logic:

• validate(null, "string") should return false (unless null is explicitly allowed).
• validate(undefined, "number") should return false (unless undefined is explicitly allowed).

Output (Console - example):

[Vue warn]: Type mismatch for property 'name'. Expected 'string', but received 'null'.
[Vue warn]: Type mismatch for property 'age'. Expected 'number', but received 'undefined'.

Constraints

• The validation logic should support basic JavaScript primitive types: 'string', 'number', 'boolean', 'object', 'array', 'null', 'undefined'.
• For 'object' and 'array' types, the validation should only check if the value is an instance of Object and Array respectively. Deep checking of object properties or array elements is out of scope for this challenge, but consider how you might extend it later.
• Error messages should be informative and clearly indicate the property, expected type, and actual type.
• The solution should be implemented in TypeScript.

Notes

• Consider how you would define these type expectations. A common pattern in Vue is using props. You could adapt this for general data properties.
• Think about how to make this system reusable across multiple components. A Vue plugin or a mixin might be a good approach.
• For more advanced scenarios, you might consider libraries like Zod or Yup for defining and validating complex types. This challenge focuses on the core mechanism.
• The primary goal is to detect and report mismatches, not to enforce strict type systems like TypeScript itself does at compile time. This is a runtime validation.