如何評價TypeScript新特性 template string type

時間 2021-05-05 22:01:26

1樓:

對於寫框架和庫來說很實用。例如:

大量的庫都有在做字串拼接,比如:

事件名'onChange'這種,用的實在是太多了

lodash的get(a.b.c)

還有大家一直吐槽的redux、dva等的action type沒法type的問題

anders的tsconf 2020的例子 還有挺多的

最近推上比較火的,解析URL引數的例子 ,個人覺得很實用。之前為了解決路徑的問題搞還搞了小工具

Effective TypeScript TypeScript Splits the Atom!

TSconf2020 的keynote也可以看看

還有大佬提到的debug問題,型別越來越複雜,確實需要啊

2樓:

老爺子給的Demo還是比較通俗易懂的...

3樓:楊健

當然是一顆賽艇,目前維護的專案裡存在大量的路徑操作,存在n種路徑格式(絕對路徑,相對路徑,npm路徑,含字首路徑等等)之前很難區分乙個變數屬於何種路徑,借助於這個東西就可以很好的對路徑變數進行路徑約束,減小路徑操作出錯的可能。

4樓:布萊恩特

拋磚引玉下

可以用來解決 vuex 的魔法字串的問題type

VuexOptions

=type

Action

=N

extends

string?`

$/$`

:keyof

Mtype

Store

=declare

function

Vuex

(options: VuexOptions

):Store

const

store

=Vuex

(,remove() }})

store

.dispatch

("cart/add"

)store

.dispatch

("cart/remove"

)store.dispatch("cart/add") // 此處字串型別安全了。若輸錯會報錯

store.dispatch("cart/remove")參考https://

5樓:GPlane

9 月 4 日更新:加了乙個簡單的 HTML parser:

type

Whitespace

='\u0009'

|'\u000a'

|'\u000c'

|'\u000d'

|'\u0020'

type

LowerAlpha

='a'

|'b'

|'c'

|'d'

|'e'

|'f'

|'g'

|'h'

|'i'

|'j'

|'k'

|'l'

|'m'

|'n'

|'o'

|'p'

|'q'

|'r'

|'s'

|'t'

|'u'

|'v'

|'w'

|'x'

|'y'

|'z'

type

UpperAlpha=`

$`type

Digit

='0'

|'1'

|'2'

|'3'

|'4'

|'5'

|'6'

|'7'

|'8'

|'9'

type

TrimStart

=S

extends''?

'':Sextends`$$

`?TrimStart

>:S

type

ParseAttributes

extendsany

>=Iextends`$$

`?ParseAttributes

,Attrs

>:I

extends

`>$`

?[Attrs,I

]:Iextends`/$

`?[Attrs,I

]:ParseAttribute

extends

[infer

Attr

,infer

Rest]?

ParseAttributes

...Attrs

,Attr

]>:never

type

ParseAttribute

=ParseAttributeName

extends

[infer

Name

,infer

Rest]?

Name

extends''?

never

:TrimStart

>extends

infer

Rest

?Rest

extends`=$

`?ParseAttributeValue

>>extends

[infer

Value

,infer

Rest]?

[,Rest]:

never:[,

Rest]:

never

:never

type

ParseAttributeName

string

>=Iextends''?

'':Iextends`$$

`?Head

extends

' '|

"'"|

'"'|

'>'|'/'

|'='?[

N,`$$

`]:ParseAttributeName

$`>:never

type

ParseAttributeValue

=I

extends`"$

"$`?

[Value

,Rest]:

Iextends`'$

'$`?

[Value

,Rest]:

ParseAttributeValueNoQuote

''>extends

[infer

Value

,infer

Rest]?

Value

extends''?

never:[

Value

,Rest]:

never

type

ParseAttributeValueNoQuote

Oextends

string

>=Iextends''?

[O,I

]:Iextends`$$

`?Head

extends

Whitespace

|'"'

|"'"

|'='

|'<'

|'>'

|'`'?[

O,`$$

`]:ParseAttributeValueNoQuote<

Rest,`$

$`>:never

type

ParseStartTag

=I

extends

`<$`

?ParseTagName

>extends

[infer

TagName

,infer

Rest]?

TagName

extends''?

never:[

TagName

,Rest]:

never

:never

type

ParseEndTag

=I

extends`$

`?ParseTagName

>extends

[infer

TagName

,infer

Rest]?

TrimStart

>extends

`>$`

?[TagName

,Rest]:

never

:never

:never

type

TagNameChars

=LowerAlpha

|UpperAlpha

|Digit

type

ParseTagName

string

>=Iextends''?

N : I

extends`$$

`?Nextends''?

Head

extends

TagNameChars

?ParseTagName

,Head

>:never

:Head

extends

TagNameChars

|'-'

?ParseTagName

$`>:[

N,`$$

`]:never

type

ParseText

string

>=Iextends''?

[TrimFirstNewline

,I]

:Iextends`$

`?[TrimFirstNewline

,I]

:Iextends

`<$$`

?[TrimFirstNewline

,I]

:Iextends`$$

`?ParseText

$`>:never

type

TrimFirstNewline

=S

extends`\

r\n$

`?Rest :

Sextends`\

n$`?

Rest :

Sextends`\

r$`?

Rest : S

type

VoidElement

='area'

|'base'

|'br'

|'col'

|'embed'

|'hr'

|'img'

|'input'

|'link'

|'meta'

|'param'

|'source'

|'track'

|'wbr'

type

ParseTag

=ParseStartTag

extends

[infer

TagName

,infer

Rest]?

ParseAttributes

>extends

[infer

Attributes

,infer

Rest]?

Rest

extends

`/>$`

?[,Rest]:

Rest

extends

`>$`

?TagName

extends

VoidElement?[,

Rest]:

ParseChildren

>extends

[infer

Children

,infer

Rest]?

ParseEndTag

>extends

[infer

EndTagName

,infer

Rest]?

EndTagName

extends

TagName?[,

Rest]:

never

:never

:never

:never

:never

:never

type

ParseChildren

extendsany

>=string

extendsI?

never:I

extends''?

[Children]:

Iextends

`<$$`

?ParseTag

extends

[infer

Tag,

infer

Rest]?

ParseChildren

...Children

,Tag

]>:never:I

extends`$$

`?[Children,I

]:ParseText

extends

[infer

Text

,infer

Rest]?

ParseChildren

...Children

,Text

]>:never

type

ParseDocument

=ParseChildren

[0]

type

Html=`

class="text-center"

id="msg"

>HTML parser!

`type

AST=

ParseDocument

>>type

VoidElementExample

=ParseDocument

<''>type

InvalidVoidElementExample=ParseDocument

<''>// invalid HTML, so it's `never`type

UnquotedAttributeExample=ParseDocument

<''>type

SingleQuoteAttributeExample=ParseDocument

<''>type

DoubleQuoteAttributeExample=ParseDocument

<''>type

SelfCloseTag

=ParseDocument

<''>type

NumericTagName

=ParseDocument

<'<2 a=b>'

>// this is valid, not a bugtype

PureText

=ParseDocument

<'custom text'

>type

MultiTags

=ParseDocument

<''>注意輸入的 HTML 結構不能太複雜,不然會導致 TypeScript 報告遞迴深度超過限制。可以在 TypeScript Playground 上測試。

原回答:

我寫了乙個簡單的 URL parser:

'>>可以在我的部落格上檢視原理分析:《用 TypeScript 模板字串型別來製作 URL parser》 或 我的知乎文章,或 在 TypeScript Playground 上測試 。

現在 TypeScript 的生態如何?

aemoe 因為每增加乙個編譯器都是一次build時間增加而且typescript還不和js一樣 Js可以向下相容會ES6的ES7的寫這些不會的繼續ES4,ES5 所以不會有太大問題而且用的這些新的功能是早晚會被瀏覽器支援的所以用起來很放心所以除非TypeScript受到瀏覽器的支援之前我都不建議在...

TypeScript 如何完美地書寫 React 中的 HOC?

自己專案裡的一段,僅供參考。有幾個any是因為我不想折騰了,搞半天沒搞好直接any。雖然用any不太好,主要是我這還用redux包了一下,官網也沒有很好的解決方案不用any,但是不用的話太折騰浪費時間啊。該用any的時候還是用any的,別愣頭青,就是不用any才算完美?匿了。 夏呂俊 可以參考別人已...

如何評價the chainsmokers 新歌 all we know?

kerwin 哈哈,我覺得是兩個人吵架了,然後彼此冷靜下來都覺得離不開對方,或者另尋新歡了。因為MV男主最後和乙個女孩在一起了,不過我臉痴,嘿嘿。 煙捲的歌,每首都能迴圈一陣子,但都是熱勁過了就不想再聽,我是覺得不耐聽。當然了,不能要求電音有耐聽這一屬性。而且他們的歌基本都乙個套路 all we k...