关于ts的 | 和 &

Question

import { FC } from "react";
import QuestionInputConf, { QuestionInputPropsType } from "./QuestionInput";
import QuestionTitleConf, { QuestionTitlePropsType } from "./QuestionTitle";

// 统一，各个组件的 prop type
export type ComponentPropsType = QuestionInputPropsType & QuestionTitlePropsType;

// 统一，组件的配置
export type ComponentConfType = {
    title: string,
    type: string,
    Component: FC<ComponentPropsType>,
    defaultProps: ComponentPropsType,
}

// 全部组件配置的列表
const componentConfList: ComponentConfType[] = [
    QuestionInputConf,
    QuestionTitleConf
]

export function getComponentConfByType(type: string) {
    return componentConfList.find(conf => conf.type === type)
}

老师，本节课中关于 | 和 & 的地方我还是不太理解，课程最终在代码里使用了&，那么对于componentConfList里面的QuestionInputConf，QuestionInputConf的defaultProps不是应该同时具备QuestionInputPropsType 和QuestionTitlePropsType的属性吗？从这个逻辑来讲，使用 | 才是正确的，到底是哪里出了问题？

Answer 1

双越 2024-07-22 07:10:56

你可以先去查一下 ts 文档，查“ts 交叉类型 联合类型”