TypeScript学习笔记(5)-联合、交叉、文本类型

联合、交叉、文本类型(字面量类型)

这玩意看名字挺唬人，咱们继续 “深入”了解下，O(∩_∩)O哈哈~。

联合类型和交叉类型优点：

可以更好地处理类型由两个或多个可能的类型组成的情况

文本类型优点：

可以将赋予类型的值限制在少量的选项中

下面咱们具体论道论道~~。

联合类型

啥是联合类型：

联合类型描述的值可以是几种类型之一。

使用场景：

当值不受控制时（例如来自用户输入第三库 Api等情况）。

为什么不用any？

联合类型将赋值限制为联合中的指定类型，而 any 类型没有限制。另一个原因是 Intellisense (智能感知) 支持。

使用语法：

联合类型使用竖线 (|) 分隔每种类型。

具体示例：

/**
 * 定义联合类型
 */
let multiType: number | boolean;
multiType = 20;         // 有效的
multiType = true;       // 有效的
multiType = "twenty";   // 无效的

  保护类型加联合类型使用

function add(x: number | string, y: number | string) {
    if (typeof x === 'number' && typeof y === 'number') {
        return x + y;
    }
    if (typeof x === 'string' && typeof y === 'string') {
        return x.concat(y);
    }
    throw new Error('Parameters must be numbers or strings');
}
console.log(add('one', 'two'));  //输出 onetwo
console.log(add(1, 2));          //输出 3
console.log(add('one', 2));      //输出 错误信息

// css样式中字重 属性 可能是数字 也可能是字符串

const fontWeight: string | number = 700;

什么是交叉类型：

就是组合多个类型形成一个新类型包含原类型的所有属性，交叉类型最常与接口一起使用。

使用语法：

交叉类型使用与号 (&) 分隔每种类型。
比如 type newType = a & b;

举例:比如飞机在天上会飞汽车在地上能跑轮船在海里游。

interface airplane {
    fly: boolean;
}
interface car {
    run: boolean;
}
interface ship {
    swim: boolean;
}

type superVehicle = airplane | car | ship;

let vehicle: superVehicle = {
    fly: true,
    run: true,
    swim: true
}

console.log(vehicle); //输出  { fly: true, run: true, swim: true }

文本类型

字面量是集合类型的更具体的子类型。比如字符串 “Hello Word” 是string 类型，但是 string 不是”Hello Word”。

字面量收缩

使用var 或者 let 声明的变量其内容有无数种可能的值。但使用const声明的变量将永不改变。
从无限数量可能变为有限数量可能得过程称为收缩。

定义字面量类型：

字面量类型以对象、数组、函数或构造函数类型字面量的形式编写，用于将其他类型组合为新类型。

/**
 * 字面量类型 字符串字面量
 * 季节有 春夏秋冬
 */

type season = "spring" | "summer" | "autumn" | "winter"

let nowSeason: season;

nowSeason = "winter"; //正确
nowSeason = "abc"; //错误 不能将类型“"abc"”分配给类型“season”。

/**
 * 数字字面量
 * 60分以上及格
 */
type score = 60 | 70 | 80 | 90 | 100
let myScore: score;
myScore = 90; //正确
myScore = 100; //正确
myScore = 50;   //错误

/**
 * 定义数字字面量类型 并且赋值为1
 */
let myLevel: 0 | 1 | 2 | 3 = 1;
console.log(myLevel); //输出 1