TypeScript与JavaScript不同之处系列 ===; 泛型

Posted 2022-03-12 刘翾

本系列目的: 列出TypeScript与javascript的不同点, 缩小文档内容, 提高学习速度. 原文档地址: https://www.tslang.cn/index.html

全系列目录

• 1.基础类型 https://blog.csdn.net/c_kite/article/details/85232021
• 2.接口 https://blog.csdn.net/c_kite/article/details/85262016
• 3.类 https://blog.csdn.net/c_kite/article/details/85274189
• 4.函数 https://blog.csdn.net/c_kite/article/details/85283691
• 5.泛型 https://blog.csdn.net/c_kite/article/details/85335913
• 6.枚举 https://blog.csdn.net/c_kite/article/details/85337336
• 7.类型推论, 类型兼容性 https://blog.csdn.net/c_kite/article/details/85380924
• 8.高级类型 https://blog.csdn.net/c_kite/article/details/85457753
• 9.命名空间, 三斜线指令 https://blog.csdn.net/c_kite/article/details/85524576

文章目录

• 全系列目录
• 1. 泛型
• • 1.1. 简单使用
  • 1.2. 泛型类型
  • 1.3. 泛型类
  • 1.4. 泛型约束

1. 泛型

1.1. 简单使用

泛型解决的问题: 一种方法使返回值的类型与传入参数的类型是相同的. 下面是小例子:

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


// 有两种使用方法
// 1.
let output = identity<string>("myString");  // 传入所有的参数，包含类型参数

// 2. 省略类型, 编辑器类型推断, 取参数的类型
let output = identity("myString");



-------------------------------


// 如果想要表达一个T类型的数组, 如下面的例子
function loggingIdentity<T>(arg: T[]): T[] 
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;

// 或者
function loggingIdentity<T>(arg: Array<T>): Array<T> 
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;

1.2. 泛型类型

如果想要一个变量表示泛型函数可以如下面的例子:

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


let myIdentity: <T>(arg: T) => T = identity;

// 或者

let myIdentity: <T>(arg: T): T = identity;


-----------------------------------------------

// 泛型接口
interface GenericIdentityFn 
    <T>(arg: T): T;


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


let myIdentity: GenericIdentityFn = identity;

// 或者

let myIdentity: GenericIdentityFn<number> = identity; // 这里传入了number就锁定了之后代码里使用的类型

1.3. 泛型类

这个和函数差不多, 见下面例子

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


let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y)  return x + y; ;

1.4. 泛型约束

相比于操作any所有类型，我们想要限制函数去处理任意带有属性的所有类型。 只要传入的类型有这个属性，我们就允许，就是说至少包含这一属性。 因此, 为了解决这种情况我们可以采用extend关键字, 如下面例子:

interface Lengthwise 
    length: number;


function loggingIdentity<T extends Lengthwise>(arg: T): T 
    console.log(arg.length);  // 现在我们可以处理带有length属性的变量
    return arg;


loggingIdentity(3);  // Error, 3不含有length属性
loggingIdentity(length: 10, value: 3); // ok