带接口的typescript中的条件布尔类型

8xiog9wr  于 2022-12-24  发布在  TypeScript
关注(0)|答案(2)|浏览(135)

我该如何写条件布尔类型呢?

export interface Props {
  editable: boolean;
  position: { editable: true } ? Sheets.Matrix : never;
  value: string;
  classNames?: string;
  textType?: "bold" | "editing" | "normal";
  onChange?: (val: Sheets.SaveData) => void;
}

我用这样的 prop

const SheetsCell: React.FC<MainProps> = ({
  editable,
  value,
  textType = "normal",
  classNames = "",
  position,
  ...

这里,如果某个东西是可编辑的,我希望位置的类型是Sheets.Matrix,否则,位置不是必需的。

fae0ux8s

fae0ux8s1#

一种方法是使用接口和交集运算符(&)。
可以使用交叉点类型,该类型将多个类型合并为一个类型。

interface Props {
  value: string;
  classNames?: string;
  textType?: "bold" | "editing" | "normal";
  onChange?: (val: number) => void;
}

type MainProps = Props & {
  editable: true;
  position: number; 
} | Props & {
  editable: false;
  position?: number; 
};

上述类型MainProps强制editable在一种情况下为true,在另一种情况下为false。如果editabletrue,则存在位置属性,如果为false,,则存在位置属性,但不需要。
unions用于生成可以是两个值之一的类型。MainProps可以是两个类型之一(都是与Props类型的交集)。
这里是Playground链接

luaexgnf

luaexgnf2#

您可以使用类型别名来代替接口,例如:

type Props = { 
  editable: true;
  position: Sheets.Matrix;
} | { 
  editable: false;
};

const testFalse: Props = { // position not required
  editable: false
}
    
const testTrue: Props = { // position mandatory
  editable: true,
  position: MatrixEnum
}

相关问题