📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 1. 泛型函数
  • 2. 泛型变量
  • 3. 泛型类型
  • 4. 泛型类
  • 5. 泛型约束
  • 5.1 泛型约束中使用类型参数
  • 5.2 泛型中使用类类型

Was this helpful?

  1. TypeScript 语法

泛型

1. 泛型函数

定义一个 identity 函数

function identity<T>(arg: T): T {
    return arg;
}

给 identity 函数添加了 类型变量T. T 会捕获用户传入的类型,(比如: number),之后 T 就代表这个类型了。

这个版本的 identity函数 叫做泛型函数,因为 T 可以是任意的类型。

泛型函数的两种调用方法:

1. 传入所有的参数,包括类型参数,其中类型参数用 <> 括起来
const output = identity<string>('123');
即明确指定 T 就是 string, 因此会限制 arg 必须为 string 类型。
因此下面的代码会报错:  
const output = identity<string>(123);  因此 123 不是 string 类型,所以会报错。


2. 可以不传类型参数,编译器自己查看 '123' 的类型,自动推算出 T 为 string
const output = identity('123');

2. 泛型变量

想象下以下代码,因为 return 的值必然是个字符串,而 T 不一定是 string, 所以会报错。

function identity<T>(arg: T): T {
    return arg+'123';
}

又或者:

function identity<T>(arg: T): T {
    console.log(arg.length);  // T 类型不一定有 length 属性(T 为 string 时有),所以会报错
    return arg;
}

又因为数组具有 .length 属性,因此可以像下面这样:

function logIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);    // 数组中确定是有length属性的
    return arg;
}

即我们可以把泛型变量T作为类型的一部分,实际类型 T[] 由 T 构成,增加了灵活性。

3. 泛型类型

function identity<T>(arg: T): T {
    return arg;
}

const myIdentity: <T>(arg: T) => T = identity
这段代码其实就是 const myIdentity = identity; 
<T>(arg: T) => T 只是类型描述

const myIdentity: <T>(arg: T) => T = identity 又会等同于 const myIdentity: { <T>(arg: T): T } = identity

因此我们可以定义一个泛型接口:

interface GenericIdentityFn {
    <T>(arg: T): T;
}

function identity<T>(arg: T): T{
    return arg;
}

const myIdentity: GenericIdentityFn = identity

接受参数的泛型接口:

// 接受一个类型参数,作为T
// 这样接口里的其他成员也能知道这个参数的类型
interface GenericIdentityFn<T> {
    (arg: T): T;
}

function identity<T>(arg: T) :T {
    return arg;
}

const myIdentity: GenericIdentityFn<number> = identity;

4. 泛型类

与泛型接口类似

class GenericNumber<T> {
    zeroValue: T;
    add: (x:T, y:T) => T;
}

const myGenericNumber = new GenericNumber<number>();  // 必须传入类型 number
myGenericNumber.zeroValue = 1;
myGenericNumber.add = function(x,y) = { return x + y };

类有静态部分和实例部分,泛型类只能用于实例部分的类型,类的静态属性不能使用这个泛型类型。

5. 泛型约束

首先以下代码会报错:

function logIdentity<T>(arg: T):T {
    console.log(arg.length); // 不一定会有 .length 属性
    return arg;
}

因此我们需要约束类型 T 必须要有 length 属性, 我们可以定义一个接口来描述约束条件,使用接口和extends关键字来实现约束:

interface LengthWise {
    length: number;
}

function identity<T extends LengthWise>(arg: T) :T {
    console.log(arg.length);  // 不会报错,接口限制了类型 T 会有 length 属性
    return arg;
}

此时,要调用 identity, 那么参数必须有 length 属性

5.1 泛型约束中使用类型参数

声明一个类型参数,被另一个类型参数所约束。

function getProperty<T, K extends keyof T>(obj: T, key:K) {
    return obj[key];
}

const x = {a: 1, b :2};

getProperty(x,'a')
getProperty(x,'m')    // m 不是对象 x 的key,因此会报错

关于 keyof:

interface Person {
    name: string;
    age: number;
    location: string;
}

type k1 = keyof Person;    // "name" | "age" | "location"   对象的属性名
type k1 = keyof Person[];    // "length" | "push" | "pop"  数组的属性名

因此 K extends keyof T,则 K 必须是对象 T 的某个属性名

5.2 泛型中使用类类型

Previous函数Next枚举

Last updated 4 years ago

Was this helpful?