開発能力の向上に役立つ 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

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

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 属性はオプションであるため、オプションの連鎖演算子を使用して、エラーをスローせずに

city

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

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

??

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

unknown

です。 例: <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 が

null

の場合、

result

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

構文または as Type 構文を使用します。

例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const input: unknown = &quot;42&quot;; const value: number = &lt;number&gt;(&lt;string&gt;input).length;</pre><div class="contentsignin">ログイン後にコピー</div></div>または: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const input: unknown = &quot;42&quot;; const value: number = (input as string).length;</pre><div class="contentsignin">ログイン後にコピー</div></div>ここでは、タイプ

unknown

の

input

を

string# にアサートします。 ## を指定し、その長さを

number にアサートします。 5. 明示的な型変換場合によっては、ある型から別の型に値を変換したい場合があります。これを行うには、型のコンストラクターを使用します。

例:

const value: string = "42";
const numberValue: number = Number(value);

ここでは、string 型

value

を

number

型

numberValue に変換します。 これらの演算子を理解すると、TypeScript をより深く理解し、スキルを向上させることができます。これらの演算子を活用して TypeScript プログラミングを改善していただければ幸いです。 #元のリンク: https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312プログラミング関連の知識について詳しくは、

プログラミング教育

をご覧ください。 ！

以上が開発能力の向上に役立つ 5 つの実用的な TypeScript 演算子!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。