关于ts的 | 和 &

来源:13-10 -定义组件配置-可根据type找到组件

tobeabee

2024-07-22

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的属性吗?从这个逻辑来讲,使用 | 才是正确的,到底是哪里出了问题?

写回答

1回答

双越

2024-07-22

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

0
0

React18+ Nest.js 全栈开发仿问卷星项目

React18+TS4+Antd5+Next.js13 ,B端+C 端,完整业务

383 学习 · 252 问题

查看课程