<preclass="lang-jss-code-block"><codeclass="hljslanguage-javascript"&g

我有這些型別：

export enum LayersItemOptionsEnum {
  OPERATOR,
  HEADER,
}

type sharedTypes = {
  children: string | ReactElement;
};

型別 LayersItemStatic = sharedTypes & {
  label: string;
  option: LayersItemOptionsEnum;
};

型別 LayersItemDynamic = sharedTypes & {
  currentLayer: LayersElement;
};

export type LayersItemProps = (LayersItemDynamic | LayersItemStatic) & sharedTypes;

我試圖這樣使用它們：

我試圖這樣使用它們。

export const LayersItem: FC<LayersItemProps>=（props）。ReactElement => {
  const isHeader = props.option === LayersItemOptionsEnum.HEADER;

  const { isInEditMode } = useAppSelector((state) => state.editMode) 。

  const shouldRenderOptions = isInEditMode & & !isHeader;

  const { selectedState } = useAppSelector((state) =>/span> state)。
  const states = useAppSelector((state) => state。 statesData.elements）。)

  return (
    <StyledLayersItem header={isHeader}>/span>
      <Row>/span>
        < Col span={8} offset={1 /* todo。  add offset dynamically */}> 
          <h1>{props.label ? props.label : props.currentLayer.name}</h1> 
        </Col>/span>
        < Col span={8} offset={4}> 
          {shouldRenderOptions ? (
            <Form. 專案 className="form-item" initialValue={props.children}>
              <Select>/span>
                {generateOptions({ selectedState, states, props.currentLayer }).map((value) => {
                  回傳 (
                    <Select.Option value={value. id} key={value.id} >
                      {value.name}
                    </Select.Option>
                  );
                })}
              </Select> 
            </Form.Item>/span>
          ) : (
            <>{props.children}</>/span>
          )}
        </Col> )}</Col>
      </Row>/span>
    </StyledLayersItem>
  );
};

但是我得到的錯誤是這樣的：

對于每一個props.除了props.children之外。好像它沒有看到型別中的聯合。還是我有什么誤解？

基本上，如果道具有label，或option，我希望props是LayersItemStatic & shared Types型別，如果在props中有currentLayer，我希望它們是LayersItemDynamic & sharedTypes型別。

那么我在這里錯過了什么呢？

我試圖實作這樣的目標：

我試圖實作這樣的目標。

type SharedType = SharedDisplayAndEditTypes & {
  required?: boolean;
  validationMessage: string;
  name: string;
};

型別 TextType = {
  type: 'text'。
  children: string;
};

型別 NumberType = {
  type: 'number';
  children: number;
};

型別 InputType = TextType | NumberType;

型別 DropdownType = {
  type: 'dropdown';
  options: string[];
  children: string;
};

型別 ColorType = {
  type: 'color';
  defaultValue: string;
};

匯出型別 DetailsItemEditProps=（DropdownType | InputType | ColorType) & SharedType。

uj5u.com熱心網友回復：

考慮這個例子：

import { ReactElement } from 'react' 

型別 LayersElement = {
    tag: 'LayersElement' 
}

export enum LayersItemOptionsEnum {
    OPERATOR,
    HEADER,
}

type sharedTypes = {
    children: string | ReactElement;
};

型別 LayersItemStatic = sharedTypes & {
    label: string;
    option: LayersItemOptionsEnum;
};

型別 LayersItemDynamic = sharedTypes & {
    currentLayer: LayersElement;
};

export type LayersItemProps = (LayersItemDynamic | LayersItemStatic) & sharedTypes;

宣告 var props: LayersItemProps;

props.children // ok

只有children道具是允許的，因為它是聯盟中每個元素的共同道具。

參見最佳通用型別

因為沒有人知道聯盟的哪個元素實際上是被允許的，所以 TS 決定只允許你使用對聯盟的每個元素都是安全的屬性。

考慮一下這個較小的例子：

type LayersItemStatic = { label: string; option: string; }; 型別 LayersItemDynamic = { currentLayer: string; }; 匯出型別 LayersItemProps = LayersItemDynamic | LayersItemStatic 宣告 var props: LayersItemProps。

因為沒有通用的道具，所以不允許你使用任何道具。

我不認為這種型別是正確的：

export type LayersItemProps = (LayersItemDynamic | LayersItemStatic) & sharedTypes

因為LayersItemDynamic | LayersItemStatic被簡化為{}，LayersItemProps基本上等于sharedTypes。

由于你已經在& sharedType中添加了LayersItemDynamic | LayersItemStatic，你需要重寫你的型別LayersItemProps如下：

import { ReactElement } from 'react' 

型別 LayersElement = {
    tag: 'LayersElement' 
}

export enum LayersItemOptionsEnum {
    OPERATOR,
    HEADER,
}

type sharedTypes = {
    children: string | ReactElement;
};

型別 LayersItemStatic = sharedTypes & {
    label: string;
    option: LayersItemOptionsEnum;
};

型別 LayersItemDynamic = sharedTypes & {
    currentLayer: LayersElement;
};

const hasProperty = <Obj, Prop extends string> (obj: Obj, prop: Prop)
    : obj是Obj & Record<Prop, unknown> =>
    Object.prototype.hasOwnProperty.call(obj, prop)。


出口型別LayersItemProps = LayersItemDynamic | LayersItemStatic

const isDynamic = (props: LayersItemProps): props is LayersItemDynamic => hasProperty(props, 'currentLayer')
const isStatic = (props: LayersItemProps): props is LayersItemStatic => hasProperty(props, '標簽')


宣告var props: LayersItemProps;

如果(isDynamic(props)) {
    props.currentLayer // ok
}

如果(isStatic(props)) {
    props.label // ok
    props.option // ok

}

Playground

標籤：

上一篇：<p>我正在拼命地尋找一個影像（它位于應用程式安裝目錄的一個子目錄中）。 我正在使用MVVM和.Net3.5，找到影像路徑并在屬性中回傳一個字串、一個Uri或一個位圖并在xaml中使用它很

下一篇：TypeScript中基于字串的型別的條件引數