面试题：Qwik中如何在组件间传递Props并确保类型安全

Question

在Qwik中，假设你有一个父组件和一个子组件，描述如何将Props从父组件传递到子组件，并通过TypeScript确保Props的类型安全。请给出具体的代码示例，包括如何定义Props接口以及在组件中使用。

Answer 1

1. 定义Props接口： 在TypeScript中，首先定义一个接口来描述Props的结构。假设父组件要传递一个字符串类型的message和一个数字类型的count给子组件。

// Props接口定义
interface ChildProps {
    message: string;
    count: number;
}

2. 父组件传递Props： 在Qwik的父组件中，导入子组件，并传递Props。

import { component$, useSignal } from '@builder.io/qwik';
import ChildComponent from './ChildComponent';

const ParentComponent = component$(() => {
    const message = useSignal('Hello from parent');
    const count = useSignal(5);

    return (
        <div>
            <ChildComponent message={message.value} count={count.value} />
        </div>
    );
});

export default ParentComponent;

3. 子组件接收Props并确保类型安全： 子组件接收Props并使用前面定义的接口来确保类型安全。

import { component$ } from '@builder.io/qwik';
import type { ChildProps } from './ChildProps';

const ChildComponent = component$((props: ChildProps) => {
    return (
        <div>
            <p>{props.message}</p>
            <p>{props.count}</p>
        </div>
    );
});

export default ChildComponent;

上述代码中，通过定义ChildProps接口，在父组件传递Props时明确数据结构，子组件接收Props时使用该接口确保类型安全，从而在Qwik应用中实现了Props从父组件到子组件的传递并保证类型安全。