求教一个 TypeScript 类型约束问题，如何根据一个条件生成约束？

Question

TypeScript 如何根据一个条件动态生成约束

我有一个组件，写了一个约束如下:

interface DepartProps extends Omit<CascaderProps, 'value' | 'onChange'> {
  departList?: DepartData[]
  changeType?: 'array' | 'number'
  value?: string | number | number[]
  onChange?: (value?: (string | number) | number[]) => void
}

这个组件会根据changeType的类型来onChange不同的值，现在我的问题是，如何根据changeType来约束onChange的返回值，而不是现在这样笼统的全部返回为(string | number) | number[]

希望效果如下:

 <FormDepart changeType={'number'} departList={departList} onChange={number => ...}/>

 <FormDepart changeType={'array'} departList={departList} onChange={number[] => ...}/>

现在的效果是:

 <FormDepart changeType={'number'} departList={departList} onChange={(string | number) | number[]) => ...}/>

希望不吝赐教！

Answer 1

interface DepartProps<T extends string | number | number[] = string> extends Omit<CascaderProps, 'value' | 'onChange'> {
  departList?: DepartData[]
  changeType?: 'array' | 'number'
  value?: T
  onChange?: (value?: T) => void
}


<FormDepart<number[]> changeType={'array'} departList={departList} onChange={number[] => ...}/>

Answer 2

如果只根据type类型来的话，用联合类型。我之前提问的有人解决了。

https://segmentfault.com/q/10...

Answer 3

type INumber = {
  changeType: 'number';
  onchange: (value: number) => void;
}

type IArray = {
  changeType: 'array';
  onchange: (value: number[]) => void;
}

type ICustom = {
  changeType: 'custom';
  onchange: (value: unknown) => void;
}

type IProps = INumber | IArray | ICustom;

declare function Component(props: IProps): void

Component({
  changeType: 'number',
  onchange: (value: number) => {}
})

Component({
  changeType: 'array',
  onchange: (value: number[]) => {}
})

Component({
  changeType: 'custom',
  onchange: (value: unknown) => {
    // 自己去推断
    (value as string)
  }
})