React组件中带默认值的可选Props如何让TypeScript识别其不会为undefined

这个问题我碰到好多次啦，给你分享两种实用的解决思路，让TypeScript彻底明白这个Prop在组件内部绝对不会是undefined~

方法一：拆分基础Props与组件接收的Props #

这种方式逻辑清晰，适合需要复用Props类型的场景：

1. 先定义一个基础Props接口，把带默认值的Prop设为必填类型（因为组件内部一定会有它的值）；
2. 组件接收的Props用Partial<>把这个基础接口转为可选，同时给参数设置默认值。

代码示例：

// 基础Props：定义组件内部实际用到的必填类型
interface MyCompBaseProps {
  optionalProp: string;
}

// 组件接收的是基础Props的可选版本，同时设置默认值
export const MyComp = ({ optionalProp = "abc" }: Partial<MyCompBaseProps>) => {
  return <div>{optionalProp}</div>; // TypeScript会自动识别这里的optionalProp是string类型
};

这样外部调用组件时可以不传optionalProp，组件内部因为有默认值兜底，TypeScript也能准确判断它的类型。

方法二：利用TypeScript的参数默认值类型推断 #

如果不需要单独复用Props接口，直接在函数参数里定义类型就行，TypeScript会根据默认值自动收窄类型：

export const MyComp = ({ optionalProp = "abc" }: { optionalProp?: string }) => {
  return <div>{optionalProp}</div>; // 这里optionalProp的类型会被推断为string，而非string | undefined
};

要是你一定要单独定义接口，也可以这样写——其实在新版TypeScript里，只要给参数加了默认值，组件内部的类型会自动被收窄：

export interface MyCompProps {
  optionalProp?: string;
}

export const MyComp = ({ optionalProp = "abc" }: MyCompProps) => {
  // 这里TypeScript已经知道optionalProp不会是undefined啦
  return <div>{optionalProp}</div>;
};

如果你的TypeScript版本比较旧，可能还是会有提示，这时候可以加个简单的双重兜底（不过更推荐升级TS版本）：

export const MyComp = ({ optionalProp = "abc" }: MyCompProps) => {
  const finalProp = optionalProp ?? "abc";
  return <div>{finalProp}</div>;
};

额外小技巧：用defaultProps（不推荐函数组件使用） #

如果是类组件，defaultProps是传统方案，但函数组件现在更推荐用参数默认值，不过还是提一下：

export interface MyCompProps {
  optionalProp: string; // 这里设为必填
}

export const MyComp = ({ optionalProp }: MyCompProps) => {
  return <div>{optionalProp}</div>;
};

// 设置默认值，外部调用时可以不传这个Prop
MyComp.defaultProps = {
  optionalProp: "abc"
};

备注：内容来源于stack exchange，提问作者Uladzislau