本书未发布

基本内容

未匹配的标注

使用情景

  • 在定义函数或类的时候, 如果遇到类型不明确的时候, 可以使用泛型

      // T 就是泛型, 他的类型就不确定, 只有在调用的时候, 才能确定
      function fn<T>(a: T): T{
          return a
      }
    
      // 不指定泛型的时候, 会自动进行推断
      fn(10)
    
      // 指定泛型
      fn<string>('hello')
    
      // 泛型可以同时指定多个
      function fn1<T, K>(a: T, b: K): T {
          console.log(b)
          return a
      }
    
      fn1<number, string>(12, 'hello')
    
      let arr: Array<number> = [1, 2, 3]

约束泛型

interface Inter {
    length: number
}

// 表示泛型必须是 Inter 的实现类(子类)
function fn2<T extends Inter>(a: T): number{
    return a.length
}

// 此时传递的参数就必须就有 length 属性, 例如: 如果传递的参数是一个数字的话, 就会报错
fn2('hello')

泛型的情况

// 泛型的几种情况
function join<T>(first: T, second: T) {
  return `${first}${second}`
}

join<string>('a', 'b')

function joinTwo<T, P>(first: T, second: P) {
  return `${first}${second}`
}

joinTwo<string, number>('a', 1)

function joinThree<T>(params: Array<T>) {
  return params
}

joinThree<string>(['a', 'b'])

function joinFour<T>(a: T, b: T): T {
  return a
}

joinFour<string>('a', 'b')

类中使用泛型

class Queue<T> {
    private data = []

    push(item: T) {
        return this.data.push(item)
    }

    pop(): T {
        return this.data.shift()
    }
}

const queue = new Queue<number>()
queue.push(1)

const queue1 = new Queue<string>()
queue1.push('string')

接口中使用泛型

interface KeyValue<T, U> {
    key: T
    value: U
}

let kv1: KeyValue<number, string> = { key: 1, value: 'string' }

let kv2: KeyValue<string, number> = { key: 'string', value: 1 }

// ---
interface Calculate<T> {
 (a: T, b: T): T
}

const sum: Calculate<number> = function (a: number, b: number): number {
  return a
}

sum(1, 2)

// ---
interface Calculate2 {
 <T>(a: T, b: T): T
}

const sum2: Calculate2 = function <T> (a: T, b: T): T {
  return a
}

sum2<number>(1, 2)

// ---
interface Calculate3<T> {
 <U>(a: T, b: T): U
}

const sum3: Calculate3<number> = function <U> (a: number, b: number): U {
  return a as any
}

sum3<number>(1, 2)

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
讨论数量: 0
发起讨论 只看当前版本


暂无话题~