『TypeScript』联合类型、类型别名、交叉类型

1. 联合类型

联合类型通常与 null 和 undefined 一起使用,主要是运用 | 符号,可以成为这个任意一个类型;

const a = (name: string | undefined) => {

}
a("str"); // ok
a(undefined); // ok

2. 类型别名

关键字 type

类型别名用来给一个类型起个新名字。

我们通常在类型别名前加一个大写的 ,可以表示这是一个类型别名。

type TMsg= string | string[];

let greet = (msg: TMas) => {
  // ...
};

1. 对象类型别名

type Data = {
    name: string,
    age: number,
    flag?: boolean
}
function setData(data: Data){
    console.log(data.name)
    console.log(data.age)
    console.log(data.flag)
}
setData({name:'haha', age: 18, flag:: true})

2. 有规律的对象类型别名

type Tobj = {
    [name: string]: string
}
let obj: Tobj = {
    "a":"aa",
    "a2":"aaa",
    "a3":"aaaa",
    "a4":"aaaaa",
}

3. 交叉类型

在 TpeScript中交叉类型是将多个类型合并为一个类型,通过 & 可以将多个现有的多种类型叠加到一起成为一个类型,它有所需的所有类型的特性。

type TOne = {x: number};
type TAll = TOne & {y: string};

let typeObj: TAll = {
    x: 1,
    y: 'str'
}

当然,也可以添加 可选属性 等等,这些 TypeScript 都是支持的。

        1. 同名基础类型属性的合并

interface X {
    a: string;
    x: string;
}

interface Y {
    a: number;
    y: string
}

type XY = X & Y;
type YX = Y & X;

let xy: XY;
let yx: YX;
xy = { a: 1, x: "x", y: "y" }; // error Type 'number' is not assignable to type 'never'.
yx = { a: 'a', x: 'x', y: 'y' } // error Type 'string' is not assignable to type 'never'.

我们可以看到 接口 Y 都有共同的成员 ,一个是 string 一个是 number ,此时 XY YX  中的 a 成员混入之后, a 会变成 naver 类型。

2. 同名非基础类型属性的合并

interface IA { x: {aa: boolean} };
interface IB { x: {bb: number} };
interface IC { x: {cc: string} };

type TAbc =  IA & IB & IC;

let abc: TAbc = {
    x:{
        aa: true,
        bb: 123,
        cc: 'str'
    }
}
// 完全ok aa, bb ,cc 缺一不可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值