Typing Context
https://frontendmasters.com/courses/intermediate-react-v2/typing-context/
VSCode codelens demo
You can click on an import statement and see the reference of that value.
ThemeContext.js update
// **** ThemeContext.tsx ****
import { createContext, SetStateAction, Dispatch } from "react";
// **** 1. add the types. ↴
// const ThemeContext = createContext(["green", () => {}]);
// this line is what he typed ↴
const ThemeContext = createContext<[string, (theme:srting) => void]>
// this line is from the GitHub repo ↴:
const ThemeContext = createContext<[string, Dispatch<SetStateAction<string>>]>([
"green",
theme => theme
]);
export default ThemeContext;
What the above means:
const ThemeContext = createContext<[string, (theme:srting) => void]>
See the original function above it. It will call createContext
with a String
and a function that doesn't return anything.