Add rule no-unused-props

[oekazuma]

Motivation

This rule aims to ensure consistency between the defined Props type and the actual use of $props().
This prevents mistakes due to overlooking properties and improves code readability and maintainability.
Enforcing this rule helps developers understand and reduces the risk of potential bugs.

Description

Issue a warning if the type of the defined Props does not match the variable destructuring assignment in $props().

Examples

<script lang="ts">
  /* ✓ GOOD */

  interface Props {
    a: string;
    b: number;
  }

  let { a, b }: Props = $props();

  /* ✗ BAD */

  interface Props {
    a: string;
    b: number;
  }

  let { a }: Props = $props();
</script>

Additional comments

No response

[ota-meshi]

Thank you for proposing the rule!
That rule sounds good to me!

If possible, it would be even better if it could check the usage of unnamed props as well.

<script lang="ts">
	interface Props {
		a: number;
		[key: string]: unknown; // unused
	}

	let {a}: Props = $props();
        // We can guess that the following would be correct:
	// let {a, ...other}: Props = $props();
</script>

And it would be even better if the rule could check member access as well.

<script lang="ts">
  interface Props {
    a: string;
    b: number; // unused
  }

  let props: Props = $props();
</script>

{props.a}

<script lang="ts">
  interface Props {
    a: string;
    b: number;
    c: number; // unused
  }

  let { a, ...otherProps }: Props = $props();
</script>

{otherProps.b}

I think the rule name might be better, something like no-unused-props.
What do you think?

[oekazuma]

Thanks for the good additional suggestions!

I agree with the rule name, no-unused-props.