TypeScript 介面 可選屬性

有時介面所規定的屬性不是必須的，或者在滿足一定條件的時候才需要。

程式碼例項如下：

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age?:number;
}

上面程式碼規定age是可選的，在屬性名稱後面新增一個問號（?）。

程式碼例項如下：

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age?:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
let myObj = {
  webName:"螞蟻部落", 
  address:"青島市南區"
};
func(myObj);

由於age是可選屬性，所以傳遞的引數可以沒有age屬性。

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age?:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
let myObj = {
    webName:"螞蟻部落", 
    age: "ts",
    address:"青島市南區"
};
func(myObj);

即便age是可選屬性，一旦傳遞了age屬性，那麼它也要接受約束。

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age?:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
func({
    webName:"螞蟻部落", 
    age: "ts",
    address:"青島市南區"
});

引數以直接量方式傳遞，那麼不能具有額外的屬性，在TypeScript 介面簡介一文已經介紹。

strictNullChecks:true的影響：

如果在tsconfig.json檔案中配置"strictNullChecks":true，那麼可選屬性會被自動地加上| undefined。

程式碼例項如下：

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age?:number;
}
  
function func(obj: Itest) {
  console.log(obj.webName);
}
  
let myObj = {
    webName:"螞蟻部落", 
    age: 5,
    address:"青島市南區"
};
func(myObj);

程式碼執行效果截圖如下：

特別說明：此語法並不僅作用域介面可選屬性。