つづこ

<h2 id="%E5%9E%8B%E3%81%AE%E5%AE%89%E5%85%A8%E6%80%A7%E3%82%92%E4%BF%9D%E8%A8%BC%E3%81%97%E3%81%9F%E3%81%84%F0%9F%98%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E5%9E%8B%E3%81%AE%E5%AE%89%E5%85%A8%E6%80%A7%E3%82%92%E4%BF%9D%E8%A8%BC%E3%81%97%E3%81%9F%E3%81%84%F0%9F%98%AB" aria-hidden="true"></a> 型の安全性を保証したい😫</h2>
<ol data-line="1" class="code-line">
<li data-line="1" class="code-line">まずは<code>typeof</code>演算子で型チェックを行う</li>
<li data-line="2" class="code-line">同じ値に対し<code>typeof</code>演算子を2回つかうことがあるようなら、潔く<strong>ユーザー定義型ガード</strong>（<code>is</code>演算子）をつかう。</li>
</ol>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="5" class="code-line">型アサーション<code>as</code>はよほど安全じゃない限り使わない🙅</p>
</div></aside>


<h2 id="jsx%E3%81%8B%E3%82%89css%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E5%9E%8B%E5%AE%89%E5%85%A8%E3%81%AB%E6%B8%A1%E3%81%99%F0%9F%8E%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#jsx%E3%81%8B%E3%82%89css%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E5%9E%8B%E5%AE%89%E5%85%A8%E3%81%AB%E6%B8%A1%E3%81%99%F0%9F%8E%81" aria-hidden="true"></a> JSXからCSSのカスタムプロパティを型安全に渡す🎁</h2>
<div class="code-block-container"><pre class="language-ts"><code class="language-ts code-line" data-line="1">style<span class="token operator">=</span><span class="token punctuation">{</span>
  <span class="token punctuation">{</span>
    <span class="token string-property property">'--custom-property'</span><span class="token operator">:</span> someVariable
  <span class="token punctuation">}</span> <span class="token keyword">as</span> React<span class="token punctuation">.</span>CSSProperties
<span class="token punctuation">}</span>
</code></pre></div><p data-line="8" class="code-line">まとめて安心安全⛑️</p>
