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

簡而言之，泛型介面允許開發人員使用多個數據型別重用介面。泛型介面可以用作物件或函式型別，允許使用不同的結構重用單個函式或物件。

列印頁面