什么是“！” （爆炸符号）是在属性声明中表示的？

Question

代码：

class Cat extends Animal { tag! : 'cat' }

“！”是什么意思？ tag声明之后是什么意思？与tag有何不同？

Answer 1

让我们看一个例子-假设我们有以下代码：

<table id="div__bodytab" border="0" cellspacing="0" cellpadding="0" width="100%" style="">
<tbody><tr class="printonly"><td height="0" id="div__labprintcol1" nowrap="" class="listheadertdleft listheadertextb uir-list-header-td uir-list-header-align-ctr"><div class="listheader">Edit | View</div></td><td height="0" id="div__labprintcol2" nowrap="" class="listheadertd listheadertextb uir-list-header-td uir-list-header-align-rt"><div class="listheader">ID<span class="listheadersort"></span></div></td><td height="0" id="div__labprintcol3" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">ID2<span class="listheadersort"></span></div></td><td height="0" id="div__labprintcol4" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Customer<span class="listheadersort"></span><img class="uir-hover-icon" src="/images/hover/icon_hover.png?v=2019.2.0" alt="" border="0" style="vertical-align:middle;" title="This column is hoverable"></div></td><td height="0" id="div__labprintcol5" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Stripe Code&nbsp;<span class="listheadersortup"></span><span class="uir-list-header-sort-padding-after" style="padding-right:10px;"></span></div></td><td height="0" id="div__labprintcol6" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Event Date<span class="listheadersort"></span></div></td><td height="0" id="div__labprintcol7" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Invoice<span class="listheadersort"></span><img class="uir-hover-icon" src="/images/hover/icon_hover.png?v=2019.2.0" alt="" border="0" style="vertical-align:middle;" title="This column is hoverable"></div></td><td height="0" id="div__labprintcol8" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Invoice Sales Order<span class="listheadersort"></span></div></td><td height="0" id="div__labprintcol9" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Invoice Terms<span class="listheadersort"></span></div></td><td height="0" id="div__labprintcol10" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Event Type<span class="listheadersort"></span></div></td><td height="0" id="div__labprintcol11" nowrap="" class="listheadertd listheadertextb uir-list-header-td uir-list-header-align-rt"><div class="listheader">Balance<span class="listheadersort"></span></div></td></tr>
<tr class="uir-list-row-tr uir-list-row-even" id="row0">
<td valign="top" class="listtextctr uir-list-row-cell" nowrap="" style=""><a class="dottedlink edititem" href="/app/common/custom/custrecordentry.nl?rectype=176&amp;id=214433&amp;e=T" xpath="1">Edit</a>&nbsp;|&nbsp;<a class="dottedlink viewitem" href="/app/common/custom/custrecordentry.nl?rectype=176&amp;id=214433">View</a></td>
<td valign="top" class="listtextrt uir-list-row-cell" style=""><a href="/app/common/custom/custrecordentry.nl?rectype=176&amp;id=214433" target="_self" class="dottedlink">214433</a></td>
<td valign="top" class="listtext uir-list-row-cell" style="">245950</td>
<td valign="top" class="listtext uir-list-row-cell" style=""><a href="/app/common/entity/custjob.nl?id=7426843" class="dottedlink uir-hoverable-anchor" style="cursor:pointer;" id="qsTarget_1237261608" onmouseover="var win = (typeof parent.getExtTooltip != 'undefined' &amp;&amp; parent.getExtTooltip) ? parent : window;  if (typeof win.getExtTooltip != 'undefined')var tip = win.getExtTooltip('qsTarget_1237261608', 'CUSTOMER', 'DEFAULT_TEMPLATE', 7426843,null);if(tip != undefined) tip.onTargetOver(event);">Salads &amp; Wraps</a></td>
<td valign="top" class="listtext uir-list-row-cell" style="">funds</td>
<td valign="top" class="listtext uir-list-row-cell" style="">11/14/2019</td>
<td valign="top" class="listtext uir-list-row-cell" style=""><a href="/app/accounting/transactions/transaction.nl?id=13881996" class="dottedlink uir-hoverable-anchor" style="cursor:pointer;" id="qsTarget_720078194" onmouseover="var win = (typeof parent.getExtTooltip != 'undefined' &amp;&amp; parent.getExtTooltip) ? parent : window;  if (typeof win.getExtTooltip != 'undefined')var tip = win.getExtTooltip('qsTarget_720078194', 'transaction', 'TRAN_TEMPLATE', 13881996,null);if(tip != undefined) tip.onTargetOver(event);">Invoice #INV10</a></td>
<td valign="top" class="listtext uir-list-row-cell" style="">Order #0073</td>
<td valign="top" class="listtext uir-list-row-cell" style="">On Shipping</td>
<td valign="top" class="listtext uir-list-row-cell" style="">The account has insufficient funds </td>
<td valign="top" class="listtextrt uir-list-row-cell" style="">476.00</td>
</tr>


<tr class="uir-list-row-tr uir-list-row-odd" id="row1">
<td valign="top" class="listtextctr uir-list-row-cell" nowrap="" style=""><a class="dottedlink edititem" href="/app/common/custom/custrecordentry.nl?rectype=176&amp;id=214502&amp;e=T">Edit</a>&nbsp;|&nbsp;<a class="dottedlink viewitem" href="/app/common/custom/custrecordentry.nl?rectype=176&amp;id=214502">View</a></td>
<td valign="top" class="listtextrt uir-list-row-cell" style=""><a href="/app/common/custom/custrecordentry.nl?rectype=176&amp;id=214502" target="_self" class="dottedlink">214502</a></td>
<td valign="top" class="listtext uir-list-row-cell" style="">3831</td>
<td valign="top" class="listtext uir-list-row-cell" style=""><a href="/app/common/entity/custjob.nl?id=8650625" class="dottedlink uir-hoverable-anchor" style="cursor:pointer;" id="qsTarget_193242182" onmouseover="var win = (typeof parent.getExtTooltip != 'undefined' &amp;&amp; parent.getExtTooltip) ? parent : window;  if (typeof win.getExtTooltip != 'undefined')var tip = win.getExtTooltip('qsTarget_193242182', 'CUSTOMER', 'DEFAULT_TEMPLATE', 8650625,null);if(tip != undefined) tip.onTargetOver(event);">Bbq and Pizzeria </a></td>
<td valign="top" class="listtext uir-list-row-cell" style="">funds</td>
<td valign="top" class="listtext uir-list-row-cell" style="">11/14/2019</td>
<td valign="top" class="listtext uir-list-row-cell" style=""><a href="/app/accounting/transactions/transaction.nl?id=13552039" class="dottedlink uir-hoverable-anchor" style="cursor:pointer;" id="qsTarget_150766952" onmouseover="var win = (typeof parent.getExtTooltip != 'undefined' &amp;&amp; parent.getExtTooltip) ? parent : window;  if (typeof win.getExtTooltip != 'undefined')var tip = win.getExtTooltip('qsTarget_150766952', 'transaction', 'TRAN_TEMPLATE', 13552039,null);if(tip != undefined) tip.onTargetOver(event);">Invoice #INV20</a></td>
<td valign="top" class="listtext uir-list-row-cell" style="">Order #0068</td>
<td valign="top" class="listtext uir-list-row-cell" style="">ACH on Shipping</td>
<td valign="top" class="listtext uir-list-row-cell" style="">The account has insufficient funds</td>
<td valign="top" class="listtextrt uir-list-row-cell" style="">1,027.18</td>
</tr>
<tr class="noprint uir-noprint-list-end" style="visibility: hidden;"><td height="0" id="div__labcol1" nowrap="" class="listheadertdleft listheadertextb uir-list-header-td uir-list-header-align-ctr"><div class="listheader">Edit | View</div></td><td height="0" id="div__labcol2" nowrap="" class="listheadertd listheadertextb uir-list-header-td uir-list-header-align-rt"><div class="listheader">ID<span class="listheadersort"></span></div></td><td height="0" id="div__labcol3" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">ID2<span class="listheadersort"></span></div></td><td height="0" id="div__labcol4" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Customer<span class="listheadersort"></span><img class="uir-hover-icon" src="/images/hover/icon_hover.png?v=2019.2.0" alt="" border="0" style="vertical-align:middle;" title="This column is hoverable"></div></td><td height="0" id="div__labcol5" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Stripe Code&nbsp;<span class="listheadersortup"></span><span class="uir-list-header-sort-padding-after" style="padding-right:10px;"></span></div></td><td height="0" id="div__labcol6" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Event Date<span class="listheadersort"></span></div></td><td height="0" id="div__labcol7" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Invoice<span class="listheadersort"></span><img class="uir-hover-icon" src="/images/hover/icon_hover.png?v=2019.2.0" alt="" border="0" style="vertical-align:middle;" title="This column is hoverable"></div></td><td height="0" id="div__labcol8" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Sales Order<span class="listheadersort"></span></div></td><td height="0" id="div__labcol9" ="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Invoice Terms<span class="listheadersort"></span></div></td><td height="0" id="div__labcol10" nowrap="" class="listheadertd listheadertextb uir-list-header-td"><div class="listheader">Event Type<span class="listheadersort"></span></div></td><td height="0" id="div__labcol11" nowrap="" class="listheadertd listheadertextb uir-list-header-td uir-list-header-align-rt"><div class="listheader">Balance<span class="listheadersort"></span></div></td></tr>
</tbody></table>

interface Animal {
    tag: string;
}

class Cat implements Animal { tag: 'cat' }

两个代码段都将引发以下内容：class AnimalClass { tag: string | undefined; } class Dog extends AnimalClass { tag: 'dog' } 。

这是2.7.2中添加的TypeScript的一项功能，其中包括严格的类检查，所有属性都应在其构造函数中声明。

通过添加一个爆炸符号Property 'tag' has no initializer and is not definitely assigned in the constructor.(2564)，您将覆盖此行为，并告诉编译器“知道”，它已正确初始化，以后将不会被不确定。

还可以通过在编译器选项中设置!来禁用它。或者，您可以在应初始化属性的位置进行初始化（根据TypeScript）：

"strictPropertyInitialization": false