TypeScript - 我应该如何输入这些 React 组件？

Question

Suppose I have two items: A and B. The items have different options. I want to create a form that allows me to select one of the two items and to set the options for that item. When I'm done setting the options, I want to have a handler that does something with the saved options.

I'm having trouble typing it properly because the options of A and B don't intersect, so when I pass the options into the specific item form component it gives me a TypeScript error.

How would I go about fixing this or better yet how would I modify my approach to this problem?

I've created a sample app here: https://codesandbox.io/s/patient-bush-4emyo?file=/src/ItemCreator.tsx

---

The error "Type 'Options' is not assignable to type 'OptionsA & OptionsB'." occurs in this line.

<Form options={options} setOptions={setOptions} />

This is the main form creator:

import React, { useState, FC, useEffect } from "react";
import { OptionsAForm, OptionsA, defaultOptionsA } from "./OptionsAForm";
import { OptionsBForm, OptionsB, defaultOptionsB } from "./OptionsBForm";

type Options = OptionsA | OptionsB;

export const ItemCreator: FC = () => {
  const [item, setItem] = useState<string>("A");
  const [options, setOptions] = useState<Options>(defaultOptionsA);

  useEffect(() => {
    if (item === "A") {
      setOptions(defaultOptionsA);
    } else if (item === "B") {
      setOptions(defaultOptionsB);
    }
  }, [item]);

  let Form;
  if (item === "A") {
    Form = OptionsAForm;
  } else if (item === "B") {
    Form = OptionsBForm;
  }

  const handleSubmit = () => {
    // do stuff with Options here
    console.log(options);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <select value={item} onChange={(e) => setItem(e.target.value)}>
        <option value="" disabled>
          Select an item
        </option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      {Form && options != null && (
        <Form options={options} setOptions={setOptions} />
      )}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

These are the forms for the options

import React, { FC } from "react";

export const defaultOptionsA: OptionsA = {
  name: "",
  color: ""
};

export interface OptionsA {
  name: string;
  color: string;
}

interface FormProps {
  setOptions: (options: OptionsA) => void;
  options: OptionsA;
}

export const OptionsAForm: FC<FormProps> = ({ options, setOptions }) => {
  return (
    <>
      <input
        placeholder="Name"
        value={options.name}
        onChange={(e) => setOptions({ ...options, name: e.target.value })}
      />
      <input
        placeholder="Color"
        value={options.color}
        onChange={(e) => setOptions({ ...options, color: e.target.value })}
      />
    </>
  );
};

import React, { FC } from "react";

export const defaultOptionsB: OptionsB = {
  name: "",
  weight: 0
};

export interface OptionsB {
  name: string;
  weight: number;
}

interface FormProps {
  setOptions: (options: OptionsB) => void;
  options: OptionsB;
}

export const OptionsBForm: FC<FormProps> = ({ options, setOptions }) => {
  return (
    <>
      <input
        placeholder="Name"
        value={options.name}
        onChange={(e) => setOptions({ ...options, name: e.target.value })}
      />
      <input
        type="number"
        placeholder="weight"
        value={options.weight}
        onChange={(e) =>
          setOptions({ ...options, weight: parseInt(e.target.value, 10) })
        }
      />
    </>
  );
};

Answer 1

Updated ItemCreator.tsx file with added generic type Option

import React, { useState, FC, useEffect } from "react";
import { OptionsAForm, OptionsA, defaultOptionsA } from "./OptionsAForm";
import { OptionsBForm, OptionsB, defaultOptionsB } from "./OptionsBForm";

type OptionTypes = "A" | "B";

interface OptionsMap {
  A: OptionsA;
  B: OptionsB;
}

type Options<T = OptionTypes> = T extends OptionTypes ? OptionsMap[T] : null;

const isObjectEmpty = (obj: Record<string, any>) =>
  Object.keys(obj).length === 0;

export const ItemCreator: FC = () => {
  const [item, setItem] = useState<OptionTypes | "">("");
  const [options, setOptions] = useState<Options | {}>({});

  useEffect(() => {
    if (item === "A") {
      setOptions(defaultOptionsA);
    } else if (item === "B") {
      setOptions(defaultOptionsB);
    }
  }, [item]);

  const handleSubmit = () => {
    // do stuff with Options here
    console.log(options);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <select
        value={item}
        onChange={(e) => setItem(e.target.value as OptionTypes)}
      >
        <option value="" disabled>
          Select an item
        </option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      {item === "A" && !isObjectEmpty(options) && (
        <OptionsAForm
          options={options as Options<"A">}
          setOptions={setOptions}
        />
      )}
      {item === "B" && !isObjectEmpty(options) && (
        <OptionsBForm
          options={options as Options<"B">}
          setOptions={setOptions}
        />
      )}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

Update: using useReducer because there were still errors

import React, { FC } from "react";
import { OptionsAForm, OptionsA, defaultOptionsA } from "./OptionsAForm";
import { OptionsBForm, OptionsB, defaultOptionsB } from "./OptionsBForm";

type OptionTypes = "A" | "B";

interface OptionsMap {
  A: OptionsA;
  B: OptionsB;
}

type Options<T = OptionTypes> = T extends OptionTypes ? OptionsMap[T] : null;

const isObjectEmpty = (obj: Record<string, any>) =>
  Object.keys(obj).length === 0;

type Action =
  | {
      type: "SET_ITEM";
      item: OptionTypes;
    }
  | {
      type: "SET_OPTIONS";
      options: Options;
    };

interface IState {
  item: OptionTypes | "";
  options: Options | {};
}

const initialState: IState = {
  item: "",
  options: {}
};

function reducer(state: IState, action: Action): IState {
  switch (action.type) {
    case "SET_ITEM": {
      const { item } = action;
      return {
        ...state,
        item,
        options: item === "A" ? defaultOptionsA : defaultOptionsB
      };
    }
    case "SET_OPTIONS": {
      return {
        ...state,
        options: action.options
      };
    }
    default:
      return state;
  }
}

export const ItemCreator: FC = () => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  const { item, options } = state;

  const setItem = (selectedItem: OptionTypes) =>
    dispatch({ type: "SET_ITEM", item: selectedItem });

  const setOptions = (options: Options) =>
    dispatch({ type: "SET_OPTIONS", options });

  const handleSubmit = () => {
    // do stuff with Options here
    console.log(options);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <select
        value={item}
        onChange={(e) => setItem(e.target.value as OptionTypes)}
      >
        <option value="" disabled>
          Select an item
        </option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      {item === "A" && !isObjectEmpty(options) && (
        <OptionsAForm
          options={options as Options<"A">}
          setOptions={setOptions}
        />
      )}
      {item === "B" && !isObjectEmpty(options) && (
        <OptionsBForm
          options={options as Options<"B">}
          setOptions={setOptions}
        />
      )}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};