Day12-TypeScript(TS)的选择性属性(Optional Properties)

今天要来讲解TypeScript(TS)的选择性属性(Optional Properties)，
在使用函式时时常会碰到参数有时需要有时不需要的情形，
但逻辑又几乎相同，
这时就可以把这些函示写在一起，再利用选择性属性参数传入，
就能避免重复一直写相同的函示。

首先来复习一下Day8的介面范例吧。

//宣告介面
interface MyFunc{
    x:number;
    y:number;
}

//函式
let func1=(p:MyFunc)=>{
    console.log(p.x,p.y);
}

//使用函式
func1({x:10});//error  每项参数都必须对应到
func1({x:10,y:20});
func1({x:10,y:20,z:20}); //error  未标记z视为错误

这个范例所标记的参数在使用时不能多也不能少，
如此一来，在使用时就会缺少弹性，
那若是参数传入可有可无时，
这时就需要使用选择性属性来增加函式的弹性，
使用方式非常简单，
在介面属性名称後面加上 ? 就行了，
例如，若是y为可有可无的参数，
介面的宣告如下，

//宣告介面
interface MyFunc{
    x:number;
    y?:number;
}

如此一来，y即为选择性属性。

那麽函示可能也会有些不同需要做些逻辑判断，
例如，

//函式
let func1=(p:MyFunc)=>{
    if(p.y){
        console.log(p.x,p.y);
    }else{
        console.log(p.x);
    }
}

//使用函式
func1({x:10,y:20});
func1({x:10});

像这样将y订为选择性属性後，
在使用上就有更多不同的弹性了，
也可以避免重复写太多相同的函式喔。

今日结语

今天教得很简单，
但是非常实用呢，
希望大家可以利用选择性属性，
让自己的程序码更加简洁俐落，
也更容易维护喔!