開発能力の向上に役立つ 5 つの実用的な TypeScript 演算子!

この記事では、私が TypeScript のスキルを向上させた方法を紹介します。 TypeScript とその使用方法をより深く理解するのに役立つ 5 つの満足のいく演算子を紹介します。ここで紹介する演算子は次のとおりです。

• #Null 以外のアサーション演算子

• オプションの連鎖演算子

• Null 合体演算子

• ##明示的な型アサーション

##明示的な型変換

• ## 1. 非 null アサーション演算子

非 null アサーション演算子は、末尾の感嘆符 (#!) であり、式の値が # ではないことを TypeScript に伝えます。 ##null または

。これにより、null または unknown 値の可能性による型エラーが回避されます。 [推奨される学習: JavaScript ビデオ チュートリアル ]例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const element: HTMLElement | null = document.getElementById(&quot;my-element&quot;); const width: number = element!.offsetWidth;</pre><div class="contentsignin">ログイン後にコピー</div></div>ここでは、element は

である可能性がありますが、非 null アサーション演算子を使用して、要素の値が

ではないことがわかっていることを TypeScript に伝えるため、型エラーは発生しません。 2. オプションの連鎖演算子オプションの連鎖演算子 (

) を使用すると、プロパティを気にせずにオブジェクトのプロパティにアクセスできます。それは存在します。プロパティが存在しない場合は、unknown が返されます。

例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">interface Person { name: string; address?: { city: string; }; } const person: Person = { name: &quot;John&quot;, }; const city = person.address?.city;</pre><div class="contentsignin">ログイン後にコピー</div></div>ここでは、address 属性はオプションであるため、オプションの連鎖演算子を使用して、エラーをスローせずに

プロパティに安全にアクセスします。エラー。

3. Null 合体演算子空の合体演算子 (

) は、使用時にデフォルト値を提供する簡潔な方法です。式の値が null または

です。 例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const value: number | null = null; const defaultValue = 42; const result = value ?? defaultValue;</pre><div class="contentsignin">ログイン後にコピー</div></div>ここで、value が

の場合、

の値は defaultValue になります。 。 4. 明示的な型アサーションある型を別の型に明示的に表明したい場合があります。これを行うには、