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)

相关推荐
GISer_Jing8 分钟前
前端面试通关:Cesium+Three+React优化+TypeScript实战+ECharts性能方案
前端·react.js·面试
落霞的思绪1 小时前
CSS复习
前端·css
咖啡の猫3 小时前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲5 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5816 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路6 小时前
GeoTools 读取影像元数据
前端
ssshooter7 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry7 小时前
Jetpack Compose 中的状态
前端
dae bal8 小时前
关于RSA和AES加密
前端·vue.js
柳杉8 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化