資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在TypeScript中建立函式過載？
函式或方法過載允許開發者建立多個同名函式。每個函式的引數數量相同，但資料型別不同。此外，過載函式的返回型別也可以不同。
函式過載是面向物件程式設計的概念。TypeScript也支援OOP，因此我們可以輕鬆地在TypeScript中實現函式過載。此外，函式過載提供了程式碼可重用性，並幫助開發者提高程式碼可讀性。
讓我們透過現實生活中的例子來了解函式過載的用法。例如，你建立了一個函式，它接受一個字串作為引數並返回字串的長度。假設我們想傳遞一個數字作為引數；那麼，我們需要透過宣告一個同名的新函式並接受數字作為引數來過載該函式。
語法
使用者可以遵循以下語法來過載函式。
function function1(param1: string): number;
function function1(param1: number): number;
function function1(param1: any): any {
// function body
}
在上面的語法中，我們過載了fuction1。使用者可以觀察到，它在第一個宣告中接受字串型別引數，在第二個宣告中接受數字型別引數。
之後，我們需要在定義函式時使用任何型別的引數和返回型別，以支援數字和字串兩種型別。
示例
在下面的示例中，getStrLen() 函式透過引數型別進行了過載。getStrLen() 函式可以接受字串或數字作為引數，並返回表示字串長度的數值。
使用者可以看到我們如何使用 toString() 方法將數值轉換為字串，並透過 length 屬性獲取其長度。
function getStrLen(str: string): number;
function getStrLen(str: number): number;
function getStrLen(str: any): any {
// if the parameter is the number type, convert it to the string.
if (typeof str != "string") {
str = str.toString();
}
let length = str.length;
return length;
}
// calling the functions with string and number parameters.
console.log("The string length is " + getStrLen("TutorialsPoint "));
console.log("The length of number is " + getStrLen(10));
編譯後，將生成以下JavaScript程式碼：
function getStrLen(str) {
// if the parameter is the number type, convert it to the string.
if (typeof str != "string") {
str = str.toString();
}
var length = str.length;
return length;
}
// calling the functions with string and number parameters.
console.log("The string length is " + getStrLen("TutorialsPoint "));
console.log("The length of number is " + getStrLen(10));
輸出
上述程式碼將產生以下輸出：
The string length is 19 The length of number is 2
示例
在這個例子中，我們使用嚴格相等運算子比較作為引數傳遞的值。使用者可以看到 compareValues() 函式接受三個數值或三個字串值。
之後，我們根據三個引數值比較的結果返回布林值。
function compareValues(value1: number, value2: number, value3: number): boolean;
function compareValues(value1: string, value2: string, value3: string): boolean;
function compareValues(value1: any, value2: any, value3: any): any {
if (value1 === value2 && value2 === value3) {
return true;
}
return false;
}
console.log("Are 10, 20, and 30 same? " + compareValues(10, 20, 30));
console.log("Are 10, 10, and 10 same? " + compareValues(10, 10, 10));
console.log(
"Are all three strings same? " +
compareValues("TypeScript", "TypeScript", "TypeScript")
);
編譯後，將生成以下JavaScript程式碼：
function compareValues(value1, value2, value3) {
if (value1 === value2 && value2 === value3) {
return true;
}
return false;
}
console.log("Are 10, 20, and 30 same? " + compareValues(10, 20, 30));
console.log("Are 10, 10, and 10 same? " + compareValues(10, 10, 10));
console.log("Are all three strings same? " + compareValues("TypeScript", "TypeScript", "TypeScript"));
輸出
上述程式碼將產生以下輸出：
is 10, 20, and 30 are same? false Are 10, 10, and 10 same? true Are all three strings same? true
示例
下面的例子演示了建構函式的過載。我們建立了一個名為 data 的類，其中包含三種不同資料型別的三個屬性。
我們聲明瞭一個帶有某些引數的空建構函式。在定義建構函式時，我們使用了 '?' 來使所有引數可選。之後，我們在建構函式中用引數值初始化類屬性。
class data {
public prop1: string | undefined;
public prop2: number | undefined;
public prop3: boolean | undefined;
constructor();
constructor(prop1: string, prop2: number, prop3: boolean);
constructor(prop1?: string, prop2?: number, prop3?: boolean) {
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
}
getValues(): void {
console.log("The value of prop1 is " + this.prop1);
console.log("The value of prop2 is " + this.prop2);
console.log("The value of prop3 is " + this.prop3);
}
}
let object = new data("Hi There!", 87, false);
object.getValues();
// creating the object without passing the constructor arguments.
let object1 = new data();
object1.getValues();
編譯後，將生成以下JavaScript程式碼：
var data = /** @class */ (function () {
function data(prop1, prop2, prop3) {
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
}
data.prototype.getValues = function () {
console.log("The value of prop1 is " + this.prop1);
console.log("The value of prop2 is " + this.prop2);
console.log("The value of prop3 is " + this.prop3);
};
return data;
}());
var object = new data("Hi There!", 87, false);
object.getValues();
// creating the object without passing the constructor arguments.
var object1 = new data();
object1.getValues();
輸出
上述程式碼將產生以下輸出：
The value of prop1 is Hi There! The value of prop2 is 87 The value of prop3 is false The value of prop1 is undefined The value of prop2 is undefined The value of prop3 is undefined
在上面的輸出中，使用者可以看到，由於我們在建立物件時沒有向建構函式傳遞任何引數，所以object1的所有引數值都是未定義的。
示例
在這個例子中，我們將學習如何過載類方法。我們建立了一個名為 methods 的類，其中包含 overloadMethod() 方法。
overloadmethod() 接受字串或布林值作為引數。我們建立了該類的物件，並透過引用物件並傳遞不同的引數值來呼叫 overloadMethod()。
class methods {
public variable1: number = 543;
overloadMethod(key1: string): void;
overloadMethod(key1: boolean): void;
overloadMethod(key1: any): any {
console.log("The value of key1 is " + key1);
}
}
let methodObj = new methods();
methodObj.overloadMethod("TypeScript");
methodObj.overloadMethod(false);
編譯後，將生成以下JavaScript程式碼：
var methods = /** @class */ (function () {
function methods() {
this.variable1 = 543;
}
methods.prototype.overloadMethod = function (key1) {
console.log("The value of key1 is " + key1);
};
return methods;
}());
var methodObj = new methods();
methodObj.overloadMethod("TypeScript");
methodObj.overloadMethod(false);
輸出
上述程式碼將產生以下輸出：
The value of key1 is TypeScript The value of key1 is false
在本教程中，使用者學習了透過不同示例進行函式過載的概念。使用者可以透過引數過載函式，或返回函式的型別。此外，我們還學習瞭如何過載建構函式和類方法。
1K+ 次瀏覽
