Typing Context

In notebook:
FrontEndMasters Intermediate React
Created at:
2019-06-25
Updated:
2019-08-15
Tags:
React libraries JavaScript

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.