面试题：Solid.js中如何使用TypeScript增强createContext和useContext的类型安全性

定义用户信息类型：

// 定义用户信息类型
type UserInfo = {
    username: string;
    userId: number;
};

创建上下文：

import { createContext } from'solid-js';

// 创建用户信息上下文
const UserInfoContext = createContext<UserInfo | null>(null);

跨组件传递用户信息：

父组件提供上下文：

import { createSignal } from'solid-js';
import { UserInfoContext } from './UserInfoContext';

const ParentComponent = () => {
    const [userInfo, setUserInfo] = createSignal<UserInfo>({
        username: 'exampleUser',
        userId: 1
    });
    return (
        <UserInfoContext.Provider value={userInfo()}>
            {/* 子组件树 */}
        </UserInfoContext.Provider>
    );
};

子组件使用上下文：

import { useContext } from'solid-js';
import { UserInfoContext } from './UserInfoContext';

const ChildComponent = () => {
    const userInfo = useContext(UserInfoContext);
    if (!userInfo) {
        throw new Error('UserInfoContext not found');
    }
    return (
        <div>
            <p>Username: {userInfo.username}</p>
            <p>User ID: {userInfo.userId}</p>
        </div>
    );
};

关键的类型定义步骤：
- 首先明确用户信息对象的结构，定义UserInfo类型，包含username（字符串类型）和userId（数字类型）。
- 在创建上下文时，指定上下文的类型为UserInfo | null，因为在Provider未包裹的情况下，初始值为null。
可能遇到的类型问题及解决方法：
- 类型未定义问题：如果没有正确定义UserInfo类型，在使用上下文时可能会出现类型错误，例如访问不存在的属性。解决方法是确保UserInfo类型准确反映用户信息的结构。
- 上下文值为null问题：由于初始上下文值可能为null，在子组件中使用useContext获取上下文值时，需要进行非空检查。如上述代码中在ChildComponent里，如果userInfo为null，抛出错误，以避免后续代码因访问null值属性而出现运行时错误。

星途面试题库

面试题：Solid.js中如何使用TypeScript增强createContext和useContext的类型安全性

知识考点

面试题答案