淺談 TypeScript - 優雅的使用奇技淫巧

這篇文章會介紹一些如何優雅的使用 TypeScript 的奇技淫巧，如果你也有更多的使用技巧不妨評論留言，持續更新；

可選型

如果你能看見

？

那麼在 TypeScript 的世界中，它的表述是可能也許，因此在處理這段邏輯時需要用到

if

，如：

function

numS

（

s

？：

number

）

{

if

（

s

）

{

return

s

*

0

；

}

return

0

；

}

numS

（

0

）

但是，某些情況下，我們可能不需要如此，假設這段函式就是因為如果

s

不是

number

時可以

throw

一個錯誤，因此，我們可以這樣：

function

v

（

s

？：

number

）{

if

（

！

s

）{

throw

new

Error

（

“”

）；

}

}

function

numS

（

s

？：

number

）

{

v

（

s

）；

return

s

！

*

0

；

}

如果可以統一，那麼看起來就沒有那麼多的

if

了。

Rest 引數

有時候我們可能需要批次的來獲取引數，並且每一個引數的型別還不一樣，我們可以宣告一個元組如：

function

query

（。。。

args

：

［

string

，

number

，

boolean

］）{

const

d

：

string

=

args

［

0

］；

const

n

：

number

=

args

［

1

］；

const

b

：

boolean

=

args

［

2

］；

}

多引數返回

如果有一天我們遇到了需要返回多個不同型別的引數時：

function

search

（）

：

［

string

，

number

］

{

return

［

“1”

，

1

］；

}

const

{。。。

args

}

=

search

（）；

args

［

0

］

args

［

1

］

另一種 Readonly

如果我們直接使用

readonly

，編譯之後會增加很多其他的程式碼，如果我們利用 Class 的 get 鉤子，也完全可以實現相同的場景，如：

class

QueryP

{

public

_g

？：

string

；

get

g

（）{

return

this

。

_g

；

}

}

const

queryp

=

new

QueryP

（）；

// queryp。g = “1234”；

如果我們對

g

賦值，編譯器會給出如下的錯誤：

skill。ts：75：8 - error TS2540： Cannot assign to

‘g’

because it is a constant or a read-only property。

75

queryp。g

=

“1234”

；

如果你的

target

是

ES5

，那麼你應該能想到

Object。defineProperty

。

推導物件Map的值

function

pluck

<

T

，

K

extends

keyof

T

>

（

o

：

T

，

names

：

K

［］）

：

T

［

K

］［］

{

return

names

。

map

（

n

=>

o

［

n

］）；

}

const

d

=

pluck

（{

d

：

“123”

}，

［

“d”

］）；