createContext 在ts中的用法

`createContext` 是 React 中的一个 API，它可以创建一个用于跨组件传递数据的上下文对象。在 TypeScript 中使用 `createContext` 的方式与 JavaScript 中类似，只需要指定上下文对象的类型即可。

下面是一个使用 TypeScript 和 `createContext` 的示例：

import React, { createContext, useContext } from 'react';

// 定义上下文对象的数据类型
interface MyContextType {
  name: string;
  age: number;
}

// 创建上下文对象
const MyContext = createContext<MyContextType>({ name: 'default', age: 0 });

// 使用上下文对象
function MyComponent() {
  const contextData = useContext(MyContext);

  return (
    <div>
      <p>Name: {contextData.name}</p>
      <p>Age: {contextData.age}</p>
    </div>
  );
}

// 渲染组件
function App() {
  return (
    <MyContext.Provider value={{ name: 'John', age: 30 }}>
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;

在上面的代码中，我们首先定义了 `MyContextType` 接口来描述上下文对象的数据类型。然后，我们使用 `createContext` 创建了一个名为 `MyContext` 的上下文对象，并指定了它的数据类型为 `MyContextType`。接着，我们在 `MyComponent` 组件中使用 `useContext` 钩子来获取上下文对象的数据，并渲染了这些数据。最后，我们在 `App` 组件中使用 `MyContext.Provider` 来提供上下文对象的值给子组件使用。

需要注意的是，在使用 `createContext` 创建上下文对象时，需要指定一个默认值。这个默认值的数据类型应该与上下文对象的数据类型相同。