typescript React.FC如何表达给定道具（来自用户）与组件内的最终道具之间的差异

Question

the props available inside component Comp can potentially be different from what the user passed to the component. I can think of 2 such scenarios:

• when using defaultProps: for example:

   import React, { FC } from "react"; interface CompProps { name?: string; } const Comp: FC<CompProps> = (props) => { return <div>{props.name.toUpperCase()}</div>; // ^ TS2532: Object is possibly 'undefined'. }; Comp.defaultProps = { name: "", };

  the prop name is optional so props.name could be undefined, but because name has default prop it will never be undefined(unless undefined be passed explicitly) ( possible solution )

• when props are injected from parents using React.cloneElement . props may be implicitly passed from parent to children without typescript knowing it.

currently, in order to fix this, I create another interface FinalCompProps which will contain the actual final props, and then casting it into props .

import React, { FC } from "react";

interface CompProps {
  name?: string;
}
interface FinalCompProps {
  name: string;
}

const Comp: FC<CompProps> = (_props) => {
  const props = _props as FinalCompProps // casting
  return <div>{props.name.toUpperCase()}</div>; // no errors
};
Comp.defaultProps = {
  name: "",
};

This works fine, but I wondered, there is no way to pass into React.FC expected type from the user and final props actually passed to the component?

Looking at the type definition React.FC

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

It looks like there is no option pass such 'FinalProps', and typescript will always end auto-suggest the props passed into React.FC when passing props to Comp

Answer 1

I think the easiest solution to this is:

props.name?.toUpperCase()

Then if name is undefined, it won't call toUpperCase() .

The point of Typescript is to define the types so you don't want to change the prop types.

What do you want to happen if name is undefined?