TypeScript(十二)泛型、模块

1. 泛型

1.1. 简介

泛型是一种编程语言特性,允许在定义函数、类、接口等使用占位符来表示类型,而不是具体的类型。

泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。

使用泛型的主要目的是为了处理不特定类型的数据,使得代码可以适用于多种类型而不失去类型检查。
泛型的优势:

(1)代码重用 - 可以编写与特定类型你那个无关的通用代码,提高代码的复用性。

(2)类型安全 - 在编译时进行类型检查,避免在运行时出现类型错误。

(3)抽象性 - 允许编写更抽象和通用的代码,适应不同的数据类型和数据结构。

1.2. 泛型标识符

在泛型中,通常使用一些约定俗成的标识符,比如常见的T、U、V等,但实际上你可以使用任何标识符。

(1)T:代表"Type",是最常用的泛型类型参数名。

javascript 复制代码
function identity<T>(arg: T): T {
    return arg;
}

(2)K、V用于标识键(key)和值(Value)的泛型类型参数。

javascript 复制代码
interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

(3)E:用于表示数组元素的泛型类型参数

javascript 复制代码
function printArray<E>(arr: E[]): void {
    arr.forEach(item => console.log(item));
}

(4)R:表示函数返回值的泛型类型参数

javascript 复制代码
function printArray<E>(arr: E[]): void {
    arr.forEach(item => console.log(item));
}

(5)U、V:通常用于表示第二、第三个泛型类型参数

javascript 复制代码
function combine<U, V>(first: U, second: V): string {
    return `${first} ${second}`;
}

1.3. 泛型函数

使用泛型来创建一个可以处理不同类型的函数。

实例:

javascript 复制代码
function identity<T>(arg: T): T {
    return arg;
}
// 使用泛型函数
let result = identity<string>("Hello");
console.log(result); // 输出: Hello
let numberResult = identity<number>(42);
console.log(numberResult); // 输出: 42

解析: 以上例子中,identity 是一个泛型函数,使用 表示泛型类型。它接受一个参数 arg 和返回值都是泛型类型 T。在使用时,可以通过尖括号 <> 明确指定泛型类型。第一个调用指定了 string 类型,第二个调用指定了 number 类型。

1.4. 泛型接口

可以使用泛型来定义接口,使接口的成员能够使用任意类型:

javascript 复制代码
// 基本语法
interface Pair<T, U> {
    first: T;
    second: U;
}
// 使用泛型接口
let pair: Pair<string, number> = { first: "hello", second: 42 };
console.log(pair); // 输出: { first: 'hello', second: 42 }

解析: 这里定义了一个泛型接口 Pair,它有两个类型参数 T 和 U。然后,使用这个泛型接口创建了一个对象 pair,其中 first 是字符串类型,second 是数字类型。

1.5. 泛型类

泛型也可以应用于类的实例变量和方法:

javascript 复制代码
// 基本语法
class Box<T> {
    private value: T; 
    constructor(value: T) {
        this.value = value;
    }
    getValue(): T {
        return this.value;
    }
}
// 使用泛型类
let stringBox = new Box<string>("TypeScript");
console.log(stringBox.getValue()); // 输出: TypeScript

解析: 在这个例子中,Box 是一个泛型类,使用 表示泛型类型。构造函数和方法都可以使用泛型类型 T。通过实例化 Box,我们创建了一个存储字符串的 Box 实例,并通过 getValue 方法获取了存储的值。

1.6. 泛型与默认值

可以给泛型设置默认值,使得在不指定类型参数时能够使用默认类型:

javascript 复制代码
// 基本语法
function defaultValue<T = string>(arg: T): T {
    return arg;
}
// 使用带默认值的泛型函数
let result1 = defaultValue("hello"); // 推断为 string 类型
let result2 = defaultValue(42);      // 推断为 number 类型

说明:这个例子展示了带有默认值的泛型函数。函数 defaultValue 接受一个泛型参数 T,并给它设置了默认类型为 string。在使用时,如果没有显式指定类型,会使用默认类型。在例子中,第一个调用中 result1 推断为 string 类型,第二个调用中 result2 推断为 number 类型。

2. 模块

2.1. 说明

模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

2.2. 模块导出使用关键字export 关键字,语法格式:

javascript 复制代码
// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

javascript 复制代码
import someInterfaceRef = require("./SomeInterface");

实例:

javascript 复制代码
IShape.ts 文件代码:
/// <reference path = "IShape.ts" /> 
export interface IShape { 
   draw(); 
}
Circle.ts 文件代码:
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
}
Triangle.ts 文件代码:
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
estShape.ts 文件代码:
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  
 
function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 
 
drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

执行结果:

Cirlce is drawn (external module)

Triangle is drawn (external module)

相关推荐
GIS程序媛—椰子43 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt