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)

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui