ホームページ > 記事 > ウェブフロントエンド > 開発能力の向上に役立つ 5 つの実用的な TypeScript 演算子!
開発能力の向上に役立つ 5 つの実用的な TypeScript 演算子!
- 青灯夜游転載
- 2023-03-15 20:27:331826ブラウズ
この記事では、私が TypeScript のスキルを向上させた方法を紹介します。 TypeScript とその使用方法をより深く理解するのに役立つ 5 つの満足のいく演算子を紹介します。ここで紹介する演算子は次のとおりです。
#Null 以外のアサーション演算子
オプションの連鎖演算子
Null 合体演算子
- ##明示的な型アサーション ##明示的な型変換
- ## 1. 非 null アサーション演算子
非 null アサーション演算子は、末尾の感嘆符 (#!) であり、式の値が # ではないことを TypeScript に伝えます。 ##null または
未定義。これにより、null または unknown 値の可能性による型エラーが回避されます。 [推奨される学習: JavaScript ビデオ チュートリアル ]例: <pre class="brush:js;toolbar:false;">const element: HTMLElement | null = document.getElementById("my-element");
const width: number = element!.offsetWidth;</pre>ここでは、element は
である可能性がありますが、非 null アサーション演算子を使用して、要素の値が
null ではないことがわかっていることを TypeScript に伝えるため、型エラーは発生しません。 2. オプションの連鎖演算子オプションの連鎖演算子 (
) を使用すると、プロパティを気にせずにオブジェクトのプロパティにアクセスできます。それは存在します。プロパティが存在しない場合は、unknown が返されます。
例: <pre class="brush:js;toolbar:false;">interface Person {
name: string;
address?: {
city: string;
};
}
const person: Person = {
name: "John",
};
const city = person.address?.city;</pre>ここでは、address 属性はオプションであるため、オプションの連鎖演算子を使用して、エラーをスローせずに
プロパティに安全にアクセスします。エラー。
3. Null 合体演算子空の合体演算子 (
) は、使用時にデフォルト値を提供する簡潔な方法です。式の値が null または
unknown です。 例: <pre class="brush:js;toolbar:false;">const value: number | null = null;
const defaultValue = 42;
const result = value ?? defaultValue;</pre>ここで、value が
の場合、
result の値は defaultValue になります。 。 4. 明示的な型アサーションある型を別の型に明示的に表明したい場合があります。これを行うには、
構文または as Type 構文を使用します。
例: <pre class="brush:js;toolbar:false;">const input: unknown = "42";
const value: number = <number>(<string>input).length;</pre>または: <pre class="brush:js;toolbar:false;">const input: unknown = "42";
const value: number = (input as string).length;</pre>ここでは、タイプ
の
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 サイトの他の関連記事を参照してください。