TypeScript 中的問號運算子

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月18日
  1. 在 TypeScript 中使用問號 (?) 運算子
  2. 在 TypeScript 中使用問號 (?) 檢查 undefined
TypeScript 中的問號運算子

TypeScript 對型別檢查有嚴格的匹配策略。問號或 ? 通過定義可選引數減輕了使用者的負擔。

此外,? 運算子還可以作為檢查物件的某個屬性是 null 還是 undefined 的簡寫。我們將在本文中討論 TypeScript 中問號運算子的使用。

在 TypeScript 中使用問號 (?) 運算子

parameter? : typeparameter: type | undefined = undefined。因此,它為分配未定義的引數提供了一種方便的快捷方式。

程式碼片段:

interface Props{
    name : string ;
    age? : number ;
}

function getDetails(props : Props){
    if ( props.age !== undefined){
        console.log("Hi my name is " + props.name + " , and my age is " + props.age.toString() );
    } else {
        console.log("Hi my name is " + props.name );
    }
}

getDetails({ name : "Geralt"});
getDetails( { name : "Geralt", age : 95});

輸出:

"Hi my name is Geralt"
"Hi my name is Geralt , and my age is 95"

Props 介面中的可選欄位允許年齡屬性為空,同時將其傳遞給 getDetails 函式。它也適用於帶引數的函式。

讓我們再舉一個沒有 Props 介面的例子。

程式碼片段:

function getDetails(name :string, age? : number){
    if ( age === undefined){
        console.log("Name : " + name);
    } else {
        console.log("Name : " + name + ", Age : " + age.toString());
    }
}

getDetails("Geralt");
getDetails("Geralt", 95);

輸出:

"Name : Geralt"
"Name : Geralt, Age : 95"

上面的函式定義也可以寫成長格式:

function getDetails(name :string, age : number | undefined = undefined){
    ...
}

在 TypeScript 中使用問號 (?) 檢查 undefined

問號或 ? 運算子也可用於檢查物件的某個屬性是 null 還是 undefined

語法:

user?.name

上面的 TypeScript 程式碼轉換為 JavaScript 為:

user === null || user === undefined ? undefined : user.name;

? 運算子也可以連結起來檢查重複的 nullundefined 檢查。

程式碼片段:

interface User {
    user : {
        name : string;
    }
}

interface Data {
    data : User
}

// faulty data from an API call
let d : Data = {
    data : {
        user : undefined
    }
}

let userName = d?.data?.user?.name ?? 'default name';
console.log(userName);

輸出:

"default name"

因此,來自 API 呼叫的一些錯誤資料可能包含一些 undefined 欄位。上面的程式碼段顯示瞭如何連結 ? 運算子有 null,最後使用 ?? 如果返回了 undefined,則為運算子。

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 Operator