TypeScript 高级用法

一、运算符

1、可选链式运算符 ?.(其效果相当与if判断)

例如下：

 const list = {
    name: 'mingMing',
    age: '26'
    hobby: ['tableTennis', 'game', 'eat', 'flower']
  }
//1、确定list里面存在hobby（无报错）

//2、list.hobby为undefined/null时，或者后端给我们返回这个值时有时无时，上面遍历的写法会导致控制台（有报错）
  list.hobby.forEach((item) => {
    console.log('item', item)
  })

//3.如果采用可选链式运算符的写法或者是先判断有没有值再进行操作都可以（无报错）如下展示：
  list?.hobby?.forEach((item) => {
    console.log('item', item)
  })

 上述写法list.hobby为undefined/null时，或者后端给我们返回这个值时有时无时，上面遍历的写法会导致控制台有报错时报错信息:

2、非空断言运算符 !（这个运算符可以用在变量名或者函数名之后，用来强调对应的元素是非 null|undefined 的）

function onClick(callback?: () => void) {
  callback!();		// 参数是可选入参，加了这个感叹号!之后，TS编译不报错
}

3、空值合并运算符 ?? （当左侧的操作数为 null 或者 undefined 时，返回其右侧数，否则返回左侧数）

const a = null;
const b = 'Hello, World!';
 
const result = a ?? b;
console.log(result); // 输出: 'Hello, World!'
 
const a = 0;
const b = 'Hello, World!';
 
const result1 = a ?? b; // 0

4、数字分隔符_（方便阅读）

let num:number=1_2_3_456.7_89_0_1 
console.log(num) //123456.78901

二、泛型

  // 普通类型定义
  type Dog<T> = { name: string; age: T }
  // 普通类型使用
  const dog: Dog<number> = { name: 'ww', age: 20 }
  // 类定义
  class Cat<T> {
    private age: T //私有
    constructor(age: T) {
      this.age = age
    }
  }
  // 类使用
  const cat: Cat<number> = new Cat<number>(20) // 或简写 const cat = new Cat(20)
  // 函数定义
  function swipe<T, U>(value: [T, U]): [U, T] {
    return [value[1], value[0]]
  }
  // 函数使用
  swipe<Cat<number>, Dog<number>>([cat, dog]) // 或简写 swipe([cat, dog])

1、交叉类型 T & U

interface Ant:{
    name:string
    age:number
  }
  interface Dog:{
    weight:string
    hobby:array<string>
  }
  const flyAnt:Ant & Fly={
    name:'小黄',
    age:18,
    weight:'10kg',
    hobby:['打篮球','踢足球']
  }

2、联合类型 T | U

  let stringNumber:string|number = 123
  stringOrNumber =''

3、关键字 （约束类型）

  // 语法：T extends K(T是否能赋值给K)

  type Exclude<T, U> = T extends U ? never : T