17、泛型学习

1、泛型->动态类型

function fn1(a: number, b: number): Array<number> {
  return [a, b]
}
function fn1(a: string, b: string): Array<string> {
  return [a, b]
}

2、定义函数,(动态类型)不明确类型,可以使用泛型

// 使用泛型优化: 函数名后面跟上<泛型名称> ,一般定义为T(意为type),再把类型赋值给参数
function fn<T>(a: T, b: T): Array<T> { // 返回的类型也为T
  return [a, b]
}
// 推断为number
fn(1, 2) // (简写)function fn<number>(a: number, b: number): number[] (+1 overload)
fn<number>(1, 2) // (全称)
fn(true, false) // function fn<boolean>(a: boolean, b: boolean): boolean[] (+1 overload)

3、除了函数,interface和type都可以使用泛型,泛型个数随意

type C<T, Y> = string | number | T | Y
let cc1: C<boolean, null> = true
let cc2: C<boolean, null> = 'true'
let cc3: C<boolean, null> = 1
let cc4: C<boolean, null> = null

interface Inter<T> {
  msg: T
}
let inter1: Inter<string> = {
  msg: 'interface使用泛型'
}
let inter2: Inter<number> = {
  msg: 0
}

4、其他泛型用法

// *1、泛型支持多个,返回值类型为联合类型
function add<T, Y>(a: T, b: Y): Array<T | Y> {
  return [a, b]
}
add(false, 23) // function add<boolean, number>(a: boolean, b: number): (number | boolean)[]
// *2、泛型也有默认值
function add1<T = number, Y = number>(a: T, b: Y): Array<T | Y> {
  return [a, b]
}
// add1() // 什么都不传,推断为number function add1<number, number>(a: number, b: number): number[]
add1(77, undefined) // 有参,根据参数的类型来判断 function add1<number, undefined>(a: number, b: undefined): (number | undefined)[]

5、实际应用 调接口的地方

泛型.ts

// * XMLHttpRequest不能使用node环境 需要编译为js文件(使用tsc命令)
const axios = {
  // Promise可以接收泛型
  get<T>(url: string): Promise<T> { // return的是Promise,所以接收的是Promise
    return new Promise((resolve, reject) => {
      let xhr: XMLHttpRequest = new XMLHttpRequest() // 调接口
      xhr.open('GET', url) // 发起请求
      xhr.onreadystatechange = () => { // 监听状态变化onreadystatechange
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 请求成功 xhr.responseText是字符串,要转为对象,所以用JSON.parse
          resolve(JSON.parse(xhr.responseText))
        }
      }
      xhr.send(null) // 这个必须写,不然请求无效(无参数,写null)
    })
  }
}

interface Data {
  message: string,
  code: number
}

// axios.get('./data.json').then(res => { // 推断(parameter) res: unknown
//   // unknown不可以使用.操作
//   res. // 无法推断
// })
axios.get<Data>('./data.json').then(res => {
  console.log('进行请求了~', res);  // 可推断
})

data.json

{
  "message":"成功",
  "code":200
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TS学习</title>
</head>
<body>
  <div id="app"></div>
  <script src="./泛型.js"></script>
</body>
</html>

效果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值