TypeScript - 泛型接口

泛型接口

在 TypeScript 中，泛型接口类似于接口，但它使用一个或多个类型参数进行定义。这些类型参数允许接口与不同的数据类型一起重用，同时仍然强制执行类型安全性和一致性。

TypeScript 中的接口是一种定义对象或类结构的方法。它指定了对象或类应该具有的预期格式，从而可以确保代码中的一致性和类型安全性。

语法

您可以按照以下语法定义泛型接口。

interface IGeneric<T> {
    value1: T;
    value2: T;
}

在上述语法中，'IGeneric' 是一个类型化接口，它接受自定义数据类型。在接口中，我们使用类型 'T' 作为属性 value1 和 value2 的值。

示例

在下面的代码中，我们创建了带有自定义类型 'T' 的 'IGeneric' 接口。它具有类型为 'T' 的 value1 和 value2 属性。

接下来，我们定义了 IGeneric 接口类型的 'obj' 对象，并使用数字数据类型作为接口的泛型类型。之后，我们在输出中打印对象的 'value1' 属性的值。

// Generic interface
interface IGeneric<T> {
    value1: T;
    value2: T;
}

// Object of generic interface
let obj: IGeneric<number> = {
    value1: 10,
    value2: 20
};

console.log(obj.value1);

编译后，它将生成以下 JavaScript 代码

// Object of generic interface
let obj = {
    value1: 10,
    value2: 20
};
console.log(obj.value1);

输出

上述示例代码的输出如下：

示例

在此代码中，我们使用 'T' 和 'U' 两种数据类型与 'IGeneric' 接口。接口中 value1 属性的类型为 'T'，value2 属性的类型为 'U'。

接下来，我们定义了具有数字和字符串自定义数据类型的接口类型的 'obj' 对象。

// Generic interface
interface IGeneric<T, U> {
    value1: T;
    value2: U;
}

// Define object with a generic interface
let obj: IGeneric<number, string> = {
    value1: 10,
    value2: "Hello"
};

console.log(obj.value2);

编译后，它将生成以下 JavaScript 代码

// Define object with a generic interface
let obj = {
    value1: 10,
    value2: "Hello"
};
console.log(obj.value2);

输出

上述示例代码的输出如下：

Hello

示例

下面的示例与前一个示例非常相似，但 'IGeneric' 接口包含 merge() 方法，该方法采用类型为 'U' 的参数并返回类型为 'U' 的值。

在定义 'obj' 对象时，我们使用了数字和字符串数据类型与接口。这意味着 merge() 方法将采用两个字符串参数，并返回一个字符串值。

在输出中，代码打印了连接的字符串，我们将其作为 merge() 方法的参数传递。

// Generic interface
interface IGeneric<T, U> {
    value1: T;
    // method that returns the value of type U
    merge: (a: U, b: U) => U;
}

// Define object with a generic interface
let obj: IGeneric<number, string> = {
    value1: 10,
    merge: (a, b) => a + b
};

console.log(obj.merge("Hello", "world!")); // Hello world!

编译后，它将生成以下 JavaScript 代码

// Define object with a generic interface
let obj = {
    value1: 10,
    merge: (a, b) => a + b
};
console.log(obj.merge("Hello", "world!")); // Hello world!

输出

Helloworld!

泛型接口作为函数类型

开发人员还可以将泛型接口用作函数类型。这使您能够在各种类型和场景中使用相同的函数接口，从而确保类型安全，而不会牺牲灵活性。

示例

在下面的代码中，'func_interface' 接受泛型类型 T 和 U。它定义了函数的结构，该函数采用类型为 'T' 的参数并返回类型为 'U' 的值。

接下来，我们定义了返回字符串长度的函数表达式，并将其存储在 'stringToLength' 变量中。函数表达式的类型使用带有字符串和数字数据类型的泛型接口定义。

类似地，我们定义了另一个将数字转换为字符串的函数，其类型为带有字符串和数字数据类型的 func_interface。

接下来，我们调用这些函数并在控制台中打印它们的输出。

// Define a generic interface for a function
interface func_interface<T, U> {
    (input: T): U;
}

// A specific function that matches the func_interface interface
const stringToLength: func_interface<string, number> = (input) => {
    return input.length;
};

// Using the function
const result = stringToLength("Hello, TypeScript!"); // returns 18
console.log(result);

// Another function that matches the func_interface interface
const numberToString: func_interface<number, string> = (input) => {
    return `Number: ${input}`;
};

// Using the second function
const output = numberToString(123); // returns "Number: 123"
console.log(output);

编译后，它将生成以下 JavaScript 代码

// A specific function that matches the func_interface interface
const stringToLength = (input) => {
    return input.length;
};
// Using the function
const result = stringToLength("Hello, TypeScript!"); // returns 18
console.log(result);
// Another function that matches the func_interface interface
const numberToString = (input) => {
    return `Number: ${input}`;
};
// Using the second function
const output = numberToString(123); // returns "Number: 123"
console.log(output);

输出

18
Number: 123

简而言之，泛型接口允许开发人员使用多个数据类型重用接口。泛型接口可以用作对象或函数类型，允许使用不同的结构重用单个函数或对象。

打印页面