Add lang="ts" to a component's script tag to enable TypeScript.
Define a type for the component's props, including callback props.
Use the type with $props. Our onchecked callback receives a boolean, not a custom event.
DOM handlers receive regular HTML events. We'll tell TypeScript our input is an HTMLInputElement.
<script lang="ts">
type Props = {
task: string;
completed?: boolean;
onchecked: (completed: boolean) => void;
};
let {
task, completed = false, onchecked,
}: Props = $props();
function handleChange(event: Event) {
const input = event.currentTarget as HTMLInputElement;
onchecked(input.checked);
}
</script>
<label>
<input
type="checkbox"
checked={completed}
onchange={handleChange}
/>
{task}
</label>