TypeScript（七）泛型、声明合并、扩展阅读

最新推荐文章于 2022-06-16 11:48:47 发布
最新推荐文章于 2022-06-16 11:48:47 发布
阅读量917 收藏 2
点赞数 2
分类专栏： 前端工程师1——汇总 前端工程师8——TypeScript、Vite 文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43456781/article/details/120960239
版权

TypeScript（七）泛型、声明合并、扩展阅读

文章目录

  • 网址：https://ts.xcatliu.com/

1. 泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

简单的例子

首先，我们来实现一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值：

function createArray(length: number, value: any): Array<any> {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

上例中，我们使用了之前提到过的数组泛型来定义返回值的类型。

这段代码编译不会报错，但是一个显而易见的缺陷是，它并没有准确的定义返回值的类型：

Array<any> 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 value 的类型。

这时候，泛型就派上用场了：

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

上例中，我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了。

接着在调用的时候，可以指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算出来：

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

多个类型参数

定义泛型的时候，可以一次定义多个类型参数：

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

上例中，我们定义了一个 swap 函数，用来交换输入的元组。

泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);
    return arg;
}

// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.

上例中，泛型 T 不一定包含属性 length，所以编译的时候报错了。

这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

上例中，我们使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状，也就是必须包含 length 属性。

此时如果调用 loggingIdentity 的时候，传入的 arg 不包含 length，那么在编译阶段就会报错了：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

loggingIdentity(7);

// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.

多个类型参数之间也可以互相约束：

function copyFields<T extends U, U>(target: T, source: U): T {
    for (let id in source) {
        target[id] = (<T>source)[id];
    }
    return target;
}

let x = { a: 1, b: 2, c: 3, d: 4 };

copyFields(x, { b: 10, d: 20 });

上例中，我们使用了两个类型参数，其中要求 T 继承 U，这样就保证了 U 上不会出现 T 中不存在的字段。

泛型接口

之前学习过，可以使用接口的方式来定义一个函数需要符合的形状：

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

当然也可以使用含有泛型的接口来定义函数的形状：

interface CreateArrayFunc {
    <T>(length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

进一步，我们可以把泛型参数提前到接口名上：

interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

注意，此时在使用泛型接口的时候，需要定义泛型的类型。

泛型类

与泛型接口类似，泛型也可以用于类的类型定义中：

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; };

泛型参数的默认类型

在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

参考

2. 声明合并

如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型：

函数的合并

之前学习过，我们可以使用重载定义多个函数类型：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

接口的合并

接口中的属性在合并时会简单的合并到一个接口中：

interface Alarm {
    price: number;
}
interface Alarm {
    weight: number;
}

相当于：

interface Alarm {
    price: number;
    weight: number;
}

注意，合并的属性的类型必须是唯一的：

interface Alarm {
    price: number;
}
interface Alarm {
    price: number;  // 虽然重复了，但是类型都是 `number`，所以不会报错
    weight: number;
}
interface Alarm {
    price: number;
}
interface Alarm {
    price: string;  // 类型不一致，会报错
    weight: number;
}

// index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type.  Variable 'price' must be of type 'number', but here has type 'string'.

接口中方法的合并，与函数的合并一样：

interface Alarm {
    price: number;
    alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}

相当于：

interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}

类的合并

类的合并与接口的合并规则一致。

参考

  • Declaration Merging（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Declaration Merging.html)）

3. 扩展阅读

此处记录了官方手册（中文版）中包含，但是本书未涉及的概念。

我认为它们是一些不重要或者不属于 TypeScript 的概念，所以这里只给出一个简单的释义，详细内容可以点击链接深入理解。

  • Never（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Basic Types.html#never)）：永远不存在值的类型，一般用于错误处理函数
  • Variable Declarations（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Variable Declarations.html)）：使用 let 和 const 替代 var，这是 ES6 的知识
  • this：箭头函数的运用，这是 ES6 的知识
  • Using Class Types in Generics（中文版）：创建工厂函数时，需要引用构造函数的类类型
  • Best common type（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Type Inference.html#最佳通用类型)）：数组的类型推论
  • Contextual Type（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Type Inference.html#上下文类型)）：函数输入的类型推论
  • Type Compatibility（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Type Compatibility.html)）：允许不严格符合类型，只需要在一定规则下兼容即可
  • Advanced Types（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced Types.html#交叉类型（intersection-types）)）：使用 & 将多种类型的共有部分叠加成一种类型
  • Type Guards and Differentiating Types（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced Types.html#类型保护与区分类型（type-guards-and-differentiating-types）)）：联合类型在一些情况下被识别为特定的类型
  • Discriminated Unions（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced Types.html#可辨识联合（discriminated-unions）)）：使用 | 联合多个接口的时候，通过一个共有的属性形成可辨识联合
  • Polymorphic this types（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced Types.html#多态的this类型)）：父类的某个方法返回 this，当子类继承父类后，子类的实例调用此方法，返回的 this 能够被 TypeScript 正确的识别为子类的实例。
  • Symbols（中文版）：新原生类型，这是 ES6 的知识
  • Iterators and Generators（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Iterators and Generators.html)）：迭代器，这是 ES6 的知识
  • Namespaces（中文版）：避免全局污染，现在已被 ES6 Module 替代
  • Decorators（中文版）：修饰器，这是 ES7 的一个提案
  • Mixins（中文版）：一种编程模式，与 TypeScript 没有直接关系，可以参考 ES6 中 Mixin 模式的实现
ChrisP3616
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Ts基于泛型`＜T＞`的进阶使用
chenweiqiang77的博客
07-18 4949
这里可以注意到我们不得不多次使用类型断言。假若我们一旦检查过类型，就能在之后的每个分支里清楚地知道pet的类型的话就好了。TypeScript里的类型保护机制让它成为了现实。类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。要定义一个类型保护，我们只要简单地定义一个函数，它的返回值是一个类型谓词}在这个例子里，就是类型谓词。谓词为这种形式，必须是来自于当前函数签名里的一个参数名。每当使用一些变量调用isFish注意TypeScript不仅知道在if分支里pet是Fish。...
TypeScript 中的高级类型（联合、交叉、泛型、映射类型）
最新发布
wxid_mtnujb6ipc0322的博客
12-19 1125
TypeScript 中的高级类型为开发人员提供了更多强大的工具，用于处理复杂的类型场景。
TypeScript手册翻译系列6-泛型
weixin_34129696的博客
10-04 129
为什么80%的码农都做不了架构师？>>> ...
TypeScript-类和接口、类和泛型、接口合并现象
lihui61357457的博客
05-26 635
详情可见 1.类和接口 1.类"实现"接口 interface PersonInterface { name:string; say():void; } // 只要实现的某一个接口, 那么就必须实现接口中所有的属性和方法 class Person implements PersonInterface{ name:string = 'lnj'; say():void{ console.log(`我的名字叫:${this.name}`); } } let
angular 4--error TS2403
Running_FE的博客
06-14 438
解决方案：1.  cnpm install typescript@~2.7.22. tsconfig.json 加入“skipLibCheck”： true
TS 泛型
FYSGXFZ的博客
06-16 5612
在ts中理解泛型的基础是理解集合。ts语言是类型驱动开发，在编程解决问题的时候，我们需要反向思考编程，接受实现的指引，然后推演类型。
零基础入门TypeScript详细教程
12-15
5. 声明合并（Declaration Merging）：TypeScript允许将多个声明合并到单个标识符，如接口或模块。 四、类型系统 1. 类型断言（Type Assertions）：当编译器无法确定类型时，可以使用类型断言来明确指定类型，如`...
TypeScript学习
02-12
TypeScript 一直在跟进 JavaScript 的新特性，如 async/await、装饰器、元组、nullish coalescing operator（空合并运算符）等，使得开发者能够提前使用和测试新语法。 通过深入学习 TypeScript，开发者不仅可以...
TypeScript 4.0 使用手册.pdf.7z
06-02
TypeScript 4.0引入了一些新的编译选项，以及对编译API的扩展，以满足不同开发需求： - **--outDir和--rootDir的交互**: 优化了这两个选项的组合使用，使得项目结构的管理更为方便。 - **--incremental编译**: ...
typescript-中文手册
03-02
扩展运算符（...）在 TypeScript 中用于复制或合并数组和对象。在函数调用时，它可以将数组展开为参数列表；在对象合并时，它可以帮助我们合并两个对象的属性。 ### 10. 编译配置与工具 TypeScript 提供了 ...
typescript-for-javascript-developers
03-26
TypeScript是JavaScript的一个扩展，由Microsoft开发并维护。它引入了类型系统，允许在编译时进行错误检测，减少了运行时错误。此外，TypeScript支持ES6及以后的特性，如箭头函数、Promise、模板字符串等，使开发者...
TypeScript 泛型<T>使用整理
天马3798
06-28 1万+
一、介绍 相C#和Java等以上，TypeScript可以使用泛型来创建可重用的组件。支持当前数据类型，同时也能支持未来的数据类型。扩展灵活。 二、泛型的定义、使用 使用泛型可以创建泛型函数、泛型接口，泛型类 1.使用泛型变量 //泛型变量的使用 function identity(arg:T):T{ console.log(typeof arg); return arg
TypeScript进阶篇 --- 声明合并
qq_41914181的博客
11-16 692
声明合并 如果定义了两个相同名字的函数、接口或类，那么他们会合并成一个类型： 函数的合并 我们可以使用重载定义多个函数类型： function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): number | string { if (typeof x === 'number') { re
TypeScript里面的泛型
前端精髓
12-15 674
泛型 function createArray<T>(length:number, value: T):T[] { let result = [] for(let i = 0; i < length; i++) { result.push(value) } return result } createArray<string>(4, 'x')...
ts构造一个类型，将T的所有属性设置为可选Partial
chaogaoxiaojifantong的博客
05-31 4468
使用 Partial interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) { return { ...todo, ...fieldsToUpdate }; } const todo1 = { title: "organize desk", description: "clear clutte
一文读懂 TypeScript 泛型及应用
奎特尔星球
06-09 888
创建了一个 “重学TypeScript” 的微信群，想加群的小伙伴，加我微信"semlinker"，备注重学TS。已出 TS 系列文章 40篇。觉得 TypeScri...
typescript高阶特性——合并类型(&)
weixin_50789156的博客
05-24 3571
typescript高阶特性一 —— 合并类型(&)
一文搞懂 TS 泛型，让你头不再晕
热门推荐
semlinker的博客
06-21 4万+
觉得 TypeScript 泛型有点难，想系统学习 TypeScript 泛型相关知识的小伙伴们看过来，本文从八个方面入手，全方位带你一步步学习 TypeScript 中泛型，详细的内容大纲请看下图： 一、泛型是什么 软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。 在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样
Typescript 基础进阶(三) — 泛型拓展(一)
Web_boom的博客
06-16 583
这是学习 的基础进阶的第三章节，我将会把我学习到的知识总结起来供大家参考。之前已经学习了泛型的基本用法，接下来我们拓展一下对于泛型的其他知识点。在 TypeScript 2.8 中引入了条件类型，使得我们可以根据某些条件得到不同的类型，这里所说的条件是类型兼容性约束。尽管以上代码中使用了 关键字，也不一定要强制满足继承关系，而是检查是否满足结构兼容性。条件类型有点类似三元表达式，根据真假从而在两种类型中选择其一： 上述代码的意思是：若 能够赋值给 ，那么类型是 ，否则为 。在 中， 操作符可以用来
typescript的泛型
09-16
泛在TypeScript中是一种特性，它允许我们在定义函数、接口或类时不预先指定具体的类型，而是在使用时手动指定类型。它可以帮助我们在编写可重用的代码时增加类型的安全性和灵活性。 在TypeScript中，使用尖括号（< >）来表示泛型，并在类名、函数名或接口名后面使用泛型变量来表示类型参数。例如，我们可以定义一个泛型函数来实现数组元素的反转： ```typescript function reverse<T>(array: T[]): T[] { return array.reverse(); } const numbers = [1, 2, 3, 4, 5]; const reversedNumbers = reverse(numbers); // [5, 4, 3, 2, 1] const names = ["Alice", "Bob", "Charlie"]; const reversedNames = reverse(names); // ["Charlie", "Bob", "Alice"] ``` 在上面的例子中，泛型变量`T`表示类型参数，它可以在函数体内部和函数的参数类型中使用。 除了函数，我们还可以使用泛型来定义类和接口。例如，我们可以创建一个泛型类`Box`来存储不同类型的值： ```typescript class Box<T> { private value: T; constructor(value: T) { this.value = value; } getValue(): T { return this.value; } } const numberBox = new Box<number>(42); console.log(numberBox.getValue()); // 42 const stringBox = new Box<string>("Hello"); console.log(stringBox.getValue()); // "Hello" ``` 上面的例子中，泛型变量`T`可以在类的成员变量类型、构造函数参数类型和方法返回值类型中使用。 总结来说，TypeScript的泛型提供了一种灵活的方式来增加代码的可重用性和类型安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ChrisP3616

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值