TypeScript 中的問號運算子
Shuvayan Ghosh Dastidar
2023年1月30日
TypeScript 對型別檢查有嚴格的匹配策略。問號或 ? 通過定義可選引數減輕了使用者的負擔。
此外，? 運算子還可以作為檢查物件的某個屬性是 null 還是 undefined 的簡寫。我們將在本文中討論 TypeScript 中問號運算子的使用。
在 TypeScript 中使用問號 (?) 運算子
parameter? : type 是 parameter: 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;
? 運算子也可以連結起來檢查重複的 null 或 undefined 檢查。
程式碼片段：
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，則為運算子。
