TS泛型的使用，类型别名泛型的使用，泛型接口的使用（interface）

最新推荐文章于 2025-06-18 09:39:08 发布

道长道长IOT

最新推荐文章于 2025-06-18 09:39:08 发布

阅读量332

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 typescript

本文链接：https://blog.youkuaiyun.com/m0_56986233/article/details/132186472

本文详细介绍了在TypeScript中如何使用普通泛型、类型别名泛型以及泛型接口，包括基本语法、函数参数和接口的泛型定义，并通过实例演示了其实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TS泛型的使用，类型别名泛型的使用，泛型接口的使用（interface）

1.TS普通泛型的使用

export {}
// 泛型如何去理解 通俗一点
// 泛型其实就是类型的形参，你传什么进去，他就是什么
// T就是一个标识符，其他的标识也可以，但是默认情况下我们写T
function fn<T>(n:T):T{
  return n
}
fn<number>(100)
fn<boolean>(false)
// 上面这段代码也可以这样写
function fn1(n:number):number{
  return n
}
fn1(100)
function fn2(n:boolean):boolean{
  return n
}
fn2(true)


// 也可以传递多个
function fn3<T,G>(n:T,m:G):T{
  return n
}
fn3<number,boolean>(100,true)

2.类型别名泛型的使用

// type ObjType = {name:string,getName:()=>number}

// let obj:ObjType = {
//   name:'何志伟',
//   getName(){
//     return 2
//   }
// }

// 用泛型写可以这样来写
// 还可以再声明一个类型别名来替换他们
// 可以给泛型设置默认值
type ObjType<N,G> = {name:N,getName:()=>G}

let obj:ObjType<string,number> = {
  name:'何志伟',
  getName(){
    return 2
  }
}

3.泛型接口的使用（interface）

// 接口的泛型
// interface Persons{
//   name:string
//   getName:()=>string
// }
// let obj2:Persons = {
//   name:'何志伟',
//   getName:()=>{
//     return 'x'
//   }
// }

// 泛型写法
interface Persons<N,G>{
  name:N
  getName:()=>G
}
let obj2:Persons<string,number> = {
  name:'何志伟',
  getName:()=>{
    return 2
  }
}