typescript语法细节

1.联合类型

1. typescript的类型系统允许我们使用多种运算符，从现有类型中构建新类型
2. 联合类型（Union Type）
   1. 联合类型是由两个或者多个其他类型组成的类型
   2. 表示可以是这些类型中的任何一个值
   3. 联合类型中的每一个类型被称之为联合成员（union‘s members)

let foo: number | string = 'abc'
foo = 123

function printID(id: number | string) {
  if (typeof id == 'string') {
    console.log(id.length)
  } else {
    console.log(id)
  }
}
printID(123)
printID('abc')

2.类型别名

// 类型别名：type
type MyNumber = number
const age: MyNumbe

 - [ ] List item

r = 18
type IdType = number | string
function printID(id: IdType) {
  console.log(id)
}
printID(123)

3.接口的声明

1. type和interface中的区别
   1. type类型使用范围更广，接口类型只能用来声明对象
   2. 在声明对象时，interface可以多次声明
      1. type不允许两个相同的名称的别名同时存在
      2. interface可以多次声明同一个接口名称
   3. interface支持继承
   4. interface可以被类实现
2. 总结
   1. 如果是非对象类型定义使用type，如果是对象类型的声明那么使用interface

// 1.区别一：type类型使用范围更广，接口类型只能用来声明对象
type MyNumber = number
type IdType = number | string
// 2.区别二：在声明对象时，interface可以多次声明
// 2.1 type不允许两个相同的名称的别名同时存在
type PointType1 = {
  x: number
  y: number
}
type PointType1 = {
  z?: number
}

// 2.2. interface可以多次声明同一个接口名称
interface PointType {
  x: number
  y: number
}
interface PointType {
  z?: number
}
const point: PointType = {
  x: 10,
  y: 10,
  z: 200,
}

// 3.interface支持继承
interface IPerson {
  name: string
  age: number
}
interface IKun extends IPerson {
  kouhao: string
}

const ikun1: IKun = {
  kouhao: '你干嘛，哎呦',
  name: 'kobe',
  age: 30,
}

// 4.interface可以被类实现
class Person implements IPerson {}

// 总结：如果是非对象类型定义使用type，如果是对象类型的声明那么使用interface 

4.交叉类型(Intersection Types)

1. 交叉类似表示需要满足多个类型的条件
2. 交叉类型使用 & 符号

// 交叉类型：两种（多种）类型要同时满足
type NewType = number & string

interface IKun {
  name: string
  age: string
}

interface ICoder {
  name: string
  coding: () => void
}
const info: IKun & ICoder = {
  name: 'why',
  age: '18',
  coding: function () {
    console.log('coding')
  },
}

5.类型断言 as

1. 断言的规则
   1. 断言只能断言成更加具体的类型，或者不太具体(any/unknow)类型
   2. TS类型检测来说是正确的，但是这个代码本身不太正确

// 使用类型断言
const imgEl = document.querySelector('.img') as HTMLImageElement
imgEl.src = 'xxx'
imgEl.alt = 'yyy'

// 类型断言的规则：断言只能断言成更加具体的类型，或者不太具体(any/unknow)类型
const age: number = 28
const age2 = age as number
// TS类型检测来说是正确的，但是这个代码本身不太正确
const age3 = age as any
const age4 = age3 as string

6.非空类型断言！

​ 非空类型断言使用的是！，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测

// 定义接口
interface IPerson {
  name: string
  age: number
  friend?: {
    name: string
  }
}
const info: IPerson = {
  name: 'why',
  age: 18,
}
// 访问属性：可选链:?
console.log(info.friend?.name)
// 属性赋值:
//  解决方案一：类型缩小
if (info.friend) {
  info.friend.name = 'kobe'
}
// 解决方案二：非空类型断言(有点危险，只有确保friend一定有值的情况，才能使用)
info.friend!.name = 'kobe'

7、字面量类型的基本使用

// 1.字面量的基本使用
const name = "why";
let age: 18 = 18;
// 2.将多个字面量类型联合起来
type Direction = "left" | "right" | "up" | "down";
const d1: Direction = "left";

// 例子：封装请求方法
type MethodType = "get" | "post";
function request(url: string, method: MethodType) {}
request("http://codercba.com/api/aaa", "get");

// TS细节
const info = {
  url: "xxxx",
  method: "post",
};
// 下面的做法是错误：info.method获取的是string类型
// request(info.url, info.method);

// 解决方案一：info.method进行类型断言
request(info.url, info.method as "post");

// 解决方案二：直接让info对象类型是一个字面量类型
const info1: { url: string; method: "post" | "get" } = {
  url: "xxxx",
  method: "post",
};
request(info1.url, info1.method);

const info2 = {
  url: "xxxx",
  method: "post",
} as const;
// xxxx本身就是string类型
request(info2.url, info2.method);

8、类型缩小

1. 什么是类型缩小
   1. 类型缩小的英文是Type Narrowing
   2. 我们可以通过类似于 typeof padding===‘number’的判断语句，来改变Typescript的执行方法
   3. 在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为缩小（Narrowing）
   4. 而我们编写的typeof padding===‘number’可以称之为类型保护（type guards）
2. 常见的类型保护
   1. typeof
   2. 平等缩小（比如===、!==）
   3. instanceof
   4. in
   5. 等等

// 1.typeof使用最多的
function printID(id: number | string) {
  if (typeof id == "string") {
    console.log(id.length, id.split(""));
  } else {
    console.log(id);
  }
}

// 2.平等缩小 ===/!==：方向类型判断
type Direction = "left" | "right" | "up" | "down";
function switchDirection(direction: Direction) {
  if (direction == "left") {
    console.log("左", "角色向左移动");
  } else if (direction == "right") {
    console.log("右", "角色向右移动");
  } else if (direction == "up") {
    console.log("上", "角色向上移动");
  } else if (direction == "down") {
    console.log("下", "角色向下移动");
  }
}

// instanceof： 传入一个日期，打印日期
function printDate(date: string | Date) {
  if (date instanceof Date) {
    console.log(date.getTime());
  } else {
    console.log(date);
  }
}

//in： 判断是否有某一个属性
interface ISwim {
  swim: () => void;
}
interface IRun {
  run: () => void;
}
function move(animal: ISwim | IRun) {
  if ("swim" in animal) {
    animal.swim();
  } else if ("run" in animal) {
    animal.run();
  }
}
const fish: ISwim = {
  swim: function () {},
};
const dog: IRun = {
  run: function () {},
};