ts-例子

1.利用具体参数的值决定展示额外的参数b或者c

泛型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 // 利用泛型,推断type的值然后约束参数,注意T 要约束到具体的类型值,否则会为string
// 定义可能的 type 值作为联合类型
type Type = 'a' | 'b'
// 使用联合类型优化 Func 接口
interface Func {
// 当 T 是 'a' 时,接受带有 b 属性的对象
<T extends Type>(props: T extends 'a' ? {type: T, b: number}: {type:T, c: number}): void;
}

// 重载等价于上面的签名调用
interface Func {
// 当 T 是 'a' 时,接受带有 b 属性的对象
<T extends 'a'>({ type, b }: { type: T; b: number }): void;

// 当 T 是 'b' 时,接受带有 c 属性的对象
<T extends 'b'>({ type, c }: { type: T; c: number }): void;
}

// 定义一个符合 Func 接口的函数
const myFunc: Func = (props) => {
// 在这里使用 props.type 和 props.b
console.log(props.type);
};

myFunc({ type: 'b', c: 123});

联合类型:

1
2
3
4
5
6
7
8
9
10
// 联合类型更简单
type aa = {type: 'a', b: number} | {type: 'b', c: number}

// 定义一个符合 Func 接口的函数
const myFunc1 = (props: aa) => {
// 在这里使用 props.type 和 props.b
console.log(props.type);
}; 1

myFunc1({ type: 'd', b: 123}); //error

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!