chst365's blog chst365's blog
首页
  • Git
  • 网络
  • 操作系统
  • 浏览器
  • webpack
  • JavaScript
  • TypeScript
  • 性能
  • 工程化
  • React
  • 编程题
  • React技术揭秘
  • 算法
  • Node
  • 编码解码
  • NodeJS系列
  • Linux系列
  • JavaScript系列
  • HTTP系列
  • GIT系列
  • ES6系列
  • 设计模式系列
  • CSS系列
  • 小程序系列
  • 数据结构与算法系列
  • React系列
  • Vue3系列
  • Vue系列
  • TypeScript系列
  • Webpack系列
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

chst365

DIV工程师
首页
  • Git
  • 网络
  • 操作系统
  • 浏览器
  • webpack
  • JavaScript
  • TypeScript
  • 性能
  • 工程化
  • React
  • 编程题
  • React技术揭秘
  • 算法
  • Node
  • 编码解码
  • NodeJS系列
  • Linux系列
  • JavaScript系列
  • HTTP系列
  • GIT系列
  • ES6系列
  • 设计模式系列
  • CSS系列
  • 小程序系列
  • 数据结构与算法系列
  • React系列
  • Vue3系列
  • Vue系列
  • TypeScript系列
  • Webpack系列
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 浏览器

  • webpack

  • TypeScript

    • 一、类型基础
    • 二、数据类型
    • 三、接口
    • 四、类
    • 五、类与接口的关系
    • 六、泛型
      • 泛型函数与泛型接口
      • 泛型类与泛型约束
    • 七、类型检查机制
    • 八、高级类型
    • 九、ES6与CommonJS的模块系统
    • 十、使用命名空间
    • 十一、声明合并
    • 十二、如何编写声明文件?
    • 十三、tsconfig配置
    • 十四、编译工具:从ts-loader到Bable
    • 十五、代码检查工具:从TSLint到ESLint
    • 十六、单元测试
    • 十七、TS在react中的使用
    • 什么是TypeScript?
  • 性能

  • 工程化

  • React

  • JavaScript

  • 编程题

  • React技术揭秘

  • 算法

  • 前端
  • TypeScript
chst365
2020-03-29
目录

六、泛型

# 六、泛型

泛型:不预先确定的数据类型,具体的类型在使用的时候才能确定。

# 泛型函数与泛型接口

function log<T>(value: T): T {
    console.log(value);
    return value;
}
log<string[]>(['a', 'b'])
log(['a', 'b'])
// 泛型函数的实现
type Log = <T>(value: T) =>  T
let myLog: Log = log
// 泛型接口
interface LogInterface<T = string> {
    <T>(value: T): T
}
let MyLog: LogInterface  = log 
MyLog('i')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 泛型类与泛型约束

泛型的好处:

  • 函数和类可以轻松的支持多种类型,增强程序的扩展性
  • 不必谢多条函数重载,冗长的联合类型声明,增强代码的可读性
  • 灵活控制类型之间的约束
class Logg<T> {
    run(value: T) {
        console.log(value)
        return value
    }
}
let logg1 = new Logg<number>()
logg1.run(1)
let logg2 = new Logg()
logg2.run('1')

interface Length {
    length: number
}
function logg<T extends Length>(value: T): T {
    console.log(value, value.length)
    return value
}
logg([1])
logg('123')
logg({length: 1})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#语言#TypeScript
上次更新: 2021/04/22, 00:08:06
五、类与接口的关系
七、类型检查机制

← 五、类与接口的关系 七、类型检查机制→

最近更新
01
面试官
03-27
02
this&指针&作用域&闭包
03-27
03
前端
03-27
更多文章>
Theme by Vdoing | Copyright © 2019-2025 chst365 | 豫ICP备17031889号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式