面试题-在ts中有两个类型,一个是a,一个是b,这两个联合起来就是c,如何实现联合

在 TypeScript 中,若要将两个类型 a 和 b 联合成一个新类型 c,可以使用 联合类型(Union Type) 或 交叉类型(Intersection Type),具体取决于你的需求:

一、联合类型(Union Type,a | b

表示值可以是 a  b 类型中的任意一种。或者是全部

type U = A | B;  // 联合类型:可以是 A 或 B 或两者
type I = A & B;  // 交叉类型:必须同时满足 A 和 B
type A = string;
type B = number;
type C = A | B; // C 可以是 string 或 number

let value: C = "hello"; // 合法
value = 123;           // 合法

// value = true;      // 错误:boolean 不是 C 的成员

type F = {name: string}
type H = {age: number}
type O = F|H
const g:O = {name:"888"}
const g:O = {age:888}
const g:O = {name:"888",age:888} 
应用场景
  • 函数参数支持多种类型:
    function printValue(value: string | number) {
      console.log(value);
    }
    
  • 处理可能为 null 或 undefined 的值:
    type MaybeString = string | null | undefined;
    

二、交叉类型(Intersection Type,a & b

表示值必须同时满足 a  b 类型的约束。

语法
type C = A & B;
示例
type A = { name: string };
type B = { age: number };
type C = A & B; // C 必须同时有 name 和 age 属性

let person: C = {
  name: "Alice",
  age: 30
}; // 合法

// 错误示例:
// let invalid: C = { name: "Bob" }; // 缺少 age 属性
应用场景
  • 合并多个接口的属性:
    interface Logger { log: (msg: string) => void }
    interface Validator { validate: (data: any) => boolean }
    
    type LoggerValidator = Logger & Validator; // 同时实现两个接口
    
  • 扩展已有类型:
    type User = { id: number } & { name: string };
    

三、联合类型 vs 交叉类型

特性 | 联合类型(A | B | 交叉类型(A & B |
|------------------|------------------------------|------------------------------|
值的类型 | 可以是 A 或 B | 必须同时满足 A 和 B |
适用场景 | 参数 / 变量支持多种类型 | 合并多个类型的属性 / 方法 |
类型兼容性 | 更宽松(只要符合其中一种) | 更严格(必须符合所有) |
示例 | string | number | { name: string } & { age: number } |

四、高级用法

1. 联合类型的分配性

当泛型与联合类型结合时,TypeScript 会自动将泛型应用于联合类型的每个成员:

type ToArray<T> = T extends any ? T[] : never;
type StringOrNumArray = ToArray<string | number>; // string[] | number[]
2. 交叉类型的冲突处理

当合并的类型存在冲突属性时,结果类型可能为 never

type X = { a: string };
type Y = { a: number };
type Z = X & Y; // Z 的 a 属性为 string & number(即 never)

五、常见应用场景

1. 函数重载
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
  return value;
}
2. 可选属性与必选属性的组合
type Base = { id: number };
type OptionalProps = { name?: string; age?: number };
type User = Base & OptionalProps; // 必须有 id,name 和 age 可选

总结

根据需求选择合适的联合方式:

  • 使用 A | B:当值可以是多种类型中的任意一种时。
  • 使用 A & B:当值需要同时满足多个类型的约束时。

// 联合类型
type C1 = string | number;

// 交叉类型
type C2 = { name: string } & { age: number };

// 使用示例
let value1: C1 = 123;
let value2: C2 = { name: "Alice", age: 30 };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天吃饭的羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值