Typescript可选参数绑定

Typescript可选参数绑定

Tags
typescript
description
如何让可选参数绑定在一起传入
更新时间
Last updated January 28, 2022
假设我有如下interface
interface Test{ a: string; b: string; c: string; }
但是有如下要求:
  • b和c是可选的,可以b和c都不传
  • b传入时c必须传入,同样c传入时b必须传入
如果只是简单的写成
interface Test{ a: string; b?: string; c?: string; }
虽然可以满足第一个条件,但是没法限制第二个条件。
interface Test{ a: string; b?: string; c?: string; } // success const t: Test = { a: 'asf', c: 'adf', b: 'asdf', } // success const t1: Test = { a: 'asf', } // still success const t2: Test = { a: 'asf', c: 'adf'
琢磨了一下我们可以写成这样
type Test = { a: string; } & ({b?: never, c?: never} | {b: string, c: string});
这种情况下,当b或c存在的时候ts会选择后者,两个字段就都是必填了
当两者都不存在时会选择前者,两个就都不需要填了。本质上是利用了ts的辨析联合类型的能力。
将这个逻辑抽离出来。最终使用方法如下。
type EitherOrNot<T> = {[P in keyof T]?: never} | T; type Test = { a: string } & EitherOrNot<{b: string, c: string}>; // success const t: Test = { a: 'asf', c: 'adf', b: 'asdf', } // success const t1: Test = { a: 'asf', } // success const t2: Test = { a: 'asf', c: 'adf' }
 

参考文章

Defining interdependent props in Typescript for React Components
using Discriminated Unions. This is not something new or fancy. Just writing because it's not a common pattern for a lot of React Components. For example, let's say you have a date picker component, react-calendar, which provides you the functionality of doing both, selecting just a date or a date-range, which is controlled by the selectRange prop.
Defining interdependent props in Typescript for React Components