开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

联合类型

在前面的课程中，我们使用的类型都是单一的类型。也就是说一个变量只能接收一种类型的数据。今天带领大家学习如何使变量可以接收多种类型的数据。

使用 | 符号写多个类型代表同时支持多个类型

   //单一类型 
   let str:string="Tiga";          //类型已经固定只能是字符串类型
   
   //联合类型
   //可以接收number和string类型
   let cate:string|number=11;
   cate="Tiga"

交叉类型

交叉类型组合多个类型为一个类型类似于上一章同名接口的合并

//C类型同时继承了A 和 B 
type A = {
    name: string
};
type B = {
    age: number
};
type C = A & B
let num: C = {
    name: "bbb",
    age: 30000
}

元组

类似数组但是元组 确切知道包含多少元素已知索引对应类型

//在对应位置处的元素类型不可更改
let num:[number,string]=[1,"Tiga"]

注意：元组依然可以通过数组方法进行操作只不过指定位置处的类型不可以变

枚举

枚举类型也是一种常用类型。在javaScript中是没有枚举的概念的TS帮我们定义了枚举这个类型使用枚举通过enum关键字定义我们的枚举

//默认第一个从0 开始 Top=0  Left=1  Down=2 Right=3
enum Direction {
  Top, Left, Down, Right
}
play(1);
function play(dir: Direction): void {
  switch (dir) {
    case 0:
      console.log("Top");
      break;
    case 1:
      console.log("Left");
      break;
    case 2:
      console.log("Down");
      break;
    case 3:
      console.log("Right");
      break;
    default:
      break;
  }
}

也可以为第一个指定指定一个数值使枚举自增

// Left=9  Down=10 Right=11
enum direction{
     Top=8,
     Left,
     Down,
     Right
}

也可以使用字符串枚举为每个属性指定有意义的字面

由于字符串枚举没有自增长的行为，字符串枚举可以很好的序列化。

enum direction{
     Top="Top",
     Left="Left",
     Down="Down",
     Right="Right"
}

枚举可以混合字符串和数字成员

enum direction{
     Top="Top",
     Left=0,
     Down=1,
     Right=2
}

TS类型推断

在ts中，每个变量有属于自己的类型。在没有明确指出类型的地方ts会对变量类型进行推论。从而为变量进行指定类型

声明变量并初始化时会进行类型推论不需要加类型注解
决定函数返回值时会自动进行类型推论
像一些基本数据类型使用时可以省略掉类型注解，ts推论是非常准确的，但是对于那些声明后并没有初始化的变量还是推荐加上类型注解

TS类型断言

在某些时候你比ts更了解这个变量的类型时，但是ts并没有推论出准确类型就可以使用类型断言强制指定类型。

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误
语法：　　值 as 类型　　或　　<类型>值 value as string value

    //any 临时定义为any 类型就不会报不存在的错误
    const handleScroll = (event:WheelEvent) => {
         let e = event as any;
         let eventDelta = e.wheelDelta || -e.deltaY * 40;
    };

`as const`

是对字面值的断言，与const直接定义常量是有区别的

    // 数组
let a1 = [10, 20] as const;
const a2 = [10, 20];
 
a1.unshift(30); // 错误，此时已经断言常量,数据无法做任何修改
a2.unshift(30); // 通过

类型断言是不具影响力的

在下面的例子中，将 something 断言为 boolean虽然可以通过编译，但是并没有什么用并不会影响结果, 因为编译过程中会删除类型断言

类型断言只是对编译起作用并不会转换数据类型

    function play(aa: any): boolean {
         return aa as boolean;
    }
 
    toBoolean(1);
   // 返回值为 1

TS从入门到精通（四）类型扩展