Tạo ứng dụng React với TypeScript gặp lỗi TS2322 với Context API + hook useState?

Tôi có một dự án React Typescript siêu đơn giản sử dụng Context API để truyền một hook useState xuống các component con.

export const AppContext = React.createContext(null);

function App() {
  const [value, setValue] = React.useState(3);

  return (
    <AppContext.Provider
      value={{
        value,
        setValue
      }}
    >
      <div>
        <h1>App</h1>
        <Child />
      </div>
    </AppContext.Provider>
  );
}

Nó hoạt động tốt trên Code Sandbox: https://codesandbox.io/s/interesting-lamarr-fyy1b

Tuy nhiên, khi tôi tạo một dự án bằng Create React App (npx create-react-app project-name --typescript) và thử cùng một mã, tôi nhận được một lỗi:

Kiểu '{ value: number; setValue: Dispatch>; }' không thể gán cho kiểu 'null'. TS2322

Tôi nghĩ điều này đang xảy ra vì null là giá trị ban đầu cho AppContext nhưng sau đó bị ghi đè bởi value được truyền vào Provider?

Nếu trường hợp này xảy ra thì tôi có thể sửa nó như thế nào? Tôi đoán một cách là giảm bớt các thiết lập TypeScript? Tuy nhiên, có cách viết code tinh tế hơn để tránh vấn đề này không? Tôi mới làm quen với TypeScript và Context API nên không chắc liệu tôi đang làm một hoặc cả hai theo cách không được khuyến nghị.

Câu trả lời #1

Đây không phải là vấn đề của Typescript. Tất cả các bạn cần làm để thay đổi dòng này là:

export const AppContext = React.createContext(null);

đến dòng này:

export const AppContext = React.createContext({});

P.s. và lời khuyên của tôi, hãy viết lại component Child của bạn với AppContext.Consumer như sau:

const Child = () => {
  return (
      <AppContext.Consumer>
        {({ value, setValue }) => (
          <div>
            <h2>{value}</h2>
            <button onClick={() => setValue(value + 1)}>Click</button>
          </div>
        )}
      </AppContext.Consumer>
  );
};

Câu trả lời #2

Bạn đã từng cố gắng định nghĩa Nhà nước như

React.useState<number|null>

?