TypeScript 中物件引數的預設值

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月18日
  1. TypeScript 中物件的預設值
  2. 在 TypeScript 中通過解構傳遞預設值
  3. 在 TypeScript 中使物件的某些屬性具有預設值
  4. 在 TypeScript 中使用 Partial 關鍵字使所有欄位都具有預設值
TypeScript 中物件引數的預設值

預設引數是使用者希望始終合併到程式碼中的東西。TypeScript 具有在物件中提供預設引數和在函式中傳遞物件的功能。

本教程將重點介紹如何在 TypeScript 中使用預設引數。

TypeScript 中物件的預設值

如果沒有值傳遞給函式,則可以將函式定義為使用預設值。以下程式碼段演示瞭如何實現這一點。

interface Config {
    file :  string ;
    test : boolean;
    production : boolean;
    dbUrl : string;
}
function getConfig ( config : Config = { file : 'test.log', test : true,
    production : false, dbUrl : 'localhost:5432' }) {
        console.log(config);
}


getConfig();

getConfig({file : 'prod.log', test: false, production : true, dbUrl : 'example.com/db'});

輸出:

{
  "file": "test.log",
  "test": true,
  "production": false,
  "dbUrl": "localhost:5432"
}

{
  "file": "prod.log",
  "test": false,
  "production": true,
  "dbUrl": "example.com/db"
}

上面顯示瞭如何在 TypeScript 中使用預設值。

如果在呼叫函式時沒有傳遞 Config 物件的值,getConfig 函式將使用函式定義中分配的預設值,這可以在第一次呼叫 getConfig 函式的情況下看到。

在對函式的第二次呼叫中,預設值被傳遞給函式的值覆蓋。

在 TypeScript 中通過解構傳遞預設值

TypeScript 還支援通過解構物件的屬性將預設值傳遞給函式。以下程式碼段顯示了它是如何實現的。

interface Person {
    firstName : string ;
    lastName : string ;
}

function getPerson( {firstName  = 'Steve',  lastName = 'Jobs' } : Person ) {
    console.log( firstName + ' ' + lastName);
}

getPerson({} as Person);

getPerson({ firstName : 'Tim', lastName : 'Cook'});

輸出:

"Steve Jobs"
"Tim Cook"

因此,與前面的示例一樣,有兩次呼叫函式 getPerson,一次使用預設值,另一次使用傳遞給函式的值。不同之處在於預設情況下,要傳遞一個空物件 {},否則 TypeScript 將丟擲錯誤 - Expected 1 arguments, but got 0

在 TypeScript 中使物件的某些屬性具有預設值

在為物件分配屬性或將物件傳遞給函式時,我們可以使物件的某些屬性具有預設值,而其他屬性是必需的。這可以通過使用 ? 來完成運算子。

以下程式碼段顯示了它是如何完成的。

interface Config {
    file? :  string ;
    test? : boolean;
    production : boolean;
    dbUrl : string;
}


function getConfig( { file = 'api.log', test = true, production, dbUrl} : Config ) {
    var config : Config = {
        file,
        test,
        production,
        dbUrl
    };
    console.log(config);
}

getConfig({production : true, dbUrl : 'example.com/db'});

輸出:

{
  "file": "api.log",
  "test": true,
  "production": true,
  "dbUrl": "example.com/db"
}

在 TypeScript 中使用 Partial 關鍵字使所有欄位都具有預設值

Partial 關鍵字是一個有用的工具,可以使物件的所有屬性成為可選的,並且可用於在函式定義的情況下使物件的所有欄位都具有預設值。使用上面的示例。

interface Config {
    file :  string ;
    test : boolean;
    production : boolean;
    dbUrl : string;
}


function getConfig( { file = 'api.log', test = true, production = false, dbUrl = 'localhost:5432'} : Partial<Config> ) {
    var config : Config = {
        file,
        test,
        production,
        dbUrl
    };
    console.log(config);
}

getConfig({production : true});

輸出:

{
  "file": "api.log",
  "test": true,
  "production": true,
  "dbUrl": "localhost:5432"
}

因此,在上面的示例中,我們可以看到所有欄位都有預設值,並且 production 屬性的值已被覆蓋。

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

相關文章 - TypeScript Object